<!--
  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: ['未读', '已读'],
    icon0: '开始',
    icon1: '开始',
    active: 1,
  },
  {
    name: '分公司调度中心',
    procrssNames: ['待现场确认'],
    icon0: '人员-0',
    icon1: '人员-1',
    active: 2,
  },
  {
    name: '确认人员',
    procrssNames: ['已确认'],
    icon0: '人员-0',
    icon1: '人员-1',
    active: 3,
  },
  {
    name: '处置人员',
    procrssNames: ['待处置'],
    icon0: '人员-0',
    icon1: '人员-1',
    active: 4,
  },
  {
    name: '设备正常',
    procrssNames: ['已处置'],
    icon0: '设备-0',
    icon1: '设备-1',
    active: 5,
  },
  {
    name: '结束',
    procrssNames: ['已处置'],
    icon0: '结束',
    icon1: '结束',
    active: 6,
  },
]
const processData = ref<any[]>([])
const active = ref(1)
// 初始化对话框
const loading = ref(true)
const initDialog = (row: any) => {
  dialogFormVisible.value = true
  loading.value = true
  processData.value = JSON.parse(JSON.stringify(initData))
  console.log(processData.value, 'processData.value')
  alarmProcessNode(row.id).then((res) => {
    if (res.data.length) {
      const last = res.data[res.data.length - 1]
      // 挂起流程
      if (last.process_name === '挂起') {
        //  挂起
        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')
        data.forEach((item: any, index: number) => {
          const cindex = processData.value.findIndex((citem: any) => citem.procrssNames.includes(item.process_name))
          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.findIndex((citem: any) => citem.procrssNames.includes(last.process_name)) + 1
        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">
        <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>
.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>