<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.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>
    <Dialog :dialogInfo="passDialogInfo" @btnClick="passDialogBtnClick" />
    <Dialog :dialogInfo="rejectDialogInfo" @btnClick="rejectDialogBtnClick" />
  </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";
import { ElMessage, ElMessageBox } from "element-plus";
import useDataProductSpaceStore from "@/store/modules/productSpace";
import { passFlowData, rejectFlowData, revokeFlowData } from "@/api/modules/workFlowService";

const productSpaceStore = useDataProductSpaceStore();
const { proxy } = getCurrentInstance() as any;
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
const fullPath = route.fullPath;
const userData = JSON.parse(localStorage.userData)

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 approvalProcessRef = ref();
/** 调用更新详情状态，关闭之后，需要重新刷新列表 */
const updateDetailStatus = ref(false);

const passDialogInfo = ref({
  visible: false,
  size: 460,
  direction: "column",
  header: {
    title: "通过",
  },
  type: '',
  contents: [
    {
      type: 'form',
      title: '',
      formInfo: {
        id: 'batch-pass-form',
        items: [
          {
            label: '',
            type: "textarea",
            placeholder: "请填写通过理由（非必填）",
            field: "approveSuggest",
            clearable: true,
            block: true,
            col: 'margin_b_0',
          }
        ]
      }
    }
  ],
  footer: {
    btns: [
      { type: "default", label: "取消", value: "cancel" },
      { type: "primary", label: "确定", value: "submit", loading: false },
    ],
  },
});

const passDialogBtnClick = (btn, info) => {
  if (btn.value == 'submit') {
    passDialogInfo.value.footer.btns[1].loading = true;
    let params = {
      guid: detailInfo.value.approveVO.approveGuid,
      flowType: detailInfo.value.approveVO.flowType,
      approveSuggest: info.approveSuggest,
      approveStaffGuid: userData.staffGuid,
    }
    passFlowData(params).then((res: any) => {
      passDialogInfo.value.footer.btns[1].loading = false;
      if (res?.code == proxy.$passCode) {
        if (res.data) {
          passDialogInfo.value.visible = false;
          getDetail();
          updateDetailStatus.value = true;
          productSpaceStore.setIsRefresh(true);
          approvalProcessRef.value?.renderProcessNodes();
        } else {
          proxy.$ElMessage.error('审批失败');
        }
      } else {
        proxy.$ElMessage.error(res.msg);
      }
    }).catch(() => {
      passDialogInfo.value.footer.btns[1].loading = false;
    });
  } else if (btn.value == 'cancel') {
    passDialogInfo.value.visible = false;
  }
};

const rejectDialogInfo = ref({
  visible: false,
  size: 460,
  direction: "column",
  header: {
    title: "驳回",
  },
  type: '',
  contents: [
    {
      type: 'form',
      title: '',
      formInfo: {
        id: 'batch-reject-form',
        items: [
          {
            label: '',
            type: "textarea",
            placeholder: "请填写驳回理由（必填）",
            field: "approveSuggest",
            clearable: true,
            block: true,
            col: 'margin_b_0',
          }
        ],
      }
    }
  ],
  footer: {
    btns: [
      { type: "default", label: "取消", value: "cancel" },
      { type: "primary", label: "确定", value: "submit", loading: false },
    ],
  },
});

const rejectDialogBtnClick = (btn, info) => {
  if (btn.value == 'submit') {
    if (info.approveSuggest == '') {
      proxy.$ElMessage.error('请填写驳回理由');
      return
    }
    rejectDialogInfo.value.footer.btns[1].loading = true;
    let params = {
      guid: detailInfo.value.approveVO.approveGuid,
      flowType: detailInfo.value.approveVO.flowType,
      approveSuggest: info.approveSuggest,
      approveStaffGuid: userData.staffGuid,
    }
    rejectFlowData(params).then((res: any) => {
      rejectDialogInfo.value.footer.btns[1].loading = false;
      if (res?.code == proxy.$passCode) {
        if (res.data) {
          proxy.$ElMessage.success('驳回成功');
          rejectDialogInfo.value.visible = false;
          getDetail();
          updateDetailStatus.value = true;
          approvalProcessRef.value?.renderProcessNodes();
        } else {
          proxy.$ElMessage.error('驳回失败');
        }
      } else {
        proxy.$ElMessage.error(res.msg);
      }
    }).catch(() => {
      rejectDialogInfo.value.footer.btns[1].loading = false;
    });
  } else if (btn.value == 'cancel') {
    rejectDialogInfo.value.visible = false;
  }
};

const toolBtns: any = computed(() => {
  let btnsArr: any = [{
    label: "关闭", value: "cancel", plain: true
  }];
  let approveVO = detailInfo.value.approveVO;
  let staffGuid = userData.staffGuid;
  if (approveVO && approveVO.approveState == 'A' && approveVO.approveStaffGuids && approveVO.approveStaffGuids.indexOf(staffGuid) > -1) {
    btnsArr.push(...[{ label: "通过", value: "pass", type: 'primary' }, { label: "驳回", value: "reject", type: 'danger', plain: true }]);
  }
  if (approveVO && approveVO.approveState == 'A' && approveVO.staffGuid == staffGuid && !detailInfo.value.nodeId) {
    btnsArr.push({ label: "撤销", value: "revoke" });
  }
  return btnsArr;
});

const btnClick = (btn: any) => {
  const type = btn.value;
  if (type === 'pass') {
    passDialogInfo.value.visible = true;
  } else if (type == 'reject') {
    rejectDialogInfo.value.visible = true;
  } else if (type == 'cancel') {
    cancel();
    updateDetailStatus.value && productSpaceStore.setIsRefresh(true);
  } else if (type == 'revoke') {
    ElMessageBox.confirm('确定撤销该连接器审批流程吗？', "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: 'warning',
    }).then(() => {
      let params = {
        guid: detailInfo.value.approveVO.approveGuid,
        flowType: detailInfo.value.approveVO.flowType,
        approveStaffGuid: userData.staffGuid,
      }
      revokeFlowData(params, detailInfo.value.tenantGuid).then((res: any) => {
        if (res?.code == proxy.$passCode) {
          if (res.data) {
            ElMessage.success('该审批流程撤销成功！');
            getDetail();
            updateDetailStatus.value = true;
            productSpaceStore.setIsRefresh(true);
            approvalProcessRef.value?.renderProcessNodes();
          } else {
            ElMessage.error('该审批流程撤销失败！');
          }
        } else {
          ElMessage.error(res.msg);
        }
      }).catch(() => {
      });
    }).catch(() => {
      ElMessage.info('已取消撤销');
    });
  }
}

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

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

onBeforeMount(() => {
  getDetail();
})

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;
    }

  }
}
</style>