<!-- 审批流程组件 -->
<script lang="ts" setup name="ApprovalRecord">
import { onMounted } from 'vue'
import { fetchApproval } from '@/api/approval'

const props = defineProps({
  processId: String, // 流程实例id
})

const approvalRecordData = [
  {
    finishTime: '2121-8-9',
    tableData: [
      {
        name: '任务ID',
        data: 9,
      },
      {
        name: '任务名称',
        data: 'xxxx',
      },
    ],
  },
  {
    finishTime: '2121-8-9',
    tableData: [
      {
        name: '任务名称',
        data: 'taskName',
      },
      {
        name: '任务执行人',
        data: 'assigneeName',
      },
      {
        name: '部门名称',
        data: 'deptName',
      },
      {
        name: '意见类别',
        data: 'type',
      },
      {
        name: '意见内容',
        data: 'comment',
      },
      {
        name: '任务耗时',
        data: 'duration',
      },
    ],
  },
]

// 查询审批记录
const getApprovalRecord = () => {
  fetchApproval(props.processId!).then((res) => {
    // 数据处理
  })
}

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

onMounted(() => {
  if (props.processId) {
    getApprovalRecord()// 获取审批记录
  }
})
</script>

<template>
  <el-timeline>
    <el-timeline-item
      v-for="(item, index) in approvalRecordData"
      :key="index"
      :timestamp="item.finishTime"
      placement="top"
      :type="index === approvalRecordData.length - 1 ? 'primary' : undefined"
      :hollow="index === approvalRecordData.length - 1 ? true : false"
      :size="index === approvalRecordData.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>