<template>
  <div class="model-file-page">
    <BaseTable
      v-if="showTableContent"
      ref="reportComparisonTableRef"
      :head="tableColumns"
      :tableName="checkTableName"
      hidePagination
    >
      <template v-for="item in tableColumns" :key="item.key" #[item.key]="{ row }">
        <div v-if="row[item.key]" class="img-content" @click="reviewFileFun(row[item.key])">
          <el-icon><Document /></el-icon>
          <span class="report-style">{{ getFileNameFun(row[item.key]) }}</span>
        </div>
      </template>
    </BaseTable>

    <FilePreview v-model="previewVisible" :fileId="fileId"></FilePreview>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, watch } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { objectTypeArrayRemovesDuplicates } from '@/utils/common';
import FilePreview from '@/components/common/filePreview/index.vue';

const props = defineProps({
  checkTaskInfo: {
    type: Array,
    default: () => [],
  },
  checkTableName: {
    type: String,
    default: '',
  },
  cloumnWidth: {
    type: String,
    default: '',
  },
});
const reportComparisonTableRef = ref();
const showTableContent = ref(false);
const fileId = ref<any>('');
const previewVisible = ref(false);
const tableColumns = ref<any>([]);

const tableData = ref<any>([]);

const inputDatas = ref<any>([]);

const getFileNameFun = (ids: any) => {
  const file =
    inputDatas.value.find((item: any) => {
      return item.id === Number(ids);
    }) || '';

  return file.originalName || '';
};

const getTableColumnFun = (data: any) => {
  showTableContent.value = false;
  tableData.value = [];
  tableColumns.value = [];
  const list: any = data || [];
  const defaultColumns: any = [
    {
      title: '报告名称',
      key: 'attributes',
      isShow: true,
    },
  ];
  const reportComparisoncolumns: any = [];

  for (let i = 0; i < list.length; i++) {
    const names =
      list[i].taskName && list[i].runName
        ? list[i].taskName + '_' + list[i].runName
        : list[i].originalName;

    const obj: any = {
      title: `${names}-报告`,
      key: `${list[i].taskId}_${list[i].uuid}_${list[i].id}`,
      isShow: true,
      align: 'center',
    };

    reportComparisoncolumns.push(obj);
  }

  tableColumns.value = defaultColumns.concat(reportComparisoncolumns);
  tableColumns.value = objectTypeArrayRemovesDuplicates(tableColumns.value, 2);
  if (props.cloumnWidth) {
    for (let i = 0; i < tableColumns.value.length; i++) {
      tableColumns.value[i].width = props.cloumnWidth;
    }
  }

  const listData: any = [];

  for (let i = 0; i < tableColumns.value.length; i++) {
    const obj: any = {};
    const str = tableColumns.value[i].key;
    obj[str] = [];
    for (let j = 0; j < list.length; j++) {
      const str2 = list[j].taskId + '_' + list[j].uuid + '_' + list[j].id;
      if (str2 === str) {
        obj[str].push(list[j].id);
      }
    }
    obj[str] = obj[str].join('_');
    if (obj[str]) {
      listData.push(obj);
    }
  }

  const pngObj: any = {};
  for (let i = 0; i < listData.length; i++) {
    for (const key in listData[i]) {
      pngObj[key] = listData[i][key];
    }
  }
  tableData.value.push(pngObj);
  showTableContent.value = true;

  nextTick(() => {
    reportComparisonTableRef.value.setDataFun(tableData.value);
  });
};

watch(
  () => props.checkTaskInfo,
  (newVal) => {
    if (newVal) {
      inputDatas.value = newVal;

      getTableColumnFun(newVal);
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

const reviewFileFun = (ids: any) => {
  fileId.value = ids;
  previewVisible.value = true;
};
</script>

<style lang="scss" scoped>
.model-file-page {
  width: 100%;
  height: 100%;

  .img-content {
    width: 100%;
    display: flex;
    align-items: center;
    // justify-content: center;
    color: #409eff;

    .report-style {
      margin-left: 5px;
      cursor: pointer;
    }
  }
}
</style>
