<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="data-section">

        <el-row :gutter="24" class="data-row">
          <el-col :span="8" class="data-col">
            <el-form-item label="营业收入" class="data-item">
              <el-input
                v-model="formData.operatingIncome"
                class="form-control"
                :disabled="true"
                placeholder="--"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="data-col">
            <el-form-item label="流动资产" class="data-item">
              <el-input
                v-model="formData.currentAssets"
                class="form-control"
                :disabled="true"
                placeholder="--"
              ></el-input>
            </el-form-item>
          </el-col>

        <el-col :span="8" class="data-col">
            <el-form-item label="流动负债" class="data-item">
              <el-input
                v-model="formData.currentLiabilities"
                class="form-control"
                :disabled="true"
                placeholder="--"
              ></el-input>
            </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="24" class="data-row">
          <el-col :span="8" class="data-col">
            <el-form-item label="流动比率" class="data-item">
              <el-input
                v-model="formData.currentRatio"
                class="form-control"
                :disabled="true"
                placeholder="--"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8" class="data-col">
            <el-form-item label="净利润" class="data-item">
              <el-input
                v-model="formData.netProfit"
                class="form-control"
                :disabled="true"
                placeholder="--"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="data-col">
            <el-form-item label="股东权益" class="data-item">
              <el-input
                v-model="formData.shareholdersEquity"
                class="form-control"
                :disabled="true"
                placeholder="--"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24" class="data-row">
          <el-col :span="8" class="data-col">
            <el-form-item label="净资产收益率" class="data-item">
              <el-input
                v-model="formData.returnOnNetAssets"
                class="form-control"
                :disabled="true"
                placeholder="--"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="data-col">
            <el-form-item label="负债总额" class="data-item">
              <el-input
                v-model="formData.totalLiabilities"
                class="form-control"
                :disabled="true"
                placeholder="--"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8" class="data-col">
            <el-form-item label="资产总额" class="data-item">
              <el-input
                v-model="formData.totalAssets"
                class="form-control"
                :disabled="true"
                placeholder="--"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="data-row">
          <el-col :span="8" class="data-col">
            <el-form-item label="资产负债率" class="data-item">
              <el-input
                v-model="formData.assetLiabilityRatio"
                class="form-control"
                :disabled="true"
                placeholder="--"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

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

export default {
  name: 'FinancialStatementDetail',
  components: { FileOrImageDisplay },
  props: {
    // 接收详情数据（与编辑页数据结构一致）
    detailData: {
      type: Object,
      default: () => ({
        fileList: [],  // 后端返回的文件列表
        operatingIncome: '',
        currentAssets: '',
        currentLiabilities: '',
        currentRatio: '',
        netProfit: '',
        shareholdersEquity: '',
        returnOnNetAssets: '',
        totalLiabilities: '',
        totalAssets: '',
        assetLiabilityRatio: ''
      })
    }
  },
  data() {
    return {
      // 表单数据模型（用于绑定控件）
      formData: {
        operatingIncome: '',
        currentAssets: '',
        currentLiabilities: '',
        currentRatio: '',
        netProfit: '',
        shareholdersEquity: '',
        returnOnNetAssets: '',
        totalLiabilities: '',
        totalAssets: '',
        assetLiabilityRatio: ''
      },
      // 财务报表文件回显数据
      form: {
        fileList: [],
        url: ''
      }
    }
  },
  methods: {
    /**
     * 格式化文件列表：仅保留财务报表类型的附件（解决回显错乱）
     * @param {String} businessType - 业务类型标识（财务报表为financial_statement）
     * @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=financial_statement）
      const financialFiles = this.formatFileList('financial_statement')
      this.form = {
        fileList: financialFiles,
        url: financialFiles.length > 0 ? financialFiles[0].lsFilePath : ''
      }
    },

    // 设置财务数据（绑定到输入框）
    setFinancialData() {
      this.formData = {
        operatingIncome: this.detailData.operatingIncome || '',
        currentAssets: this.detailData.currentAssets || '',
        currentLiabilities: this.detailData.currentLiabilities || '',
        currentRatio: this.detailData.currentRatio || '',
        netProfit: this.detailData.netProfit || '',
        shareholdersEquity: this.detailData.shareholdersEquity || '',
        returnOnNetAssets: this.detailData.returnOnNetAssets || '',
        totalLiabilities: this.detailData.totalLiabilities || '',
        totalAssets: this.detailData.totalAssets || '',
        assetLiabilityRatio: this.detailData.assetLiabilityRatio || ''
      }
    }
  },
  watch: {
    // 监听详情数据变化，实时更新回显
    detailData: {
      handler(newVal) {
        if (Object.keys(newVal).length > 0) {
          this.setFileData()       // 更新文件回显
          this.setFinancialData()  // 更新财务数据
        }
      },
      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%;
}

// 数据区域样式
.data-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;
    }
  }

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

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

  .data-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>
