<!--
  Description: 报警管理-流程状态
  Author: 李亚光
  Date: 2024-09-10
 -->
<script lang="ts" setup name="MonitorDataDialog">
import { alarmProcessNode } from '@/api/home/alarm/current'
import { uniqueMultiArray } from '@/utils/Array'
const emits = defineEmits(['refresh'])
const dialogFormVisible = ref(false) // 对话框是否显示
const initData = [
  {
    name: '报警生成',
    procrssNames: ['未读', '已读'],
    processCode: ['1'],
    icon0: '开始',
    icon1: '开始',
    active: 1,
  },
  {
    name: '分公司调度中心',
    procrssNames: ['待现场确认'],
    processCode: ['2', '4'],
    icon0: '人员-0',
    icon1: '人员-1',
    active: 2,
  },
  {
    name: '确认人员',
    procrssNames: ['已确认'],
    processCode: ['5'],
    icon0: '人员-0',
    icon1: '人员-1',
    active: 3,
  },
  {
    name: '处置人员',
    procrssNames: ['待处置'],
    processCode: ['6', '7'],
    icon0: '人员-0',
    icon1: '人员-1',
    active: 4,
  },
  {
    name: '设备正常',
    procrssNames: ['已处置'],
    processCode: ['8'],
    icon0: '设备-0',
    icon1: '设备-1',
    active: 5,
  },
  {
    name: '结束',
    procrssNames: ['已处置'],
    processCode: ['9'],
    icon0: '结束',
    icon1: '结束',
    active: 6,
  },
]
const processData = ref<any[]>([])
const active = ref(1)
// 初始化对话框
const loading = ref(true)
const initDialog = (row: any) => {
  console.log(row, 'row')
  dialogFormVisible.value = true
  loading.value = true
  processData.value = JSON.parse(JSON.stringify(initData))
  alarmProcessNode(row.id).then((res) => {
    if (res.data.length) {
      const last = res.data[res.data.length - 1]
      // 挂起流程
      if (last.FLOW_STATUS === '3') {
        //  挂起
        processData.value.splice(1, 0, {
          name: '挂起',
          procrssNames: ['挂起'],
          icon0: '挂起',
          icon1: '挂起',
          active: 2,
        })
        active.value = 2
        processData.value = processData.value.map((item, index) => ({ ...item, active: index + 1 }))
        // 处理content
        // 已读
        const already = res.data.filter((item: any) => item.process_name === '已读' || item.process_name === '未读')
        processData.value[0].content = `
        <span>时间: ${already[0].APPROVAL_TIME}</span></br>
        <span>人员: ${already[0].APPROVAL_PERSON}</span></br>
        <span>操作: ${already[0].process_name}</span></br>
        `
        // 挂起
        const pending = res.data.filter((item: any) => item.process_name === '挂起')
        processData.value[1].content = `
        <span>时间: ${pending[0].APPROVAL_TIME}</span></br>
        <span>人员: ${pending[0].APPROVAL_PERSON}</span></br>
        <span>操作: ${pending[0].process_name}</span></br>
        `
      }
      else {
        const data = uniqueMultiArray(res.data, 'process_name')
        // console.log(data, '2222222')
        data.forEach((item: any, index: number) => {
          // console.log(item, 'item')
          const cindex = processData.value.findIndex((citem: any) => citem.processCode?.includes(item.FLOW_STATUS))
          // console.log(cindex, '123')
          if (cindex !== -1) {
            processData.value[cindex].content = `
        <span>时间: ${data[index].APPROVAL_TIME}</span></br>
        <span>人员: ${data[index].APPROVAL_PERSON}</span></br>
        <span>操作: ${data[index].process_name}</span></br>
        `
          }
        })
        console.log(processData.value, 'processData.value')
        processData.value[0].content = `
        <span>时间: ${row.alarmTime}</span></br>
        <span>操作: 报警生成</span></br>
        `
        if (data.length < 4 && Number(data[data.length - 1].FLOW_STATUS) >= 7) {
          processData.value = processData.value.filter((item: any) => item.name !== '处置人员')
          const cindex = processData.value.findIndex((item: any) => item.name === '确认人员')
          if (!processData.value[cindex].content) {
            const index = data.findIndex((item: any) => item.FLOW_STATUS === '7')
            processData.value[cindex].content = `
                    <span>时间: ${data[index].APPROVAL_TIME}</span></br>
        <span>人员: ${data[index].APPROVAL_PERSON}</span></br>
        <span>操作: ${data[index].process_name}</span></br>
        `
          }
        }
        active.value = processData.value.findLastIndex((citem: any) => citem.content) + 1
        // console.log(active.value, 'active.value')
        // const lastName = last.process_name
        // if (lastName === '已处置' && last.DESCN === '已修复') {
        //   active.value = 6
        //   processData.value[processData.value.length - 1].content = processData.value[processData.value.length - 2].content
        // }
      }
    }
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}
defineExpose({
  initDialog,
})

const cancel = () => {
  dialogFormVisible.value = false
}
// 点击节点
const processDetail = (row: any) => {
  // if (row.active <= active.value) {
  // }
}
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="流程图" append-to-body>
    <div v-loading="loading" class="process-container">
      <el-steps style="width: 100%;" :active="active" align-center>
        <el-step v-for="item in processData" :key="item.name" @click="processDetail(item)">
          <template #icon>
            <el-tooltip
              :disabled="!(item.active <= active)" :content="item.content || ''" raw-content placement="top"
              effect="light"
            >
              <el-icon class="title-icon">
                <svg-icon :name="item.active <= active ? item.icon1 : item.icon0" />
              </el-icon>
            </el-tooltip>
          </template>
          <template #title>
            <div>
              {{ item.name }}
            </div>
          </template>
          <template #description>
            {{ item.description }}
          </template>
        </el-step>
      </el-steps>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="cancel">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
::v-deep(.el-step__line) {
  height: 1px !important;
}

::v-deep(.el-step__line-inner) {
  height: 1px !important;
}

::v-deep(.el-step__title) {
  padding-top: 15px;
  text-align: center;
  // margin-left: -10px;
}

.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}

.process-container {
  width: 100%;
  height: 250px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 0 20px;

  ::v-deep(.el-step__icon) {
    svg {
      width: 50px;
      height: 50px;
    }

    .title-icon {
      // height:30px;
      width: 50px;
      font-size: 24px;
      vertical-align: -0.25em;
      transition: transform 0.3s;
      color: unset;

      &:hover {
        cursor: pointer;
      }
    }

    .icon-device {
      font-size: 30px;
      width: 70px;

      svg {
        width: 50px;
        height: 50px;
      }
    }
  }
}
</style>