<template>
  <!-- 导入ZIP图片的弹窗 -->
  <el-dialog
    class="l-dialog w500"
    :title="title"
    :visible="visible"
    :show-close="true"
    :close-on-click-modal="false"
    @close="handleClose"
    :append-to-body="true"
  >
    <div>
      <!-- 引入UploadFile组件，仅允许上传ZIP -->
      <el-form :model="form" label-width="110px" label-position="top">
        <el-form-item label="选择ZIP压缩包" required>
          <UploadFile
            ref="uploadRef"
            :uploadType="'zip'"
            :maxFileTips="'500MB'"
            :limitUploadNum="1"
            @file-change="handleFileChange"
          />
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        class="confirm-btn"
        :loading="importLoading"
        @click="handleImport"
      >
        保存
      </el-button>
      <el-button class="cancel-btn" @click="handleClose">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import UploadFile from '@/views/common/UploadFile.vue'  // 你的UploadFile组件路径
// 替换为新增的导入接口（后端解析ZIP）
import { importSampleFileAPI } from '@/api/data/sample'

export default {
  name: "SampleImport",
  components: { UploadFile },
  props: {
    sampleLibraryId: {  // 关联的样本库ID
      type: [String, Number],
      required: true
    },
    title: {
      type: String,
      default: "导入"
    },
    visible: { // 接收父组件传递的显隐状态
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {},
      importLoading: false,
      zipFile: null  // 选中的ZIP文件
    };
  },
  watch: {
    // 监听visible变化，重置弹窗状态
    visible(newVal) {
      if (!newVal) {
        this.resetDialog()
      }
    }
  },
  methods: {
    // 重置弹窗状态（关闭时清空文件、加载态等）
    resetDialog() {
      this.zipFile = null
      this.importLoading = false
      this.$refs.uploadRef?.clearFiles() // 清空上传组件的文件
    },

    // 监听UploadFile选择的文件
    handleFileChange(files) {
      if (files.length > 0) {
        console.log('file',files)
        this.zipFile = files[0].raw;  // 获取ZIP的原生File对象
      } else {
        this.zipFile = null;
      }
    },

    // 直接上传ZIP文件到后端
    async handleImport() {
      // 1. 基础校验
      if (!this.zipFile) {
        this.$message.warning("请选择ZIP压缩包！");
        return;
      }
      // 校验文件格式（前端兜底）
      const fileName = this.zipFile.name.toLowerCase();
      if (!fileName.endsWith('.zip')) {
        this.$message.warning("仅支持上传ZIP格式文件！");
        return;
      }

      this.importLoading = true;
      try {
        // 2. 构建FormData（传递样本库ID和ZIP文件）
        const formData = new FormData();
        formData.append('sampleLibraryId', this.sampleLibraryId); // 样本库ID（与后端参数名对齐）
        formData.append('file', this.zipFile); // 选中的ZIP文件

        // 3. 调用后端导入接口
        const res = await importSampleFileAPI(formData);

        // 4. 结果处理
        if (res.code === 200) {
          this.$message.success(res.msg || `ZIP包导入成功！`);
          this.$emit('refreshList');  // 通知父组件刷新列表
          this.handleClose(); // 导入成功后关闭弹窗
        } else {
          this.$message.error(res.msg || 'ZIP包导入失败');
        }
      } catch (err) {
        // 异常处理
        console.error("导入失败：", err);
        this.$message.error(`导入失败：${err.message || '服务器异常，请稍后重试'}`);
      } finally {
        this.importLoading = false;
      }
    },

    // 关闭弹窗：通知父组件更新visible状态
    handleClose() {
      this.$emit('closeDialog');
    }
  }
};
</script>

<style lang="scss" scoped>
/* 复用SampleForm的弹窗样式 */
.w500 ::v-deep .el-dialog {
  width: 500px;
  font-family: Source Han Sans CN, Source Han Sans CN;
}

::v-deep .el-dialog__header .el-dialog__title {
  font-size: 16px;
}

.tip-text {
  color: #909399;
  font-size: 12px;
  margin-top: 8px;
}

/* 复用按钮样式 */
.confirm-btn {
  width: 98px;
  height: 36px;
  background: #1F72EA;
  box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
  border-radius: 4px;
  color: #fff;
  border: none;
  font-size: 14px;
  transition: all 0.3s;

  &:hover {
    background: #4A8BFF;
    box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
  }
}

.cancel-btn {
  width: 98px;
  height: 36px;
  background: #E5E5E5;
  box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
  border-radius: 4px;
  color: #333;
  border: none;
  font-size: 14px;
  transition: all 0.3s;

  &:hover {
    background: #d0d0d0;
    box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
  }
}

::v-deep .el-dialog__footer {
  text-align: center;
}
</style>
