<template>
  <div>
    <div class="basic-info-title">
      <img src="@/assets/enterpriseLibrary/basic-info.png" alt="合同信息">
      <span>合同信息</span>
    </div>

    <el-form
      :model="detailData"
      ref="contractDetailForm"
      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.proName"
              class="form-control"
              :disabled="true"
              placeholder="--"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同签订时间">
            <el-date-picker
              v-model="detailData.contractSigningTime"
              type="date"
              value-format="yyyy-MM-dd"
              class="form-control"
              :disabled="true"
              placeholder="--"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同金额">
            <el-input
              v-model="detailData.contractAmount"
              class="form-control"
              :disabled="true"
              placeholder="--"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 建设地点 + 建设单位 + 建设单位联系方式 -->
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="建设地点">
            <el-input
              v-model="detailData.constructionSite"
              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.constructionUnit"
              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.constructionPhone"
              class="form-control"
              :disabled="true"
              placeholder="--"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

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

export default {
  name: 'ContractInfoDetail',
  components: { FileOrImageDisplay },  // 注册展示组件
  props: {
    detailData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 参考代码的表单数据结构，用于文件回显
      form: {
        fileList: [],
        url: ''
      }
    }
  },
  watch: {
    // 参考代码的监听逻辑：数据变化时更新文件展示
    detailData: {
      handler(newVal) {
        if (Object.keys(newVal).length > 0) {
          this.setDetailData(newVal)
        }
      },
      immediate: true  // 初始加载时执行
    }
  },
  methods: {
    // 参考代码的文件数据设置方法
    setDetailData() {
      const fileList = this.getFileList()
      this.form = {
        fileList: fileList,
        url: fileList.length > 0 ? fileList[0].lsFilePath : ''  // 优先使用预览路径
      }
    },
    // 参考代码的文件列表格式化方法
    getFileList() {
      // 从detailData中筛选合同类型文件
      const rawFileList = Array.isArray(this.detailData.fileList) ? this.detailData.fileList : []
      const contractFiles = rawFileList.filter(file => file && file.businessType === 'contract')

      // 格式化文件数据，适配FileOrImageDisplay组件
      return contractFiles.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-date-picker.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  color: #606266;
  cursor: not-allowed;
}

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