<template>
  <div>
    <div class="basic-info-title">
      <span>其他信息</span>
    </div>

    <el-form
      :model="detailData"
      label-width="110px"
      label-position="top"
      class="detail-form"
    >

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="团队业绩证明" class="form-item">
            <FileOrImageDisplay
              :label="''"
              :file="form.fileList[0]"
              :image-url="form.url"
            />
            <span v-if="form.fileList.length === 0" class="no-file-tip">无附件</span>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 项目经理 + 项目类型：使用输入框（禁用） -->
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="项目经理">
            <el-input
              v-model="detailData.projectManager"
              class="form-control"
              :disabled="true"
              placeholder="无数据"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目类型">
            <el-input
              v-model="detailData.proType"
              class="form-control"
              :disabled="true"
              placeholder="无数据"
            ></el-input>
          </el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="电压等级">
            <el-input
              v-model="detailData.voltageLevel"
              class="form-control"
              :disabled="true"
              placeholder="无数据"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <!-- 项目概况：使用文本域（禁用） -->
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="项目概况">
            <el-input
              v-model="detailData.projectOverview"
              type="textarea"
              class="form-control"
              :disabled="true"
              placeholder="无数据"
              rows="4"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
// 引入文件展示组件
import FileOrImageDisplay from '@/views/common/FileOrImageDisplay.vue'

export default {
  name: 'OtherInfoDetail',
  components: { FileOrImageDisplay },  // 注册文件展示组件
  props: {
    detailData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 用于文件回显的数据结构
      form: {
        fileList: [],
        url: ''
      }
    }
  },
  watch: {
    // 监听详情数据变化，更新文件展示
    detailData: {
      handler(newVal) {
        if (Object.keys(newVal).length > 0) {
          this.setDetailData()
        }
      },
      immediate: true  // 初始加载时执行
    }
  },
  methods: {
    // 设置详情数据，处理文件回显
    setDetailData() {
      const fileList = this.getFileList()
      this.form = {
        fileList: fileList,
        url: fileList.length > 0 ? fileList[0].lsFilePath : ''  // 优先使用预览路径
      }
    },
    // 格式化文件列表，适配FileOrImageDisplay组件
    getFileList() {
      // 从detailData中筛选业绩证明类型的文件
      const rawFileList = Array.isArray(this.detailData.fileList) ? this.detailData.fileList : []
      const performanceFiles = rawFileList.filter(file => file && file.businessType === 'team_performance')

      // 格式化文件数据
      return performanceFiles.map(item => ({
        name: item.fileName || '未知文件',
        filePath: item.filePath || '',  // 文件实际路径
        lsFilePath: item.lsFilePath || '',  // 文件预览路径
        fileType: item.fileType || '2',  // 2表示文档类型
        id: item.sourceId + ''
      }))
    }
  }
}
</script>

<style scoped lang="scss">
.basic-info-title {
  display: flex;
  align-items: center;
  margin: 10px 0;
  span {
    margin: 0 5px;
    font-size: 20px;
  }
  img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }
}

.detail-form {
  margin-top: 15px;
}

.form-control {
  width: 100%;
}

.form-item {
  width: 100%;
}

// 禁用状态样式
::v-deep .el-input.is-disabled .el-input__inner,
::v-deep .el-textarea.is-disabled .el-textarea__inner {
  background-color: #f5f7fa;
  color: #606266;
  cursor: not-allowed;
}

// 无附件提示样式
.no-file-tip {
  color: #909399;
  font-size: 14px;
}
</style>
