<template>
  <my-dialog
    :visible="visible"
    header="流程缩略图"
    :width="1200"
    :closeOnOverlayClick="false"
    attach="body"
    @close="emit('update:visible', false)"
  >
    <t-table
      ref="tableRef"
      size="small"
      row-key="key"
      :columns="screenImgTableColumns"
      :data="tableData"
      bordered
    >
      <template
        v-for="(field, index) in screenImgTableColumns"
        #[field.colKey]="{ col, row }"
      >
        <span v-if="['sopNo', 'courseName'].includes(field.colKey)">{{
          row[field.colKey]
        }}</span>
        <image-view
          v-else
          :width="80"
          :height="80"
          :images="[row[field.colKey]]"
        ></image-view>
      </template>
    </t-table>
  </my-dialog>
</template>
<script setup name="ScreenImgResultDialog">
import { ref, watch, computed } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';

const props = defineProps({
  visible: Boolean,
  screenImgTableData: {
    type: Array,
    default: () => [],
  },
  sopType: String,
});
const emit = defineEmits(['update:visible']);
const tableData = computed(() => {
  return props.screenImgTableData.map((row, index) => {
    console.log('row', row);
    let obj = {};
    row.screenImgArr.forEach((v, i) => {
      obj['step' + (i + 1)] = v.url;
    });
    console.log('obj', obj);
    obj.sopNo = row.sopNo;
    obj.courseName = row.courseName;
    return obj;
  });
});
const screenImgTableColumns = computed(() => {
  let baseArr = [
    { colKey: 'sopNo', title: 'SOP流水号', width: 180 },
    { colKey: 'courseName', title: '科目名称' },
  ];
  let pushArr =
    props.sopType === 'OFFICE_SOP_FLOW'
      ? [
          { colKey: 'step1', title: '项目确认', width: 120, align: 'center' },
          { colKey: 'step2', title: '扫描准备', width: 120, align: 'center' },
          {
            colKey: 'step3',
            title: '扫描收尾检查',
            width: 120,
            align: 'center',
          },
          {
            colKey: 'step4',
            title: '阅卷参数检查',
            width: 120,
            align: 'center',
          },
          {
            colKey: 'step5',
            title: '阅卷收尾检查',
            width: 120,
            align: 'center',
          },
        ]
      : props.sopType === 'CLOUD_MARK_SOP_FLOW'
      ? [
          { colKey: 'step1', title: '项目初审', width: 120, align: 'center' },
          {
            colKey: 'step2',
            title: '项目关键信息',
            width: 120,
            align: 'center',
          },
          { colKey: 'step3', title: '内审', width: 120, align: 'center' },
          {
            colKey: 'step4',
            title: '现场测试环境',
            width: 120,
            align: 'center',
          },
          { colKey: 'step5', title: '扫描准备', width: 120, align: 'center' },
          { colKey: 'step6', title: '校验收尾', width: 120, align: 'center' },
          { colKey: 'step7', title: '评卷准备', width: 120, align: 'center' },
          { colKey: 'step8', title: '成绩复核', width: 120, align: 'center' },
          { colKey: 'step9', title: '评卷收尾', width: 120, align: 'center' },
          {
            colKey: 'step10',
            title: '设备入库登记',
            width: 120,
            align: 'center',
          },
        ]
      : [];
  return [...baseArr, ...pushArr];
});
</script>
