<!-- 审批详情表格 -->
<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 { fetchApproval } from '@/api/approval'
import type { dictType } from '@/global'
const props = defineProps({
  processId: {
    type: String,
    require: true,
  }, // 流程实例
})
// 查询条件
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
  })
}
// -----------------------------------------方法--------------------------------------------------
// 数据查询
function fetchData(isNowPage = false) {
  if (!listQuery.value.processId) {
    return
  }
  loadingTable.value = true
  // if (!isNowPage) {
  // 是否显示当前页，否则跳转第一页
  // listQuery.value.offset = 1
  // }
  // fetchApproval({ processId: listQuery.value.processId }).then((response) => {
  //   console.log(response.data, 'response')
  //   response.data.forEach((item: Array<IList>, index: number) => {
  //     item.forEach((i: any) => {
  //       list.value.push({
  //         cindex: index,
  //         nodeNumber: i.approvalStatus === '发起人' ? 0 : list.value[index - 1].nodeNumber + 1,
  //         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] : '-', // 意见类别
  //       })
  //     })
  //   })
  //   total.value = parseInt(response.data.total)
  //   loadingTable.value = false
  // }).catch(() => {
  //   loadingTable.value = false
  // })

  fetchApproval(listQuery.value.processId).then((response) => {
    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] : '-', // 意见类别
          })
        })
        console.log('[[[[[[[list]]]]]]]', list.value)
      }
    })
    total.value = parseInt(response.data.total)
    loadingTable.value = false
  }).catch(() => {
    loadingTable.value = false
  })
}
watch(() => props.processId, (newVal) => {
  if (newVal) {
    listQuery.value.processId = 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 = ({ rowIndex, columnIndex }: { rowIndex: number; columnIndex: number }) => {
  if (columnIndex === 0) {
    const _row = (flitterData(list.value).one)[rowIndex]
    const _col = _row > 0 ? 1 : 0
    return {
      rowspan: _row,
      colspan: _col,
    }
  }
}

// -------------------------------------------钩子------------------------------------------------
watch(() => props.processId, (val) => {
  if (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> -->
    <el-table
      v-loading="loadingTable"
      show-overflow-tooltip
      :data="list"
      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>
  </detail-block>
</template>