<template>
  <div class="container_wrap full" v-loading="fullscreenLoading">
    <div class="content_main">
      <div v-if="detailInfo.bizApproveState"
        :class="['panel_wrap', 'mb16', 'results_panel', detailInfo.bizApproveState == 'Y' ? 'success' : ((detailInfo.bizApproveState == 'R' || detailInfo.bizApproveState == 'E') ? 'reject' : (detailInfo.bizApproveState == 'C' ? 'revoke' : 'audit'))]">
        <div class="panel_header">
          <div class="header_title" v-if="detailInfo.bizApproveState == 'Y'">
            <el-icon class="title-icon">
              <svg-icon name="icon-success" />
            </el-icon>
            <span class="title_text">审批通过</span>
          </div>
          <div class="header_title" v-else-if="detailInfo.bizApproveState == 'R'">
            <el-icon class="title-icon">
              <CircleCloseFilled />
            </el-icon>
            <span class="title_text">审批被驳回</span>
          </div>
          <div class="header_title" v-else-if="detailInfo.bizApproveState == 'E'">
            <el-icon class="title-icon">
              <CircleCloseFilled />
            </el-icon>
            <span class="title_text">审批发起失败</span>
          </div>
          <div class="header_title" v-else-if="detailInfo.bizApproveState == 'A'">
            <el-icon class="title-icon">
              <svg-icon name="icon-audit" />
            </el-icon>
            <span class="title_text">审批中</span>
          </div>
          <div class="header_title" v-else-if="detailInfo.bizApproveState == 'C'">
            <el-icon class="title-icon">
              <svg-icon name="icon-revoke" />
            </el-icon>
            <span class="title_text">已撤销</span>
          </div>
        </div>
        <div class="panel_body" v-if="detailInfo.bizApproveState == 'R'" style="padding: 0px 16px 10px;">
          <div class="results_list">
            <div class="list_item">
              <span class="item_label">平台审批意见:</span>
              <span class="item_value">{{ detailInfo?.tdsApproveSuggest || '--' }}</span>
            </div>
          </div>
        </div>
        <div class="panel_body" v-if="detailInfo.bizApproveState == 'E'" style="padding: 0px 16px 10px;">
          <div class="results_list">
            <div class="list_item">
              <span class="item_label">失败原因:</span>
              <span class="item_value">{{ detailInfo?.tdsApproveErrorMsg || '--' }}</span>
            </div>
          </div>
        </div>
      </div>
      <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.isActivate == 'Y' ? '是' : '否' }}</span>
          </div>
          <div class="list_item is_block">
            <span class="item_label">逻辑空间描述：</span>
            <span class="item_value">{{ detailInfo.spaceDescription || '--' }}</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";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { getLogicSpaceDetail } from "@/api/modules/dataAsset";


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: 'productSpaceManage'
  });
}

onBeforeMount(() => {
  fullscreenLoading.value = true;
  getLogicSpaceDetail({ guid: route.query.guid }).then((res: any) => {
    fullscreenLoading.value = false;
    if (res?.code == proxy.$passCode) {
      detailInfo.value = res.data || {};
      memberTableInfo.value.data = detailInfo.value.permissionRSVOS || [];
    } else {
      res?.msg && proxy.$ElMessage.error(res.msg);
    }
  })
})

const memberTableInfo = ref({
  id: "input-member-table",
  height: '214px',
  fields: [
    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
    { label: "成员名称", field: "memberName", width: 200 },
    { label: "角色类型", field: "characterType", width: 160, getName: (scope) => {
      return !scope.row.characterType ? '--' : (scope.row.characterType == '1' ? '数据使用方' : '数据提供方')
    } },
    { 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;
    }

  }
}

.panel_wrap {

  .panel_header {
    .header_title {
      height: 40px;
      padding: 0 16px;
      background-color: #fafafa;
      box-shadow: 0 0 0 1px #e5e5e5;
      display: flex;
      align-items: center;
    }

    .title_text {
      line-height: 22px;
      font-size: 14px;
      color: var(--el-color-regular);
      font-weight: 600;
      display: flex;
      align-items: center;

      .title_icon {
        width: 26px;
        height: 21px;
        margin-right: 4px;
        cursor: pointer;

        &.active {
          transform: rotate(90deg);
        }
      }
    }
  }

  &.results_panel {
    box-shadow: 0 0 0 1px #d9d9d9;

    .panel_header {
      .header_title {
        background-color: transparent;
        box-shadow: none;

        .el-icon {
          margin-right: 8px;
          width: 20px;
          height: 20px;

          svg {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .panel_body {
      padding-top: 0;
      margin-top: 0;
      box-shadow: none;

      .results_list {
        display: flex;

        .list_item {
          display: flex;
          margin-bottom: 8px;
          margin-right: 60px;
          color: #666;

          .item_value {
            padding: 0 8px;
            color: var(--el-color-regular);
          }
        }
      }
    }

    &.success {
      background-color: #F4FEF6;
      box-shadow: 0 0 0 1px #4FA55D;

      .panel_header {
        .header_title {
          .el-icon {
            color: #4FA55D;
          }
        }
      }
    }

    &.reject {
      background-color: #FDF2F4;
      box-shadow: 0 0 0 1px #E63E33;

      .panel_header {
        .header_title {
          .el-icon {
            color: #E63E33;
          }
        }
      }
    }

    &.audit {
      background-color: #FEFBF3;
      box-shadow: 0 0 0 1px #F19E40;

      .panel_header {
        .header_title {
          .el-icon {
            color: #F19E40;
          }
        }
      }
    }

    &.revoke {
      background-color: #F5F5F5;
      box-shadow: 0 0 0 1px #CCCCCC;

      .panel_header {
        .header_title {
          .el-icon {
            color: #666666;
          }
        }
      }
    }
  }
}
</style>