<template>
  <div class="examination batch-edit-wrap">
    <el-dialog
      @close="closeDialog"
      :visible.sync="recordShowFlag"
      customClass="dialog_wrap"
      :close-on-click-modal="false"
    >
      <div slot="title" class="titleBox">
        <i class="el-icon-document" style="font-size: 20px"></i>
        <span style="margin-left: 10px; font-size: 18px">批量上传文件记录信息</span>
      </div>

      <el-form
        ref="editFormRef"
        label-width="65px"
        :inline="false"
        :rules="ruleValidate"
        :model="batchForm"
      >
        <el-form-item prop="uploadType" label="上传方式">
          <el-select
            v-model="batchForm.uploadType"
            size="small"
            style="width: 180px"
          >
            <el-option label="文件名不变" value="1"></el-option>
            <el-option label="系统随机生成文件名" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="fileDate" label="文件日期">
          <el-date-picker
            v-model="batchForm.fileDate"
            size="small"
            type="date"
            style="width: 200px"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>

        <el-form-item prop="audit" label="是否审核">
          <el-select
            v-model="batchForm.audit"
            filterable
            collapse-tags
            size="small"
            style="width: 100px"
          >
            <el-option
              v-for="(item, index) in isSmpType"
              :key="index"
              :label="item.isSmp"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="isTemp" label="是否模板">
          <el-select v-model="batchForm.isTemp" filterable collapse-tags size="small" style="width: 80px">
            <el-option v-for="(item, index) in isTempList" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="memo" label="备注（批量）">
          <el-input
            v-model="batchForm.memo"
            clearable
            size="small"
            style="width: 300px"
            placeholder="请输入批量备注（所有文件共用）"
          ></el-input>
        </el-form-item>

        <!-- 文件上传：本地暂存、校验是否选文件 -->
        <el-form-item label="文件上传" prop="fileList">
          <el-upload
            class="upload-demo"
            action="javascript:void(0);"
            multiple
            show-file-list
            :file-list="selectedFileList"
            :on-change="handleFileChange"
            :on-remove="handleFileRemove"
            :before-upload="beforeUploadCheck"
            :auto-upload="false"
            ref="uploadRef"
          >
            <el-button type="primary" size="mini" icon="el-icon-upload2">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">
              支持多文件批量选择，选中暂存本地，确认提交统一上传，单个文件≤10MB
            </div>
          </el-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitAll">提交</el-button>
        <el-button size="mini" type="default" @click="closeDialog">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCookie } from '@/utils/util.js';
import { cookieUserId, cookieUserName } from '@/config/config.js';
import { Message } from 'element-ui';

// 全局用户信息
let userName = getCookie(cookieUserName) || '';
let userId = getCookie(cookieUserId) || '';

export default {
  name: 'BatchFileUpload',
  props: {
    recordShowFlag: {
      type: Boolean,
      default: false
    },
    recordObj: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    var _this = this;
    return {
      // 表单公共数据：和文件一起一次提交给后端
      batchForm: {
        uploadType: '1', // 上传方式：1-原名，2-随机名
        fileDate: _this.formatDate(new Date()), // 文件日期
        memo: '', // 备注
        audit: '1', // 是否审核：1-是，0-否,
        isTemp: '是'
      },
      batchFormCache: {
        uploadType: '1', // 上传方式：1-原名，2-随机名
        fileDate: _this.formatDate(new Date()), // 文件日期
        memo: '', // 备注
        audit: '1', // 是否审核：1-是，0-否,
        isTemp: '是'
      },
      selectedFileList: [], // 本地暂存的文件列表（核心校验）
      isSmpType: [
        { id: "0", isSmp: "否" },
        { id: "1", isSmp: "是" },
      ],
      isTempList: [
        { value: "否", label: "否" },
        { value: "是", label: "是" },
      ],
      // 仅校验：本地是否选文件、表单必填项是否填
      ruleValidate: {
        uploadType: [{ required: true, message: '请选择上传方式', trigger: 'change' }],
        fileDate: [{ required: true, message: '文件日期不能为空', trigger: 'change' }],
        audit: [{ required: true, message: '请选择审核状态', trigger: 'change' }],
        fileList: [{
          validator: function(rule, val, cb) {
            if (_this.selectedFileList.length === 0) {
              cb(new Error('请至少选择一个文件'));
            } else {
              cb();
            }
          },
          trigger: ['change', 'blur']
        }]
      },
      apiConfig: {
        upload: 'pass/baseManagement/v1/file/uploadMultipart' // 唯一接口：一次传表单+文件
      },
      uploadConfig: {
        maxSize: 10, // 单个文件10MB，和后端一致
        timeout: 60000 // 60秒超时
      }
    };
  },
  methods: {
    // 格式化日期：yyyy-MM-dd
    formatDate(date) {
      if (!date || !(date instanceof Date)) date = new Date();
      var y = date.getFullYear();
      var m = (date.getMonth() + 1) < 10 ? "0" + (date.getMonth() + 1) : (date.getMonth() + 1);
      var d = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return y + "-" + m + "-" + d;
    },

    // 更新本地暂存文件：严格过滤有效文件
    handleFileChange(file, fileList) {
      this.selectedFileList = fileList.filter(function(item) {
        return item.status !== 'removed' && item.raw && item.raw.name && item.raw.size > 0;
      });
    },

    // 移除文件：同步更新本地暂存列表
    handleFileRemove(file, fileList) {
      this.handleFileChange(null, fileList);
    },

    // 选择文件前：仅校验大小，不上传
    beforeUploadCheck(file) {
      var isLtMaxSize = file.size / 1024 / 1024 < this.uploadConfig.maxSize;
      if (!isLtMaxSize) {
        Message.error('文件' + file.name + '超过' + this.uploadConfig.maxSize + 'MB，无法选择');
        return false;
      }
      return true;
    },

    // 核心：构造FormData（表单数据+多文件）+ 原请求写法（后端能接收）
    submitAll() {
      var _this = this;
      // 1. 先做表单校验（必填项+是否选文件）
      if (!_this.$refs.editFormRef) {
        Message.warning('表单未加载完成，请稍候');
        return;
      }
      _this.$refs.editFormRef.validate(function(valid) {
        if (!valid) return;

        // 2. 再次过滤有效文件，防止脏数据
        var validFiles = [];
        for (var i = 0; i < _this.selectedFileList.length; i++) {
          var f = _this.selectedFileList[i];
          if (f.raw && f.raw.name && f.raw.size > 0) {
            validFiles.push(f);
          }
        }
        if (validFiles.length === 0) {
          Message.warning('无有效文件可上传');
          return;
        }

        // 3. 构造FormData：【原请求写法不变】+ 追加表单所有数据
        var formData = new FormData();
        // 第一步：追加表单公共数据（和文件一起传，后端@RequestParam接收）
        formData.append('uploadType', _this.batchForm.uploadType);
        formData.append('fileDate', _this.batchForm.fileDate);
        formData.append('memo', _this.batchForm.memo || '');
        formData.append('audit', _this.batchForm.audit);
        formData.append('fileNo', _this.batchForm.fileNo);
        formData.append('tenantNo', _this.batchForm.tenantNo);
        formData.append('isTemp', _this.batchForm.isTemp);
        // 第二步：追加多文件【原写法不变】- 相同key=file，多次append原始文件
        for (var j = 0; j < validFiles.length; j++) {
          var fileItem = validFiles[j];
          formData.append('file', fileItem.raw, fileItem.raw.name);
        }

        // 4. 发起请求【完全沿用原请求写法，不做任何修改】
        Message.info('开始提交（表单+文件），请勿关闭弹窗...');
        _this.axios({
          url: _this.apiConfig.upload,
          method: 'post',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          timeout: _this.uploadConfig.timeout,
          transformRequest: [function(data) {
            return data;
          }]
        }).then(function(res) {
          // 适配后端RESTfulResult返回结构
          if (res && res.status === 'succeed') {
            Message.success('提交结果: ' + res.data);
            _this.$emit('refresh'); // 通知父组件刷新列表
            _this.closeDialog(); // 关闭弹窗并重置
          } else {
            Message.error('提交失败：' + (response.message || '后端返回异常'));
          }
        }).catch(function(err) {
          Message.error('提交异常：' + (err.message || '网络错误'));
          console.error('提交报错详情：', err);
        });
      });
    },

    // 关闭弹窗：重置所有状态
    closeDialog() {
      this.selectedFileList = [];
      this.batchForm = {
        uploadType: '1',
        fileDate: this.formatDate(new Date()),
        memo: '',
        audit: '1'
      };
      if (this.$refs.editFormRef) {
        this.$refs.editFormRef.resetFields();
      }
      if (this.$refs.uploadRef) {
        this.$refs.uploadRef.clearFiles();
      }
      this.$emit('close');
    },
    getYNM(date) {
      let year = date.getFullYear().toString();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      return `${year}-${month}-${day}`;
    },
  },
  // 弹窗关闭时自动重置（兜底）
  watch: {
    recordShowFlag: function(newVal) {
      if (!newVal) {
        this.closeDialog();
      }
    },
    recordObj(newVal, oldVal) {
      this.batchForm = { ...this.batchFormCache, ...newVal }
      if (this.batchForm.fileDate == null || this.batchForm.fileDate == "") {
        this.batchForm.fileDate = this.getYNM(new Date())
      }
    }
  }
};
</script>

<style scoped>
.batch-edit-wrap .el-icon-close { display: none; }
.batch-edit-wrap .el-dialog__header { padding-top: 0; padding-bottom: 10px; }
.dialog_wrap { width: 920px !important; }
.dialog_wrap .el-dialog__body { padding: 15px 20px; }
.dialog_wrap .el-dialog__footer { text-align: center; padding: 10px 20px; }
.upload-demo { margin-top: 8px; }
.upload-demo >>> .el-upload-list { max-height: 200px; overflow-y: auto; margin-top: 6px; }
.upload-demo >>> .el-upload__tip { font-size: 12px; color: #909399; margin-top: 4px; }
.el-form-item { margin-bottom: 12px; }
</style>
