<template>
  <div>
    <div class="basic-info-title">
      <img src="@/assets/enterpriseLibrary/basic-info.png" alt="财务报告">
      <span>财务报告</span>
    </div>

    <el-form
      :model="formData"
      label-width="110px"
      label-position="top"
      class="detail-form"
    >
      <!-- 财务报告附件预览：使用FileOrImageDisplay组件 -->
      <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>

      <!-- 财务报告基本信息 -->
      <div class="info-section">

        <el-row :gutter="24" class="info-row">
          <el-col :span="8" class="info-col">
            <el-form-item label="文件名" class="info-item">
              <el-input
                v-model="formData.fileName"
                class="form-control"
                :disabled="true"
                placeholder="--"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="info-col">
            <el-form-item label="报告年份" class="info-item">
              <el-date-picker
              v-model="formattedReportYear"
              type="year"
              format="yyyy"
              value-format="yyyy"
              :disabled="true"
              placeholder="--"
              class="form-control"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

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

export default {
  name: 'FinanceReportDetail',
  components: { FileOrImageDisplay },
  props: {
    // 接收详情数据（与编辑页数据结构一致）
    detailData: {
      type: Object,
      default: () => ({
        fileList: [],  // 后端返回的文件列表
        fileName: '',
        reportYear: ''
      })
    }
  },
  data() {
    return {
      // 表单数据模型（用于绑定控件）
      formData: {
        fileName: '',
        reportYear: ''
      },
      // 财务报告文件回显数据
      form: {
        fileList: [],
        url: ''
      }
    }
  },

  computed: {

    formattedReportYear() {
      // 如果 reportYear 存在且不为空，则转换为字符串
      if (this.formData.reportYear) {
        return String(this.formData.reportYear);
      }
      return '';
    }
  },

  methods: {
    /**
     * 格式化文件列表：仅保留财务报告类型的附件（解决回显错乱）
     * @param {String} businessType - 业务类型标识（财务报告为finance_report）
     * @returns {Array} 筛选并格式化后的文件列表
     */
    formatFileList(businessType) {
      const rawFileList = Array.isArray(this.detailData.fileList) ? this.detailData.fileList : []
      // 核心：仅保留业务类型为财务报告的文件
      const targetFiles = rawFileList.filter(file => file && file.businessType === businessType)

      return targetFiles.map(item => ({
        name: item.fileName || '未知文件',
        filePath: item.filePath || '',
        lsFilePath: item.lsFilePath || '',  // 预览路径
        fileType: item.fileType || '2',     // 文件类型（默认文档）
        id: item.sourceId + ''
      }))
    },

    // 设置文件回显数据
    setFileData() {
      // 筛选财务报告文件（businessType=finance_report）
      const financeFiles = this.formatFileList('finance_report')
      this.form = {
        fileList: financeFiles,
        url: financeFiles.length > 0 ? financeFiles[0].lsFilePath : ''
      }
    },

    // 设置基本信息数据（绑定到输入框）
    setBasicData() {
      this.formData = {
        fileName: this.detailData.fileName || '',
        reportYear: this.detailData.reportYear || ''
      }
    }
  },
  watch: {
    // 监听详情数据变化，实时更新回显
    detailData: {
      handler(newVal) {
        if (Object.keys(newVal).length > 0) {
          this.setFileData()    // 更新文件回显
          this.setBasicData()   // 更新基本信息
        }
      },
      immediate: true,  // 初始化时执行
      deep: true        // 深度监听对象变化
    }
  }
}
</script>

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

.detail-form {
  padding: 0 15px;
  margin-bottom: 20px;
}

.form-control {
  width: 100%;
}

.form-item {
  width: 100%;
}

// 基本信息区域样式
.info-section {
  margin-top: 20px;

  .section-title {
    font-size: 16px;
    color: #4e5969;
    font-weight: 500;
    margin-bottom: 15px;
    display: flex;
    align-items: center;

    &::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 16px;
      background: #409eff;
      border-radius: 2px;
      margin-right: 8px;
    }
  }

  .info-row {
    margin-bottom: 15px;
  }

  .info-col {
    padding: 0 10px;
  }

  .info-item {
    margin-bottom: 0; // 去除默认间距
  }
}

// 禁用状态样式（与参考代码一致）
::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  color: #606266;
  cursor: not-allowed;
}

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