<!-- 审批流程组件 -->
<script lang="ts" setup name="ApprovalRecord">
import { watch } from 'vue'
const props = defineProps({
  approvalRecordData: { // 审批流程数据
    type: Array,
    default: () => [],
  },
})
const typeMap: { [key: string]: string } = {
  1: '同意',
  2: '驳回',
  3: '拒绝',
}
const approvalRecord = ref([]) as any // 表格数据
watch(() => props.approvalRecordData, (newValue) => {
  if (newValue && newValue.length === 1) { // 只有发起人
    const initiator = newValue[0] as any// 发起人

    approvalRecord.value.push({ // 发起人处理
      finishTime: initiator[0].createTime, // 创建时间--对应发起时间
      tableData: [
        {
          name: initiator[0].taskName,
          data: initiator[0].assigneeName,
        },
        {
          name: '部门名称',
          data: initiator[0].deptName,
        },
      ],
    })
  }
  else { // 有发起人和审批流程
    const record = newValue[0] as any// 流程数据
    const initiator = newValue[1] as any// 发起人

    approvalRecord.value.push({ // 发起人处理
      finishTime: initiator[0].createTime, // 创建时间--对应发起时间
      tableData: [
        {
          name: initiator[0].taskName,
          data: initiator[0].assigneeName,
        },
        {
          name: '部门名称',
          data: initiator[0].deptName,
        },
      ],
    })
    // 流程数据处理
    record.forEach((item: any) => {
      approvalRecord.value.push({
        finishTime: item.finishTime,
        tableData: [
          {
            name: item.taskName,
            data: item.assigneeName,
          },
          {
            name: '部门名称',
            data: item.deptName,
          },
          {
            name: '审批状态',
            data: item.approvalStatus,
          },
          {
            name: '意见类别',
            data: typeMap[item.comment.type],
          },
          {
            name: '意见内容',
            data: item.comment.comment || '无',
          },
          {
            name: '任务耗时',
            data: item.duration,
          },
        ],
      })
    })
  }
},
{
  deep: true,
})

// 自定义列背景色
const columnStyle = ({ columnIndex }: { columnIndex: number }) => {
  // 第一列颜色
  if (columnIndex == 0) {
    return {
      backgroundColor: '#fafafa',
    }
  }
  // 其他列颜色
  else {
    return {
      backgroundColor: 'transparent',
    }
  }
}
</script>

<template>
  <el-timeline>
    <el-timeline-item
      v-for="(item, index) in approvalRecord"
      :key="index"
      :timestamp="item.finishTime"
      placement="top"
      :type="index === approvalRecord.length - 1 ? 'primary' : undefined"
      :hollow="index === approvalRecord.length - 1 ? true : false"
      :size="index === approvalRecord.length - 1 ? 'large' : 'normal'"
    >
      <el-card>
        <el-table
          :data="item.tableData"
          :cell-style="columnStyle"
          border
          prop="name"
          style="width: 100%;"
          :show-header="false"
        >
          <el-table-column prop="name" label="参数名" />
          <el-table-column prop="data" label="参数" />
        </el-table>
      </el-card>
    </el-timeline-item>
  </el-timeline>
</template>

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