<!--
 * @Author: tengmingxue 1473375109@qq.com
 * @Date: 2023-08-30 17:25:03
 * @LastEditors: tengmingxue 1473375109@qq.com
 * @LastEditTime: 2023-08-31 16:00:09
 * @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]};`">{{
                    user.handler
                  }}</span>
                </template>
              </div>
            </template>
          </a-step>
        </template>
      </a-steps>
    </div>
    <div class="log-table">
      <handle-log></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 HandleLog from './handleLog.vue'
const props = {
  flowTitle: { type: String, require: true },
  flowCode: { type: String, default: '' },
};
export default defineComponent({
  components: { BasicTable, Authority, Popconfirm, TableAction,HandleLog },
  props,
  setup(props, { emit }) {
    const data = reactive({
      flowTitle: ref(props.flowTitle),
      flowCode: ref(props.flowCode),
      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: '2',
          stepName: '审核1',
          handlers: [
            { handler: '张三', id: '1', status: '1' },
            { handler: '李斯', id: '2', status: '1' },
          ],
          status: '1',
        },
        {
          xh: '3',
          stepName: '审核2',
          handlers: [
            { handler: '张三', id: '1', status: '1' },
            { handler: '李斯', id: '2', status: '2' },
          ],
          status: '2',
        },
        {
          xh: '4',
          stepName: '审核3',
          handlers: [{ handler: '张三', id: '1', status: '3' }],
          status: '3',
        },
        {
          xh: '5',
          stepName: '审核4',
          handlers: [
            { handler: '张三', id: '1', status: '0' },
            { handler: '李斯', id: '2', status: '0' },
          ],
          status: '0',
        },
        { xh: '6', stepName: '完成', handlers: [], status: '0' },
      ],
    });

    // 生命周期函数
    onMounted(() => {});

    return {
      ...toRefs(data),
    };
  },
});
</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: 44px;
                  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>
  