<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="800px">
      <div v-if="processConfig && processConfig.nodeList" style="margin-top: 30px" v-loading="loading">
        <div style="margin-bottom: 15px; font-weight: bold">审批进度</div>
        <el-timeline>
          <el-timeline-item
            v-for="node in processConfig.nodeList"
            :key="node.id"
            :timestamp="getNodeRecord(node) ? getNodeRecord(node).approveTime : ''"
            placement="top"
            :type="getNodeTagType(node)"
          >
            <p>
              <strong>{{ node.nodeName }}</strong>
              <span style="margin-left: 20px">{{ getNodeStatusLabel(node) }}</span>
            </p>
            <p v-if="getNodeRecord(node)"> 审批人：{{ getNodeRecord(node).approverName }} </p>
            <p v-if="getNodeRecord(node)"> 审批意见：{{ getNodeRecord(node).approveOpinion }} </p>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getApprovalInstanceByBusiness, getApprovalDetail, getProcessConfig } from '@/api/approval'
export default {
  name: 'ApproveDialog',
  data() {
    return {
      visible: false,
      title: '审批详情',
      loading: false,
      approvalInstance: {},
      processConfig: { nodeList: [] },
    }
  },
  methods: {
    // 获取节点标签类型
    getNodeTagType(node) {
      const record = this.getNodeRecord(node)
      if (record) {
        return record.approveResult === '1' ? 'success' : 'danger'
      }
      if (node.id === this.approvalInstance.currentNodeId) {
        return 'warning'
      }
      return 'info'
    },
    // 获取节点记录
    getNodeRecord(node) {
      if (!this.approvalInstance.recordList) {
        return null
      }
      return this.approvalInstance.recordList.find((record) => record.nodeId === node.id)
    },
    // 获取节点状态标签
    getNodeStatusLabel(node) {
      const record = this.getNodeRecord(node)
      if (record) {
        return record.approveResult === '1' ? '已通过' : '已驳回'
      }
      if (node.id === this.approvalInstance.currentNodeId) {
        return '审批中'
      }
      return '未开始'
    },
    async getInfo(id, type) {
      try {
        this.loading = true
        const businessId = id

        if (!businessId) {
          return
        }

        const instanceRes = await getApprovalInstanceByBusiness(type, businessId)

        if (!instanceRes || !instanceRes.data) {
          return
        }

        const instanceId = instanceRes.data.id
        const processId = instanceRes.data.processId

        if (!instanceId || !processId) {
          return
        }
        const approvalRes = await getApprovalDetail(instanceId)
        this.approvalInstance = approvalRes.data || {}
        if (!approvalRes.data) return
        const res = await getProcessConfig(processId)
        this.processConfig = res.data || { nodeList: [] }
      } catch (error) {
        console.log('🚀 ~ error:', error)
      } finally {
        this.loading = false
      }
    },
    openDialog(id, type) {
      this.getInfo(id, type)
      this.visible = true
    },
  },
}
</script>

<style lang="scss" scoped></style>
