<!--
 * @Author: tengmingxue 1473375109@qq.com
 * @Date: 2023-08-30 17:25:03
 * @LastEditors: tengmingxue 1473375109@qq.com
 * @LastEditTime: 2023-09-25 16:25:12
 * @FilePath: \xld-gis-admin\src\views\dataAdmin\dataAdmin\flowStep\index.vue
 * @Description: 流程图表
-->
<template>
  <div class="flow-chart">
    <div class="flow-title">{{ flowTitle }}流程信息</div>
    <div class="flow-code">
      <span>流程编号：</span>
      <span>{{ flowCode }}</span>
    </div>
    <div class="legend">
      <template v-for="legend in legends" :key="legend.key">
        <div class="item-list">
          <span class="item-span-legend" :style="`background-color:${legend.color};`"></span>
          <span class="item-span">{{ legend.name }}</span>
        </div>
      </template>
    </div>
    <div class="flow">
      <a-steps>
        <template v-for="(step, index) in steps" :key="step.xh">
          <!-- status 1:已完成，2：进行中，3：驳回，0：未开始 -->
          <a-step :status="status[step.status]">
            <template #title>
              <div class="step-title">{{ step.stepName }}</div>
            </template>
            <template #icon>
              <div class="cicle-out">
                <div class="cicle" :style="`border: 2px solid ${colors[step.status]};color:${colors[step.status]};`">{{
                  index + 1 }}</div>
              </div>
            </template>
            <template #description>
              <!-- <div class="desc-step-name">{{ step.stepName }}</div> -->
              <div class="desc-handler">
                <template v-for="user in step.handlers" :key="user.id">
                  <span class="handler-name" :style="`background-color:${colors[user.status]};`" :title="user.handler">{{
                    user.handler
                  }}</span>
                </template>
              </div>
            </template>
          </a-step>
        </template>
      </a-steps>
    </div>
    <div class="log-table">
      <handle-log :flowStatus="flowStatus" :pageData="pageData"></handle-log>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref, watch, reactive, onMounted, nextTick, toRefs } from 'vue';
// 引入封装的table
import { BasicTable, TableAction, useTable } from '/@/components/Table';
// 引入封装的权限识别
import { Authority } from '/@/components/Authority';
// 引入搜索框和表格表头
import { columns, searchFormSchema } from './flowData';
// 引入删除
import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
import { message, Popconfirm } from 'ant-design-vue';
import { useMessage } from '/@/hooks/web/useMessage';
import HandleLog from './handleLog.vue';
import { session } from '/@/utils/Memory.js';
import { getFlowConfigByBusinessName, selectFlowRecord } from '/@/api/resource/examine';
import { getAccountList } from '/@/api/system/system';

export default defineComponent({
  components: { BasicTable, Authority, Popconfirm, TableAction, HandleLog },
  props: {
    flowTitle: { type: String, require: true },
    flowCode: { type: String, default: '' },
    formData: { type: Object, default: ref(null) },
    flowStatus: { type: String, default: '1' }, //流程状态 1，新增  2 审核
  },
  setup(props, { emit }) {
    const data = reactive({
      flowTitle: ref(props.flowTitle),
      flowCode: ref(props.flowCode),
      flowName: props.flowTitle,
      flowStatus: props.flowStatus, //流程状态 1，新增  2 审核
      sysUserInfo: {},
      legends: [
        { key: 1, name: '已完成', color: '#67C23A' },
        { key: 2, name: '进行中', color: '#2D74E7' },
        // { key: 3, name: '驳回', color: '#E6A23C' },
        { key: 4, name: '未开始', color: '#989898' },
      ],
      colors: ['#989898', '#67C23A', '#2D74E7', '#E6A23C'],
      status: ['wait', 'finish', 'process', 'back'],
      steps: [
        //status 1:已完成，2：进行中，3：驳回，0：未开始
        // {
        //   xh: 1,
        //   stepName: '地图资源上传',
        //   handlers: [{ handler: '张三', id: '1', status: '1' }],
        //   status: '1',
        // },
        // { xh: 6, stepName: '完成', handlers: [], status: '0' },
      ],
    });
    const { createMessage } = useMessage();
    /**
     * 获取系统人员信息，并存为字典
     */
    const queryAllUserInfos = async () => {
      const res = await getAccountList({ page: 1, pageSize: 999 });
      if (res) {
        res.items.map((item) => {
          data.sysUserInfo[item['EMPLOYEE_ID']] = item['NAME'];
        });
      }
      console.log('人员信息', data.sysUserInfo)
    };
    const queryData = async () => {
      const res = await getFlowConfigByBusinessName(data.flowName);
      console.log('地图资源上传配置信息', res);
      if (res) {
        setFlowNodes(res);
      } else {
        createMessage.error(`获取流程【${data.flowName}】配置信息异常！请联系管理员检查！`);
      }
    };

    const setFlowNodes = async (flow) => {
      if (!flow?.flowInfo || !flow?.flowNode || !flow?.flowNodePerson) {
        createMessage.error(`获取流程【${data.flowName}】配置信息异常！请联系管理员检查！`);
        return;
      }
      if (flow?.flowNode.length === 0) {
        createMessage.error(`流程【${data.flowName}】未配置审核步骤！请联系管理员配置！`);
        return;
      }
      const user = session.getItem('userInfo');
      data.steps = [
        {
          xh: 0,
          stepName: flow.flowInfo['FLOWNAME'],
          handlers: [
            { handler: user['EMPLOYEE']['NAME'], id: user['EMPLOYEE']['EMPLOYEE_ID'], status: '1' },
          ],
          status: '1', //status 1:已完成，2：进行中，3：驳回，0：未开始
        },
      ];
      const step = getFlowNodes(flow.flowNode, flow.flowNodePerson);
      console.log('步骤', step)
      if (step) data.steps.push(...step)
      const length = step.length
      //最后一步默认完成
      data.steps.push({ xh: length + 2, stepName: '完成', handlers: [], status: '0' })
      getSelectFlowRecord();
    };

    const getFlowNodes = (flowNode, flowNodePerson) => {
      let index = 1;
      let steps = [];
      function getNextNode(nodes, id) {
        const node = flowNode.find((item) => item['PRENODEID'] === id);
        if (node) {
          const eximPersons = flowNodePerson.filter((item) => item['FLOWNODEID'] === node['ID']);
          let handlers = [];
          eximPersons.map((item) => {
            handlers.push({
              handler: data.sysUserInfo[item['USERID']],
              id: item['USERID'],
              status: '0',
            });
          });
          steps.push({
            xh: (index = index + 1),
            stepName: node['NODENAME'],
            handlers: handlers,
            status: '0',
          });
          getNextNode(nodes, node['ID']);   //递归
        }
        else return false;
      }
      getNextNode(flowNode, '')
      return steps
    };

    var itemDate = null;
    const pageData = ref([]);
    function getSelectFlowRecord() {
      if (itemDate?.bussid) {
        selectFlowRecord(itemDate.bussid).then((res) => {
          var obj = [];
          var len = data.steps.length;
          var num = 0;
          var allType = true;
          if (res.resp_code == 0 && res?.datas?.pageData?.length) {
            pageData.value = res.datas.pageData.map((i, index) => {
              if (i.ISPASS != null && i.ISPASS != undefined) {
                if (!i.NODEDISCRIPTION) {
                  i.NODEDISCRIPTION = i.CHECKINFO == '起件' ? i.BUSSNAME : i.CHECKINFO == '归档' ? '审核结束' : i.NODEDISCRIPTION;
                }
                if (!index) {
                  i.CHECKINFO = '';
                  data.steps[index].handlers.map(j => j.handler = i.CHECKUSERNAEM);
                }
                var type = i.ISPASS == '1' ? '1' : i.ISPASS == '0' ? '1' : '0';
                if (i.CHECKINFO != '归档') {
                  data.steps[index].status = type;
                  data.steps[index].handlers.map(j => { j.status = type, i.handler = j.handler });
                } else if (i.CHECKINFO == '归档' && i.ISPASS == '1') {
                  data.steps[index].status = type;
                  data.steps[index].handlers.map(j => { j.status = type, i.handler = j.handler });
                }
                if (i.CHECKINFO != '归档') obj.unshift(i);
                if (i.ISPASS == '0') {
                  allType = false;
                }
                num++
              }
            })
            if (num < len && allType) {
              data.steps[num].status = '2';
              data.steps[num].handlers.map(j => { j.status = '2' });
            }
          }
          pageData.value = obj;
        })
      }
    }

    watch(
      () => props.formData,
      (obj) => {
        itemDate = obj;
        if (obj) {
          queryAllUserInfos();
          queryData();
        }
      }
    );

    // 生命周期函数
    onMounted(() => {
      // queryAllUserInfos();
      // queryData();
      // itemDate = props.formData;
    });

    return {
      pageData,
      ...toRefs(data),
      createMessage,
      queryData,
      setFlowNodes,
      getFlowNodes,
    };
  },
});
</script>
  
<style lang="scss" scoped>
.flow-chart {
  height: 100%;

  .flow-title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-family: Source Han Sans CN;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0px;
    color: #2d74e7;
  }

  .flow-code {
    height: 20px;
    text-align: center;
    font-family: Source Han Sans CN;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 20px;
  }

  .legend {
    position: absolute;
    right: 0;
    top: 53px;
    height: 100px;
    width: 72px;

    .item-list {
      margin: 4px 0;
      display: flex;
      align-items: center;

      .item-span-legend {
        display: flex;
        height: 10px;
        width: 10px;
        margin-right: 10px;
      }

      .item-span {
        font-family: Source Han Sans CN;
        font-size: 12px;
        font-weight: 300;
        line-height: normal;
        letter-spacing: 0px;
        color: #333333;
      }
    }
  }

  .flow {
    height: 140px;
    width: 100%;
    padding: 0 20px;

    :deep(.ant-steps) {
      height: 100%;

      .ant-steps-item {
        margin-right: 0px !important;
        height: 100%;

        .ant-steps-item-container {
          margin-top: 20px;
          height: 100%;

          .ant-steps-item-content {
            position: absolute;
            height: 100%;
            width: 100%;
            margin-top: 20px;
            left: 16px;

            .ant-steps-item-title {
              .step-title {
                position: absolute;
                top: -33px;
                left: -16px;
              }
            }

            .ant-steps-item-description {
              margin-left: -16px;

              .desc-step-name {
                margin-top: 4px;
              }

              .desc-handler {
                margin-top: 38px;

                .handler-name {
                  display: flex;
                  float: left;
                  height: 36px;
                  line-height: 36px;
                  width: auto;
                  padding: 0 10px;
                  min-width: 40px;
                  margin-right: 3px;
                  justify-content: center;
                  color: #fff;
                  background-color: #2d74e7;
                  border-radius: 6px;
                }
              }
            }
          }

          .ant-steps-item-icon {
            margin-top: 20px;
            margin-right: 0px;

            .cicle-out {
              height: 40px;
              width: 40px;

              .cicle {
                height: 30px;
                width: 30px;
                line-height: 24px;
                border-radius: 50%;
              }
            }
          }
        }
      }
    }
  }

  .log-table {
    height: calc(100% - 374px);
  }
}
</style>
  