<template>
  <a-table
    :pagination="false"
    :dataSource="dataSource"
    :columns="columns"
    class="min-table"
    bordered
    size="middle"
    :scroll="{ y: 'calc(100vh - 300px)' }"
  >
    <template #bodyCell="{ column, record }">
      <!-- 节点类型 -->
      <template v-if="column.dataIndex == 'taskTypeWrapper'">
        <!-- 10:发起-->
        <a-tag v-if="record.taskType == 10" color="#29cc80">{{ record.taskTypeWrapper }}</a-tag>
        <!-- 20:审批 -->
        <a-tag v-else-if="record.taskType == 20" color="#ff6a00">{{ record.taskTypeWrapper }}</a-tag>
        <!-- 30:抄送" -->
        <a-tag v-else-if="record.taskType == 30" color="#268bfb">{{ record.taskTypeWrapper }}</a-tag>
        <!-- 40:征询 -->
        <a-tag v-else-if="record.taskType == 40" color="#00cc66">{{ record.taskTypeWrapper }}</a-tag>
        <!-- 其他 -->
        <a-tag v-else color="#268bfb">{{ record.taskTypeWrapper }}</a-tag>
      </template>
      <!-- 状态 -->
      <template v-if="column.dataIndex == 'processUserIdWrapper'">
        <span>{{ record.processUserIdWrapper?.realName }}</span>
      </template>
      <template v-if="column.dataIndex == 'taskStatusWrapper'">
        <TaskStatusTag :record="record" :isProjectWork="props.isProjectWork" />
      </template>
    </template>
  </a-table>
</template>

<script setup name="ApproverLog">
import { ref } from 'vue';
import TaskStatusTag from './task-status-tag.vue';

const props = defineProps({
  // 表格数据
  dataSource: {
    type: Array,
    default: []
  },
  // 是否是项目工作流
  isProjectWork: {
    type: Boolean,
    default: false
  }
});
// 表格配置
const columns = ref([
  {
    key: 'index',
    title: '序号',
    width: 50,
    align: 'center',
    hideInSetting: true,
    customRender: ({ index }) => index + 1
  },
  {
    title: '节点名称',
    width: 120,
    ellipsis: true,
    dataIndex: 'nodeName'
  },
  {
    title: '处理人',
    width: 80,
    dataIndex: 'processUserIdWrapper'
  },
  {
    title: '节点类型',
    width: 100,
    align: 'center',
    dataIndex: 'taskTypeWrapper'
  },
  {
    title: '任务状态',
    width: 80,
    align: 'center',
    dataIndex: 'taskStatusWrapper'
  },
  {
    title: '开始时间',
    width: 120,
    dataIndex: 'beginTime'
  },
  {
    title: '结束时间',
    width: 120,
    dataIndex: 'approveTime'
  },
  {
    title: '时长',
    width: 80,
    dataIndex: 'durationFormat'
  },
  {
    title: '审批意见',
    width: 150,
    ellipsis: true,
    dataIndex: 'suggestContent'
  }
]);
</script>

<style scoped lang="less">
:deep(.ant-table-body) {
  min-height: calc(100vh - 300px) !important;
}
</style>
