<template>
  <div>
    <!-- <admin-todo-list title="审批详情" icon="table"> -->
    <admin-icon-title :read-only="true">
      <template slot="title"> 审批详情 </template>
    </admin-icon-title>
    <a-table
      bordered
      size="small"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="false"
      :scroll="{ x: 1000 }"
    >
      <span slot="electronicSignature" slot-scope="text, record">
        <img
          v-if="record.activityName != '申请单位'"
          style="width: 150px; height: 50px; margin: 0 auto"
          :src="imgPrefix + record.electronicSignature"
        />
        <span v-else>{{ record.assigneeName }}</span>
      </span>
    </a-table>
    <!-- </admin-todo-list> -->
  </div>
</template>

<script>
import { postAction } from '@/api/manage.js'
import { mapGetters } from 'vuex'
export default {
  props: {
    actPojo: {
      type: Object,
      required: false,
      default: () => {}
    }
  },
  data() {
    return {
      columns: [
        {
          title: '审批环节',
          align: 'center',
          ellipsis: true,
          width: '200px',
          dataIndex: 'activityName'
        },
        {
          title: '审批人',
          align: 'center',
          ellipsis: true,
          width: '200px',
          scopedSlots: {
            filterDropdown: 'filterSetting',
            filterIcon: 'filterSettingIcon',
            customRender: 'electronicSignature'
          }
        },
        {
          title: '审批时间',
          align: 'center',
          ellipsis: true,
          width: '180px',
          dataIndex: 'endTime'
        },
        {
          title: '审批意见',
          align: 'center',
          ellipsis: true,
          dataIndex: 'comment'
        }
      ],
      dataSource: [],
      interface: {
        histoicFlow: ''
      },
      imgPrefix: window._CONFIG['resourcesUrl']
    }
  },
  computed: {
    ...mapGetters(['useApprovalProcessInfo'])
  },
  watch: {
    actPojo: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val) {
          this.getInit()
        }
      }
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // 函数方法 - 点击等操作执行的方法
  methods: {
    getInit() {
      const actPojo = this.useApprovalProcessInfo.actPojo
      if (!actPojo) return
      let params = {
        procInsId: actPojo.procInsId,
        procDefName: actPojo.procDefName,
        relationId: actPojo.id
      }
      postAction(this.interface.histoicFlow, params).then(res => {
        let result = res?.value
        if (!result) return
        this.dataSource = result.filter(
          item => item.activityName !== '开始' && item.activityName !== '结束' && item.endTime
        )
      })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>