<template>
  <div class="result-page">
    <BaseTable
      ref="baseTableRef"
      tableName="EXPERIMENT_RESULT_TABLE"
      :showCheckbox="true"
      :action-list="showLeftOptions ? actionList : []"
      :api="listExperimentResultApi"
      :show-overflow="false"
      :params="{
        taskId: taskInfo.uuid,
      }"
    >
      <template v-if="showLeftOptions" #leftOptions>
        <el-button type="primary" @click="uploadResultFun">上传结果</el-button>
        <el-button type="danger" @click="batchDeleteFun">删除结果</el-button>
      </template>

      <template #imageId="{ row }">
        <img
          v-if="row.imageId"
          :src="getImgPathFun(row.imageId)"
          @click="previewFileFun({ id: row.imageId })"
          width="150"
          class="mr10"
          alt=""
        />
      </template>

      <template #fileId="{ row }">
        <el-icon class="icon-style" v-if="row.fileId" @click="showfileTableFun(row.fileId)"
          ><View
        /></el-icon>
        <span v-else>--</span>
      </template>
    </BaseTable>

    <el-drawer
      v-model="visible"
      :title="`试验结果上传`"
      :size="600"
      :close-on-click-modal="false"
      @close="closeFun"
    >
      <div class="content">
        <TableForm ref="tableFormRef" tableName="EXPERIMENT_RESULT_TABLE" />
        <el-form>
          <el-form-item label="试验截图">
            <div v-show="imageUrl" class="img-box">
              <el-icon class="icon-style-delete" @click="removeFileFun"><Delete /></el-icon>
              <img :src="imageUrl" class="avatar" />
            </div>
            <el-upload
              v-show="!imageUrl"
              class="upload-demo2"
              ref="uploadImgRef"
              v-model:file-list="imageFileList"
              :auto-upload="false"
              :on-change="handleChangeFun"
              :accept="accept"
              list-type="picture-card"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="附件文件" v-if="resultInfo?.id && attachmentFileList?.length">
            <div class="file-list">
              <div class="file-content" v-for="item in attachmentFileList" :key="item.id">
                <div class="file-name" :title="item.originalName">
                  <el-icon class="icon-style"><Document /></el-icon> {{ item.originalName }}
                </div>
                <div class="file-operate">
                  <el-icon @click="deleteAttachmentFileFun(item)"><Close /></el-icon>
                </div>
              </div>
            </div>
          </el-form-item>
          <!-- 试验结果上传 -->
          <el-form-item label="试验附件" v-if="!resultInfo?.id">
            <el-upload
              v-model:file-list="fileList"
              class="upload-demo"
              multiple
              :auto-upload="false"
            >
              <el-button type="primary">上传附件</el-button>
            </el-upload>
          </el-form-item>
          <!-- 试验结果编辑 -->
          <el-form-item label="试验附件" v-else>
            <el-upload
              v-model:file-list="fileList"
              class="upload-demo"
              multiple
              :auto-upload="false"
            >
              <el-button type="primary">上传附件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div>
          <el-button @click="closeFun">关闭</el-button>
          <el-button type="primary" @click="submitFun">确定</el-button>
        </div>
      </template>
    </el-drawer>
    <FilePreview v-model="previewVisible" :fileId="currentRow?.id" />

    <Dialog
      v-model="diaVisible"
      diaTitle="试验附件"
      top="5vh"
      width="70%"
      @close="diaVisible = false"
    >
      <BaseTable
        ref="baseFileTableRef"
        table-name="RUN_RESULT_FILE_TABLE"
        :hide-pagination="true"
        :full-height="true"
        :action-list="fileActionList"
      >
        <template #fileSize="{ row }">
          <span>{{ formatFileSize(row.fileSize) }}</span>
        </template>
      </BaseTable>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import TableForm from '@/components/common/table/tableForm.vue';
import { cloneDeep } from 'lodash-es';
import {
  batchAddExperimentResultApi,
  deleteExperimentResultApi,
  editExperimentResultApi,
  listExperimentResultApi,
} from '@/api/project/run';
import emitter from '@/utils/eventBus';
import { ElMessage, ElMessageBox } from 'element-plus';
import FilePreview from '@/components/common/filePreview/index.vue';
import { getFileBaseInfoApi } from '@/api/data/data';
import Dialog from '@/components/common/dialog/index.vue';
import { downloadFileById, fileUploadAllocationTypeFun, formatFileSize } from '@/utils/file';
import { useI18n } from 'vue-i18n';

const env = import.meta.env;

const props = defineProps({
  taskInfo: {
    type: Object,
    default: () => {},
  },
  showLeftOptions: {
    type: Boolean,
    default: true,
  },
});

const baseTableRef = ref();
const tableFormRef = ref();
const visible = ref(false);
const imageUrl = ref<any>('');
const fileList = ref<any>([]);
const imageFileList = ref<any>([]);
const diaVisible = ref(false);
const baseFileTableRef = ref();
const uploadImgRef = ref();
const { t } = useI18n();

const accept = ref('.jpg,.jpeg,.png,.gif');

const uploadResultFun = () => {
  resultInfo.value = {};
  visible.value = true;
  imageFileList.value = [];
  fileList.value = [];
  imageUrl.value = '';
  deleteFileIds.value = [];
  deleteImageId.value = '';
  nextTick(() => {
    tableFormRef.value.resetFun();
  });
};

const closeFun = () => {
  visible.value = false;
};

const tableData = ref<any>([]);
const fileIds = ref<any>([]);
const showfileTableFun = async (ids: any) => {
  fileIds.value = ids.split(',');
  tableData.value = [];
  for (let i = 0; i < fileIds.value.length; i++) {
    const res: any = await getFileBaseInfoApi({ fileId: fileIds.value[i] });
    if (res && res.code === 200) {
      if (res.data.dataType === 2) {
        tableData.value.push(res.data);
      }
    }
  }

  diaVisible.value = true;
  nextTick(() => {
    baseFileTableRef.value.setDataFun(tableData.value);
  });
};

const resultInfo = ref<any>({});
const attachmentFileList = ref<any>([]);
const actionList = ref([
  {
    title: '编辑',
    type: 'primary',
    click: async (row: any) => {
      visible.value = true;
      resultInfo.value = cloneDeep(row);
      const ids = resultInfo.value?.fileId ? resultInfo.value?.fileId?.split(',') || [] : '';
      attachmentFileList.value = [];
      deleteFileIds.value = [];
      deleteImageId.value = '';
      fileList.value = [];
      if (resultInfo.value.imageId) {
        imageUrl.value = getImgPathFun(resultInfo.value.imageId);
      }

      for (let i = 0; i < ids.length; i++) {
        const res: any = await getFileBaseInfoApi({ fileId: ids[i] });
        if (res && res.code === 200) {
          if (res.data.dataType === 2) {
            attachmentFileList.value.push(res.data);
          }
        }
      }
      nextTick(() => {
        tableFormRef.value.setFormDataFun(resultInfo.value);
      });
    },
  },
  {
    title: '删除',
    type: 'danger',
    needConfirm: true,
    confirmTip: '确认删除吗？',
    click: (row: any) => {
      deleteFun(row.id);
    },
  },
]);

const currentRow = ref();
const previewVisible = ref(false);
const previewFileFun = (row: any) => {
  currentRow.value = row;
  previewVisible.value = true;
};

const handleChangeFun = (uploadFile: any) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw);
};

const fileActionList = ref([
  {
    title: t('通用.预览'),
    type: 'primary',
    click: (row: any) => {
      previewFileFun(row);
    },
    hide: (row: any) => {
      return row.dataType !== 2;
    },
  },
  {
    title: t('通用.下载'),
    type: 'primary',
    click: (row: any) => {
      downloadFileById(row.id);
    },
    hide: (row: any) => {
      return row.dataType !== 2;
    },
  },
]);

const deleteFun = async (id: any) => {
  const res: any = await deleteExperimentResultApi({ id });
  if (res && res.code === 200) {
    ElMessage.success('删除成功!');
  }
  baseTableRef.value.resetFun();
};

const deleteFileIds = ref<any>([]);
const deleteAttachmentFileFun = (file: any) => {
  deleteFileIds.value.push(file.id);

  attachmentFileList.value = attachmentFileList.value.filter((item: any) => {
    return item.id != file.id;
  });
};

const apiParams = ref([
  'fileInfoList',
  'imageFileInfo',
  'expName',
  'expData',
  'expDesc',
  'uploadTaskId',
  'taskId',
  'id',
  'addFileInfoList',
  'addImageInfo',
  'deleteFileIds',
  'deleteImageId',
]);

const submitFun = async () => {
  const valid = await tableFormRef.value.validateFun();

  if (valid) {
    const fromData = tableFormRef.value.getFormDataFun();
    const files = fileList.value.concat(imageFileList.value);

    const obj: any = cloneDeep(fromData);

    if (fileList.value.length) {
      if (obj?.id) {
        obj.addFileInfoList = fileList.value.map((item: any) => {
          return {
            fileName: item.name,
            fileSize: item.size,
            fileType: fileUploadAllocationTypeFun(item.name),
          };
        });
      } else {
        obj.fileInfoList = fileList.value.map((item: any) => {
          return {
            fileName: item.name,
            fileSize: item.size,
            fileType: fileUploadAllocationTypeFun(item.name),
          };
        });
      }
    }

    if (imageFileList.value.length) {
      if (obj?.id) {
        obj.addImageInfo = {
          fileName: imageFileList.value[0].name,
          fileSize: imageFileList.value[0].size,
          fileType: fileUploadAllocationTypeFun(imageFileList.value[0].name),
        };
      } else {
        obj.imageFileInfo = {
          fileName: imageFileList.value[0].name,
          fileSize: imageFileList.value[0].size,
          fileType: fileUploadAllocationTypeFun(imageFileList.value[0].name),
        };
      }
    }

    if (deleteFileIds.value.length) {
      obj.deleteFileIds = deleteFileIds.value;
    }

    if (deleteImageId.value) {
      obj.deleteImageId = Number(deleteImageId.value);
    }

    obj.uploadTaskId = new Date().getTime();
    obj.taskId = props.taskInfo.uuid;

    for (const key in obj) {
      if (!apiParams.value.includes(key)) {
        delete obj[key];
      }
    }

    const res: any = obj?.id
      ? await editExperimentResultApi(obj)
      : await batchAddExperimentResultApi(obj);
    if (res && res.code === 200) {
      if (res.data instanceof Array) {
        res?.data?.forEach((item: any, index: any) => {
          emitter.emit('ADD_UPLOAD_FILE', {
            file: files[index].raw,
            data: {
              // 接口返回的文件目录信息，包括配置信息
              ...item,
              isApprove: 0, // 0否 1是
              taskType: 4, // 5实验数据
            },
          });
        });
      }

      closeFun();
    }
  }
};

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

const deleteImageId = ref<any>('');
const removeFileFun = () => {
  imageFileList.value = [];

  if (imageUrl.value.includes('data/previewImage')) {
    const id = imageUrl.value.split('=').at(-1);
    deleteImageId.value = id;
  }

  imageUrl.value = '';
};

const batchDeleteFun = async () => {
  const files = baseTableRef.value.tableRef.getCheckboxRecords();

  if (files.length) {
    ElMessageBox.confirm('确认要删除选中的试验结果?', '警告', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(async () => {
        for (let i = 0; i < files.length; i++) {
          await deleteFun(files[i].id);
        }
        baseTableRef.value.resetFun();
      })
      .catch(() => {
        baseTableRef.value.resetFun();
      });
  } else {
    ElMessage.warning('请勾选后再删除');
  }
};

onMounted(() => {});
</script>

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

  .upload-demo {
    width: 100%;
  }

  .upload-demo2 {
    width: 148px;
    height: 148px;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer;
    border-radius: 3px;
    border: 1px dashed var(--el-color-primary);
    position: relative;

    :deep(.el-upload) {
      width: 148px;
      height: 148px;
      display: flex;
      justify-content: center !important;
      align-items: center !important;
    }

    :deep(.el-upload-list__item-preview) {
      display: none;
    }
  }

  .mr10 {
    cursor: pointer;
  }

  .icon-style {
    color: var(--el-color-primary);
    font-size: 16px;
    cursor: pointer;
  }

  .file-list {
    width: 100%;

    .file-content {
      width: 100%;
      height: 32px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .file-name {
        width: 80%;
        display: flex;
        align-items: center;
        text-overflow: ellipsis;
        /* 当内容溢出容器时显示省略号 */
        overflow: hidden;
        /* 隐藏溢出容器的内容 */
        white-space: nowrap;
        color: #606266;

        .icon-style {
          margin-right: 5px;
          color: #606266;
        }
      }

      .file-operate {
        display: none;
        cursor: pointer;
        padding-right: 10px;
      }
    }

    .file-content:hover {
      background-color: #f5f7fa;

      .file-operate {
        display: block;
      }
    }
  }

  .img-box {
    width: 148px;
    height: 148px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--el-color-primary);
    position: relative;

    .icon-style-delete {
      display: none;
      position: absolute;
      top: 5px;
      right: 5px;
      font-size: 24px;
      color: var(--el-color-danger);
      cursor: pointer;
    }
    .avatar {
      width: 146px;
    }
  }

  .img-box:hover {
    .icon-style-delete {
      display: block;
    }
  }
}
</style>
