<template>
  <div class="container_wrap full" v-loading="fullscreenLoading">
    <div class="content_main">
      <ContentWrap id="id-baseInfo" title="逻辑空间信息" description="" :isExpand="baseInfoExpand" :expand-swicth="true"
        class="mb16" @expand="(v) => baseInfoExpand = v">
        <div class="list_panel">
          <div class="list_item">
            <span class="item_label">逻辑空间名称：</span>
            <span class="item_value">
              <ellipsis-tooltip :content="detailInfo.spaceName || '--'" class-name="w100f mr8-i"
                :refName="'tooltipOver' + 'spaceName'"></ellipsis-tooltip>
            </span>
          </div>
          <div class="list_item">
            <span class="item_label">所属领域：</span>
            <span class="item_value">{{ detailInfo.domainName || '--' }}</span>
          </div>
          <div class="list_item">
            <span class="item_label">创建企业：</span>
            <span class="item_value"> <ellipsis-tooltip :content="detailInfo.tenantName || '--'"
                class-name="w100f mr8-i" :refName="'tooltipOver' + 'tenantName'"></ellipsis-tooltip></span>
          </div>
          <div class="list_item">
            <span class="item_label">是否开启：</span>
            <span class="item_value">{{ detailInfo.bizState ? '是' : '否' }}</span>
          </div>
        </div>
        <el-tabs v-model="activeTabName" class="param-tabs" style="margin-top: 8px;">
          <el-tab-pane label="成员权限" name="member">
            <Table ref="memberTableRef" :tableInfo="memberTableInfo" class="fiveRow-table" />
          </el-tab-pane>
          <el-tab-pane label="策略配置" name="strategy">
            <StrategyTable ref="strategyTableDetailRef" :show-title="false" :is-look="true"
              :value="detailInfo.policyRSVOS || []">
            </StrategyTable>
          </el-tab-pane>
        </el-tabs>
      </ContentWrap>
      <ContentWrap id="id-approveInfo" title="流程审批" expandSwicth style="margin-top: 15px" :isExpand="expandApprove"
        @expand="(v) => expandApprove = v">
        <ApprovalProcess ref="approvalProcessRef" v-if="deploymentId" :deploymentId="deploymentId"
          :processInstanceId="processInstanceId">
        </ApprovalProcess>
      </ContentWrap>
    </div>
    <div class="tool_btns">
      <div class="btns">
        <el-button v-for="btn in toolBtns" :type="btn.type" :plain="btn.plain" @click="btnClick(btn)">{{ btn.label }}</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="productSpaceDetail">
import useUserStore from "@/store/modules/user";
import StrategyTable from "../data_smart_contract/components/strategyTable.vue";
import { TableColumnWidth } from "@/utils/enum";


const { proxy } = getCurrentInstance() as any;
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
const fullPath = route.fullPath;

const fullscreenLoading = ref(false);
const baseInfoExpand = ref(true);
const expandApprove = ref(true);

const deploymentId = ref('');
const processInstanceId = ref('');

const detailInfo: any = ref({});

/** 页签当前活跃的有成员权限和策略配置 */
const activeTabName = ref('member');

const toolBtns: any = computed(() => {
  let btnsArr: any = [{
    label: "关闭", value: "cancel", plain: true
  }];
  // TODO,资产运营平台TODO
  return btnsArr;
});

const btnClick = (btn: any) => {
  switch (btn.value) {
    case 'cancel':
      cancel();
      break;
    default:
      break;
  }
}

const cancel = () => {
  userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
  router.push({
    name: 'productApplicationManage'
  });
}

onBeforeMount(() => {

})

const memberTableInfo = ref({
   id: "input-member-table",
  height: '214px',
  fields: [
    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
    { label: "成员名称", field: "memberGuid", width: 200 },
    { label: "角色类型", field: "roleType", width: 160 },
    { label: "描述", field: "description", width: 300 },
  ],
  data: [],
  showPage: false,
  actionInfo: {
    show: false,
  }
});

</script>

<style lang="scss" scoped>
.content_main {
  height: calc(100% - 44px);
  padding: 16px;
  overflow: hidden auto;
  position: sticky;
}

.list_panel {
  display: flex;
  flex-wrap: wrap;
  display: flex;
  align-items: center;

  .list_item {
    width: 33.33%;
    line-height: 32px;
    font-size: 14px;
    color: var(--el-text-color-regular);
    display: flex;
    justify-content: space-between;
    min-width: 120px;

    .item_label {
      text-align: left;
    }

    .item_value {
      color: var(--el-color-regular);
      padding: 0 4px;
      flex: 1;
      text-align: justify;
      min-width: 0;

      &.link {
        color: var(--el-color-primary);
        cursor: pointer;
      }
    }

    &.is_block {
      width: 100%;

      .item_value {
        white-space: pre-wrap;
      }
    }
  }
}

.tool_btns {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border-top: 1px solid #d9d9d9;
}

:deep(.el-tabs) {
  margin-top: -8px;

  .el-tabs__header {
    margin-bottom: 8px;
  }

  .el-tabs__item {
    height: 32px;

    &:nth-child(2) {
      padding-left: 16px;
    }

  }
}
</style>