<!-- 审批详情表格 -->
<script name="ApprovalRecordTable" lang="ts" setup>
import type { Ref } from 'vue'
import { onMounted, ref } from 'vue'
import dayjs from 'dayjs'
import { ElLoading, ElMessage } from 'element-plus'
import type { IList } from './approval-interface'
import { getDictByCode } from '@/api/system/dict'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import useUserStore from '@/store/modules/user'
import { fetchApprovalDevice } from '@/api/approval'
const props = defineProps({
  // processId: {
  //   type: String,
  //   require: true,
  // }, // 流程实例
  id: {
    type: String,
    require: true,
  }, // id
})
// 查询条件
const listQuery = ref({
  processId: '', // 流程实例id
  // offset: 1,
  // limit: 20,
})
const loadingTable = ref(false) // 表格loading
const user = useUserStore() // 用户信息
const total = ref(0) // 数据总条数
const list = ref<IList[]>([]) // 表格数据
const columns = ref<TableColumn[]>([ // 表头
  { text: '姓名', value: 'assigneeName', align: 'center', width: '120' },
  { text: '审批状态', value: 'approvalStatus', align: 'center', width: '120' },
  { text: '意见类别', value: 'type', align: 'center', width: '120' },
  { text: '审批意见', value: 'comment', align: 'center' },
  { text: '用时', value: 'duration', align: 'center' },
  { text: '审批时间', value: 'finishTime', align: 'center', width: '180' },
])

// -------------------------------------------字典------------------------------------------
const approvalLogTypeMap = ref({}) as any // 是否加急{1: 是}

// 获取字典值
async function getDict() {
  // 是否加急
  const res = await getDictByCode('approvalLogType')
  res.data.forEach((item: any) => {
    approvalLogTypeMap.value[`${item.value}`] = item.name
  })
}
getDict()
// -----------------------------------------方法--------------------------------------------------
// 数据查询
function fetchData(isNowPage = false) {
  if (!props.id) {
    loadingTable.value = false
    return
  }
  loadingTable.value = true
  // if (!isNowPage) {
  // 是否显示当前页，否则跳转第一页
  // listQuery.value.offset = 1
  // }
  fetchApprovalDevice({ equipmentId: props.id }).then((response) => {
    const data = response.data.filter((item: any) => item.approvalLogs)
    data.forEach((item: any, cindex: number) => {
      const approvalLogsList = [] as any[]
      item.approvalLogs.forEach((child: any, index: number) => {
        child.forEach((i: any, iindex: number) => {
        //   // 合并节点
          let nodeNumberMerge = ''
          if (i.approvalStatus === '发起人') {
            nodeNumberMerge = 0
          }
          else {
            if (child.length > 1) {
              if (iindex === 0) {
                nodeNumberMerge = approvalLogsList[approvalLogsList.length - 1].nodeNumber + 1
              }
              else {
                nodeNumberMerge = approvalLogsList[approvalLogsList.length - 1].nodeNumber
              }
            }
            else {
              nodeNumberMerge = approvalLogsList[approvalLogsList.length - 1].nodeNumber + 1
            }
          }
          approvalLogsList.push({
            // approvalLogsList[iindex]
            nodeNumber: nodeNumberMerge,
            assigneeName: i.assigneeName, // 姓名
            approvalStatus: i.approvalStatus, // 审批类型
            finishTime: i.finishTime ? i.finishTime : '-', // 完成时间
            duration: i.approvalStatus === '发起人' || !i.duration ? '-' : i.duration, // 用时
            comment: i.comment.comment ? i.comment.comment : '-', // 审批意见
            type: i.comment.type ? approvalLogTypeMap.value[i.comment.type] : '-', // 意见类别
            cindex,
            // countersignOrSign: i.countersignOrSign,
          })
        })
      })
      item.approvalLogsList = approvalLogsList
    })
    // response.data.forEach((item: Array<IList>, index: number) => {
    //   console.log(item, item.length, item[0].countersignOrSign === 2)

    //   if (item.length > 1 && item[0].countersignOrSign === 2) { // 或签
    //     console.log('或签数据处理', item)

    //     let name = ''// 姓名
    //     let approvalStatus = ''// 审批类型
    //     let finishTime = ''// 审批类型
    //     let duration = ''// 用时
    //     let comment = ''// 审批意见
    //     let type = '-'// 审批意见
    //     item.forEach((i: any, index) => {
    //       name = name + (index > 0 ? `， ${i.assigneeName}` : `${i.assigneeName}`) // 姓名
    //       approvalStatus = i.approvalStatus // 审批类型
    //       finishTime = i.finishTime ? i.finishTime : finishTime // 完成时间
    //       duration = i.duration ? i.duration : duration // 用时
    //       finishTime = finishTime + i.finishTime
    //       comment = comment + i.comment // 审批意见
    //       type = i.comment.type ? approvalLogTypeMap.value[i.comment.type] : '-' // 意见类别
    //     })
    //     list.value.push({
    //       nodeNumber: index,
    //       approvalStatus, // 审批类型
    //       assigneeName: name, // 姓名
    //       finishTime, // 完成时间
    //       duration, // 用时
    //       comment, // 审批意见
    //       type, // 意见类别
    //     })
    //     console.log('list.v*******alue', list.value)
    //   }
    //   else {
    //     item.forEach((i: any) => {
    //       list.value.push({
    //         nodeNumber: index,
    //         assigneeName: i.assigneeName, // 姓名
    //         approvalStatus: i.approvalStatus, // 审批类型
    //         finishTime: i.finishTime ? i.finishTime : '-', // 完成时间
    //         duration: i.approvalStatus === '发起人' || !i.duration ? '-' : i.duration, // 用时
    //         comment: i.comment.comment ? i.comment.comment : '-', // 审批意见
    //         type: i.comment.type ? approvalLogTypeMap.value[i.comment.type] : '-', // 意见类别
    //       })
    //     })
    //   }
    // })
    list.value = data
    // total.value = parseInt(response.data.total)
    loadingTable.value = false
  })
}
fetchData()
watch(() => props.id, (newVal) => {
  if (newVal) {
    fetchData()
  }
})
// ----------------------------------------合并单元格-----------------------------------------------------
const flitterData = (arr: any) => {
  const spanOneArr = [] as any
  let concatOne = 0
  arr.forEach((item: { nodeNumber: number }, index: number) => {
    if (index === 0) {
      spanOneArr.push(1)
    }
    else {
      // nodeNumber 修改
      if (item.nodeNumber === arr[index - 1].nodeNumber) { // 第一列需合并相同内容的判断条件
        spanOneArr[concatOne] += 1
        spanOneArr.push(0)
      }
      else {
        spanOneArr.push(1)
        concatOne = index
      }
    }
  })
  return {
    one: spanOneArr,
  }
}
// 合并单元格
const objectSpanMethod = ({ row, rowIndex, columnIndex }: { row: any; rowIndex: number; columnIndex: number }) => {
  if (columnIndex === 0) {
    const _row = (flitterData(list.value[row.cindex].approvalLogsList).one)[rowIndex]
    const _col = _row > 0 ? 1 : 0
    return {
      rowspan: _row,
      colspan: _col,
    }
  }
}

// -------------------------------------------钩子------------------------------------------------
// watch(() => props.processId, (val) => {
//   console.log('流程实例id', val)
//   listQuery.value.processId = val!
//   getDict().then(() => {
//     fetchData()
//   })
// }, { immediate: true })
</script>

<template>
  <detail-block title="审批流程记录">
    <!-- <normal-table
      :data="list" :total="total" :columns="columns"
      :query="listQuery"
      :list-loading="loadingTable"
      :pagination="false"
    >
      <template #preColumns>
        <el-table-column label="节点" width="55" align="center">
          <template #default="scope">
            {{ scope.row.index + 1 }}
          </template>
        </el-table-column>
      </template>
    </normal-table> -->
    <div v-for="(item, index) in list" :key="index" style="margin-top: 10px;">
      <div>审批类型:{{ item.approvalTypeName }}</div>
      <el-table
        v-loading="loadingTable"
        show-overflow-tooltip
        :data="item.approvalLogsList"
        border
        stripe
        style="width: 100%;"
        :span-method="objectSpanMethod"
      >
        <el-table-column label="节点" width="55" align="center">
          <template #default="scope">
            {{ scope.row.nodeNumber + 1 }}
          </template>
        </el-table-column>
        <el-table-column v-for="column of columns" :key="column.value" :width="column.width" :label="column.text" :prop="column.value" :align="column.align" />
      </el-table>
    </div>
  </detail-block>
</template>