<template>
  <div class="model-file-page">
    <BaseTable
      v-if="showTableContent"
      :row-config="{
        height: 400,
      }"
      ref="cloudTableRef"
      :head="tableColumns"
      :tableName="checkTableName"
      hidePagination
    >
      <template v-for="item in tableColumns" :key="item.key" #[item.key]="{ row }">
        <div class="img-content">
          <div class="img-item" v-for="item_2 in row[item.key]?.split('_')" :key="item_2">
            <img width="100%" :src="getImgPathFun(item_2)" alt="" crossorigin="anonymous" />
          </div>
        </div>
      </template>
    </BaseTable>
  </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';

const props = defineProps({
  checkTaskInfo: {
    type: Array,
    default: () => [],
  },
  checkTableName: {
    type: String,
    default: '',
  },
  cloumnWidth: {
    type: String,
    default: '',
  },
});
const env = import.meta.env;

const cloudTableRef = ref();
const showTableContent = ref(false);

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

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

const getTableColumnFun = (data: any) => {
  showTableContent.value = false;
  tableData.value = [];
  tableColumns.value = [];
  const list: any = data || [];
  const defaultColumns: any = [
    {
      title: '云图信息',
      key: 'attributes',
      isShow: true,
    },
  ];
  const cloudcolumns: any = [];

  for (let i = 0; i < list.length; i++) {
    const obj: any = {
      title: `${list[i].runName}-${list[i].originalName}`,
      key: `${list[i].taskId}_${list[i].uuid}_${list[i].id}`,
      isShow: true,
    };

    cloudcolumns.push(obj);
  }

  tableColumns.value = defaultColumns.concat(cloudcolumns);
  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];
    }
  }

  showTableContent.value = true;
  tableData.value.push(pngObj);
  nextTick(() => {
    cloudTableRef.value.setDataFun(tableData.value);
  });
};

const getImgPathFun = (id: any) => {
  return `${env.VITE_API_IMAGE_PREVIEW_URL}/data/previewImage?fileId=${id}`;
};

watch(
  () => props.checkTaskInfo,
  (newVal) => {
    if (newVal) {
      getTableColumnFun(newVal);
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

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

  .img-content {
    width: 100%;
  }
}
</style>
