<!-- 审批流程组件 -->
<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[1] as any// 流程数据
    // const initiator = newValue[0] as any// 发起人

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