<!-- 审批详情表格 -->
<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 { deptType, 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) {
  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
  })
}

// ----------------------------------------合并单元格-----------------------------------------------------
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) => {
  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>
