<script setup lang="tsx">
import LookBpmn from "./components/LookBpmn.vue";
import useProcessStore from '@/store/modules/process'
import { cloneDeep } from 'lodash-es';
import { getProcessNodesPromise } from "@/api/modules/workFlowService"
const processStore = useProcessStore()
const props = defineProps({
  deploymentId: {
    type: String,
    default: ''
  },
  processInstanceId: {
    type: String,
    default: ''
  },
});
const tableData = ref<any>([])
const lookBpmnRef = ref()
// const contentRef = ref();
// const { height: contentHeight } = useElementSize(contentRef);
const renderProcessNodes = () => {
  let param = {
    deploymentId: props.deploymentId || null,
    processInstanceId: props.processInstanceId || null,
  };
  getProcessNodesPromise(param).then((res:any) => {
    if (res.code === "00000") {
      let data = res.data;
      if (data) {
        data.forEach((i, index) => {
          i.id = i.activityId;
          i.staffName = "";
          if (i.staffVOS && i.staffVOS.length > 1) {
            i.staffVOS.forEach((j) => {
              j.id = j.staffGuid;
              j.processName = i.processName;
              if (j.approvalState) {
                i.approvalState = j.approvalState;
                i.approvalSuggest = j.approvalSuggest;
                i.approvalTime = j.approvalTime;
                i.staffName = j.staffName;
              }
            });

            i.children = i.staffVOS;
          } else {
            if (i.staffVOS) {
              i.approvalState = i.staffVOS[i.staffVOS.length - 1].approvalState;
              i.approvalSuggest =
                i.staffVOS[i.staffVOS.length - 1].approvalSuggest;
              i.approvalTime = i.staffVOS[i.staffVOS.length - 1].approvalTime;
              i.staffName = i.staffVOS[i.staffVOS.length - 1].staffName;
            } else {
              if (i.organisationVOS) {
                i.approvalState = "";
                i.approvalSuggest = "";
                i.approvalTime = "";
                if (i.organisationVOS.length > 1) {
                  i.staffName =
                    i.organisationVOS[0].organisationName +
                    "等" +
                    i.organisationVOS.length +
                    "个部门";
                } else {
                  i.staffName = i.organisationVOS[0].organisationName;
                }
              } else if (i.positionVOS != null && i.positionVOS.length > 0) {
                i.approvalState = "";
                i.approvalSuggest = "";
                i.approvalTime = "";
                if (i.positionVOS.length > 1) {
                  if (i.staffName) {
                    i.staffName =
                      i.staffName +
                      "," +
                      i.positionVOS[0].positionName +
                      "等" +
                      i.positionVOS.length +
                      "个岗位";
                  } else {
                    i.staffName = i.positionVOS[0].positionName;
                  }
                } else {
                  if (i.staffName) {
                    i.staffName =
                      i.staffName + "," + i.positionVOS[0].positionName;
                  } else {
                    i.staffName = i.positionVOS[0].positionName;
                  }
                }
              } else if (i.candidateUsers != null && i.candidateUsers != "") {
                i.approvalState = "";
                i.approvalSuggest = "";
                i.approvalTime = "";
                if (i.candidateUsers.length > 1) {
                  i.staffName =
                    i.candidateUsers[0].staffName +
                    "等" +
                    i.candidateUsers.length +
                    "个人员";
                  if (i.candidateUsers) {
                    i.candidateUsers.forEach((j) => {
                      j.id = j.staffGuid;
                      j.processName = i.processName;
                    });
                  }
                  i.children = i.candidateUsers;
                } else {
                  i.staffName = i.candidateUsers[0].staffName;
                }
              }
            }
          }
        });
      }
      tableData.value = data
      processStore.processNodes = cloneDeep(tableData.value)
      localStorage.setItem('processTableData',JSON.stringify(tableData.value));
      nextTick(()=>{
        setTimeout(()=>{
          getSpecialEventUserTaskList()
        })
      })
    }
  });
};
const getApprovalState = (val: string) => {
  if (!val) {
    return "-";
  } else {
    if (val == "W") {
      return (val = "待提交");
    } else if (val == "N") {
      return (val = "初始");
    } else if (val == "A") {
      return (val = "审批中");
    } else if (val == "Y") {
      return (val = "已通过");
    } else if (val == "F") {
      return (val = "已完成");
    } else if (val == "R") {
      return (val = "已驳回");
    } else if (val == "C") {
      return (val = "已撤销");
    } else {
      return (val = "");
    }
  }
}
const getSpecialEventUserTaskList = () => {
  lookBpmnRef.value.getDetailData(props.deploymentId)
};

onBeforeRouteLeave((to, from) =>{
  processStore.clearStore()
})
onMounted(() => {
  renderProcessNodes()
});
defineExpose({
  renderProcessNodes
})
</script>

<template>
  <div>
    <!-- <Table :columns="columns" :data="tableData" :border="false"></Table> -->
    <el-table tooltip-effect="light" :data="tableData" :border="false" >
        <el-table-column type="index" label="节点" :width="140" align="left" >
            <template #default="scope">
                {{  scope.row.processName ||'-' }}
            </template>
        </el-table-column>
        <el-table-column type="index" label="处理对象" :width="140" align="left"  show-overflow-tooltip>
            <template #default="scope">
              {{  scope.row.staffName ||'-' }}
            </template>
        </el-table-column>
        <el-table-column type="index" label="操作时间" :width="180" align="left" show-overflow-tooltip >
            <template #default="scope">
                {{  scope.row.approvalTime||'-'}}
            </template>
        </el-table-column>

          <!-- <el-table-column type="index" label="申请人" :width="100" align="left" >
              <template #default="scope">
                  {{  scope.row.applyName||'-'}}
              </template>
          </el-table-column>

          <el-table-column label="申请时间" :width="180" align="left" >
              <template #default="scope">
                  {{  scope.row.time||'-'}}
              </template>
          </el-table-column> -->
          <el-table-column label="审批状态" :width="140" align="left" show-overflow-tooltip>
              <template #default="scope">
                <div v-if="scope.row.approvalState === 'A'" class='state-sty'>{{ getApprovalState(scope.row.approvalState) }}</div>
                <div v-else-if="scope.row.approvalState === 'Y'" class='state-sty1'>{{getApprovalState(scope.row.approvalState) }}</div>
                <div v-else-if="scope.row.approvalState === 'R'" class='state-sty2'>{{ getApprovalState(scope.row.approvalState) }}</div>
                <div v-else>{{getApprovalState(scope.row.approvalState)}}</div>
              </template>
          </el-table-column>

          <el-table-column label="审批原因" align="left" >
              <template #default="scope">
                  {{  scope.row.approvalSuggest||'-'}}
              </template>
          </el-table-column>
    </el-table>
    <div class="bpmn-sty pt-20px" style="margin-top: 20px">
      <span style="font-size:16px;color:#666">{{ '审批流程' }}</span>
      <el-divider style="margin-bottom:10px!important;margin-top:10px!important" />
      <LookBpmn ref="lookBpmnRef"></LookBpmn>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.iframe-sty {
  width: 100%;
  border: none;
  // height: 600px;
}
:deep(.el-table) {
  .state-sty {
    width: 52px;
    height: 21px;
    text-align: center;
    line-height: 21px;
    background: #FFEEE3;
    border-radius: 3px;
    color: #FF8623;
  }
  .state-sty1 {
    width: 52px;
    height: 21px;
    text-align: center;
    line-height: 21px;
    background: #E3F0F0;
    border-radius: 3px;
    color: #4FA1A4;
  }
  .state-sty2 {
    width: 52px;
    height: 21px;
    text-align: center;
    line-height: 21px;
    background: #FFE4E2;
    border-radius: 3px;
    color: #FE4638;
  }
  .state-sty3 {
    width: 52px;
    height: 21px;
    text-align: center;
    line-height: 21px;
    background: #E3E3E3;
    border-radius: 3px;
    color: #323233;
  }
}
</style>