<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> -->

  <div class="model-file-page">
    <div class="imglist" v-for="item_1 in imgLists" :key="item_1.name">
      <div class="task-name">
        <el-icon class="icon-style"><Document /></el-icon>
        {{ item_1.name }}
      </div>
      <el-card class="task-img-content" v-for="item_2 in item_1.img" :key="item_2.uuid">
        <div class="task-img-item">
          <div class="img-box" @click="reviewFileFun(item_2.id)">
            <img class="img-item" :src="getImgPathFun(item_2.id)" alt="" />
            <div>{{ item_2.originalName }}</div>
          </div>
          <div class="img-attribute">{{ getFIleSuffix(item_2.originalName) }}</div>
          <div class="img-attribute">{{ item_2.formatFileSize }}</div>
          <div class="img-attribute">{{ item_2.createTime }}</div>
          <div class="img-attribute">{{ item_2.ownProjectName }}</div>
          <div class="img-attribute">{{ item_2.ownPhaseName }}</div>
          <div class="img-attribute">{{ item_2.runName }}</div>
          <div class="img-attribute">
            <el-button type="primary" link @click="reviewFun(item_2)">预览</el-button>
            <el-button type="primary" link @click="downLoadFun(item_2)">下载</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
  <FilePreview v-model="previewVisible" :fileId="fileId"></FilePreview>
</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';
import { downloadFileByStream } from '@/utils/file';

const props = defineProps({
  checkTaskInfo: {
    type: Array,
    default: () => [],
  },
  checkTableName: {
    type: String,
    default: '',
  },
  cloumnWidth: {
    type: String,
    default: '',
  },
  checkType: {
    type: String,
    default: '',
  },
});
const env = import.meta.env;
const previewVisible = ref(false);
const fileId = ref<any>('');

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

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

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

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

const getTableColumnFun = (data: any) => {
  const checkTypes = props.checkType;
  let key = 'owntaskName';
  if (checkTypes === '仿真任务') {
    key = 'owntaskName';
  }
  if (checkTypes === '仿真算例') {
    key = 'ownRunName';
  }
  imgLists.value = [];
  const names: any = data.map((item: any) => {
    return item[key];
  });

  const checkNames: any = objectTypeArrayRemovesDuplicates(names, 1);

  for (let i = 0; i < checkNames?.length; i++) {
    const obj: any = {
      name: checkNames[i],
      img: [],
    };

    for (let j = 0; j < data.length; j++) {
      if (checkNames[i] === data[j][key]) {
        obj.img.push(data[j]);
      }
    }

    imgLists.value.push(obj);
  }

  return;
};

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

const getFIleSuffix = (name: any) => {
  let suffix: any = '';
  suffix = name.split('.').at(-1);
  return suffix;
};

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

// 预览文件
const reviewFun = (column: any) => {
  fileId.value = column.id;
  previewVisible.value = true;
};

const downLoadFun = (column: any) => {
  fileId.value = column.id;
  downloadFileByStream(fileId.value);
};

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

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

  .img-content {
    width: 100%;
  }

  .imglist {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .task-name {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      font-size: 14px;
      padding-left: 10px;
      // border-left: 5px solid var(--el-color-primary);
    }

    .task-img-content {
      // width: 200px;
      width: calc(25% - 10px);
      margin-right: 10px;
      margin-bottom: 10px;

      .task-img-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        // justify-content: center;
        text-align: center;

        .img-box {
          width: 100%;
          cursor: pointer;

          .img-item {
            width: 150px;
            height: 150px;
            border-radius: 5px;
            border: 1px solid #c0b9b91c;
            overflow: hidden;
          }
        }
      }

      .img-attribute {
        width: 100%;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-top: 1px solid #c0b9b91c;
      }
    }
  }
}

.icon-style {
  color: var(--el-color-primary);
  margin-right: 5px;
}
</style>
