<template>
  <div class="file-container">
    <div class="basic-info-title">
      <div class="title-content">
        <img src="@/assets/enterpriseLibrary/basic-info.png" alt="项目文件">
        <span>{{ title }}</span>
      </div>
      <el-button
        type="text"
        icon="el-icon-plus"
        class="add-tab-btn"
        @click="handleAddTab"
        :disabled="fileTabs.length >= 5"
      >
        添加文件
      </el-button>
    </div>

    <el-tabs
      v-model="activeTabIndex"
      type="card"
      class="file-tabs"
      @tab-remove="handleRemoveTab"
      v-on="isEditMode ? { 'tab-click': handleTabChange } : {}"
    >
      <el-tab-pane
        v-for="(tab, index) in fileTabs"
        :key="index"
        :label="tab.formData.fileName || '文件 ' + (index + 1)"
        :name="index.toString()"
        closable
      >
        <el-form
          :model="tab.formData"
          :rules="rules"
          :ref="`projectFileForm_${index}`"
          label-width="120px"
          label-position="top"
          class="file-form"
        >
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="组成文件名称" prop="fileName">
                <el-input
                  v-model="tab.formData.fileName"
                  placeholder="请输入"
                  @input="handleFileNameChange(index)"
                  @change="handleFileNameChange(index)"
                  show-word-limit
                  maxlength="64"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="文件类型" prop="compositionFileType">
                <el-select
                  v-model="tab.formData.compositionFileType"
                  placeholder="请选择文件类型"
                  clearable
                  @change="handleTypeChange(index)"
                >
                  <el-option
                    v-for="item in compositionFileTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="文件" prop="fileList">
                <!-- 直接绑定 fileList -->
                <UploadFile
                  :fileList="tab.formData.fileList"
                  :fileUploadRule="fileUploadRule"
                  @file-change="(files, type) => handleFileChange(files, index)"
                  @del-file="(file) => handleDelFile(file, index)"
                  :uploadType="uploadType"
                  :maxFileTips="maxFileTips"
                  type="project_file"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import UploadFile from '@/views/common/UploadFile.vue'

export default {
  name: 'ProjectFile',
  components: { UploadFile },
  props: {
    title: {
      type: String,
      default: '模板组成-项目文件'
    },

    isEditMode: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      delComposition: [], // 新增：存储需要删除的compositionId
      tabFiles: [],
      uploadType: 'doc、docx、pdf、xls、xlsx、wps',
      maxFileTips: '50MB',
      fileUploadRule: { fileUploadType: 'project_file', suffix: 'template' },
      activeTabIndex: '0',
      fileTabs: [
        {
          formData: {
            compositionId: '', // 新增：存储compositionId
            compositionType: '1',
            fileName: '',
            compositionFileType: '',
            fileList: [],
            delFileList: []
          }
        }
      ],
      rules: {
        fileName: [
          { required: true, message: '请输入组成文件名称', trigger: 'blur' }
        ],
        compositionFileType: [
          { required: true, message: '请选择文件类型', trigger: 'change' }
        ],
        fileList: [
          { required: true, message: '请上传文件', trigger: 'change' }
        ]
      },
      compositionFileTypeOptions: []
    }
  },

  created() {
    this.loadFileTypeDict()
  },

  methods: {
    loadFileTypeDict() {
      this.getDicts('file_type').then(response => {
        this.compositionFileTypeOptions = response.data.map(item => ({
          label: item.dictLabel,
          value: item.dictLabel
        }))
      }).catch(error => {
        console.error('加载文件类型字典失败：', error)
      })
    },

    handleAddTab() {
      this.fileTabs.push({
        formData: {
          compositionId: '', // 新增：新增Tab默认空ID
          compositionType: '1',
          fileName: '',
          compositionFileType: '',
          fileList: [],
          delFileList: []
        }
      })
      this.activeTabIndex = (this.fileTabs.length - 1).toString()
    },

    handleRemoveTab(index) {
      if (this.fileTabs.length <= 1) {
        this.$message.warning('至少保留一个文件')
        return
      }

      // 新增：删除Tab时收集compositionId（编辑模式且有ID时）
      const tab = this.fileTabs[index]
      if (this.isEditMode && tab.formData.compositionId) {
        if (!this.delComposition.includes(tab.formData.compositionId)) {
          this.delComposition.push(tab.formData.compositionId)
        }
      }

      this.fileTabs.splice(index, 1)
      // 如果删除的是当前激活的tab，需要重新设置激活态
      if (this.activeTabIndex === index.toString()) {
        // 激活最后一个tab，如果删除后还有的话
        this.activeTabIndex = this.fileTabs.length > 0 ? (this.fileTabs.length - 1).toString() : '0';
      }
    },

    handleFileChange(files, index) {
      const oldFileList = this.fileTabs[index].formData.fileList
      this.fileTabs[index].formData.fileList = files;

      // 新增：替换文件时收集compositionId（编辑模式且有旧文件和ID时）
      if (this.isEditMode && oldFileList.length > 0 && this.fileTabs[index].formData.compositionId) {
        const compositionId = this.fileTabs[index].formData.compositionId
        if (!this.delComposition.includes(compositionId)) {
          this.delComposition.push(compositionId)
        }
        // 替换文件后重置当前Tab的compositionId（表示新增文件）
        this.fileTabs[index].formData.compositionId = ''
      }

      if (files.length > 0 && files[0].status === 'success') {
        const currentTab = this.fileTabs[index];
        files[0].compositionName = currentTab.formData.fileName;
        files[0].compositionFileType = currentTab.formData.compositionFileType;
        if (files[0].response) {
          files[0].response.businessType = 'project_file';
        }
      }
    },

    handleDelFile(file, index) {
      const filePath = file.response?.fileRes?.filePath || file.filePath || '';
      if (filePath) {
        const delFileList = this.fileTabs[index].formData.delFileList;
        if (!delFileList.includes(filePath)) {
          delFileList.push(filePath)
        }
      }

      // 新增：删除文件时收集compositionId（编辑模式且有ID时）
      if (this.isEditMode && this.fileTabs[index].formData.compositionId) {
        const compositionId = this.fileTabs[index].formData.compositionId
        if (!this.delComposition.includes(compositionId)) {
          this.delComposition.push(compositionId)
          console.log('ttt',this.delComposition)
        }
        // 删除文件后重置当前Tab的compositionId
        this.fileTabs[index].formData.compositionId = ''
      }
    },

    handleFileNameChange(index) {
      const currentTab = this.fileTabs[index];
      const fileList = currentTab.formData.fileList;
      if (fileList.length > 0) {
        fileList[0].compositionName = currentTab.formData.fileName;
      }
    },

    handleTypeChange(index) {
      const currentTab = this.fileTabs[index];
      const fileList = currentTab.formData.fileList;
      if (fileList.length > 0) {
        fileList[0].compositionFileType = currentTab.formData.compositionFileType;
      }
    },

    // 切换Tab时不再执行任何操作
    handleTabChange(tab, event) {
      // 可以保留日志用于调试
      const index = tab.index;
      console.log(`切换到了第 ${index + 1} 个 tab`);
      this.setFormData(this.tabFiles)
    },

    setFormData(projectFiles) {
      this.tabFiles = projectFiles
      // 重置删除集合
      this.delComposition = []
      // 直接清空并重建 fileTabs
      this.fileTabs = [];

      if (!projectFiles || projectFiles.length === 0) {
        this.fileTabs.push({
          formData: {
            compositionId: '', // 新增
            compositionType: '1',
            fileName: '',
            compositionFileType: '',
            fileList: [],
            delFileList: []
          }
        });
        this.activeTabIndex = '0';
        return;
      }

      // 根据传入的数据，创建新的 tabs
      projectFiles.forEach((file) => {
        const formattedFile = {
          name: file.fileName || file.name,
          size: file.fileSize || file.size,
          status: 'success',
          percentage: 100,
          filePath: file.filePath,
          lsFilePath: file.lsFilePath,
          url: file.lsFilePath,
          compositionName: file.compositionName || file.fileName || '',
          compositionFileType: file.compositionFileType || '',
          compositionType: '1',
          businessType: 'project_file',
        };

        this.fileTabs.push({
          formData: {
            compositionId: file.compositionId || '', // 新增：解析后端返回的compositionId
            compositionType: '1',
            fileName: formattedFile.compositionName,
            compositionFileType: formattedFile.compositionFileType,
            fileList: [formattedFile],
            delFileList: []
          }
        });
      });

      this.activeTabIndex = projectFiles.length > 0 ? '0' : '0';
    },

    validate() {
      return new Promise(async (resolve, reject) => {
        try {
          const allFormData = []
          for (let i = 0; i < this.fileTabs.length; i++) {
            const formRef = this.$refs[`projectFileForm_${i}`]?.[0]
            if (!formRef) continue

            await new Promise((validResolve, validReject) => {
              formRef.validate((valid) => {
                if (valid) {
                  validResolve()
                } else {
                  this.activeTabIndex = i.toString()
                  validReject(new Error(`文件 ${i + 1} 信息填写不完整`))
                }
              })
            })
            allFormData.push({
              ...this.fileTabs[i].formData,
              // 携带删除标识（可选，根据后端需求）
              isDeleted: false
            })
          }
          // 返回数据包含需要删除的compositionId
          resolve({
            formData: allFormData,
            delComposition: [...new Set(this.delComposition)] // 去重
          })
        } catch (error) {
          reject(error)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
/* 样式部分保持不变 */
.file-container {
  width: 100%;
}

.basic-info-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 20px;

  .title-content {
    display: flex;
    align-items: center;
  }

  span {
    margin-left: 8px;
    font-size: 18px;
    font-weight: 500;
    color: #1d2129;
  }

  img {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }
}

.file-tabs {
  margin-bottom: 20px;
  width: 100%;
}

.add-tab-btn {
  color: #409EFF;
  border: 1px dashed #409EFF;
  padding: 6px 12px;
  border-radius: 4px;
  white-space: nowrap;
}

.file-form {
  padding: 20px 10px 0;
}

::v-deep .el-tabs__item {
  padding: 0 20px;
}

::v-deep .el-tabs__close-btn {
  margin-left: 8px;
}
</style>
