<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"
    >
      <!-- 竣工报告附件：文件展示组件 -->
      <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-col :span="8">
          <el-form-item label="中标通知书附件" class="form-item">
            <FileOrImageDisplay
              :label="''"
              :file="bidNoticeForm.fileList[0]"
              :image-url="bidNoticeForm.url"
            />
            <span v-if="bidNoticeForm.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-date-picker
              v-model="formData.startTime"
              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-date-picker
              v-model="formData.completionTime"
              type="date"
              value-format="yyyy-MM-dd"
              class="form-control"
              :disabled="true"
              placeholder="--"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>


  </div>
</template>

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

export default {
  name: 'CompletionAndBidInfoDetail',
  components: { FileOrImageDisplay },
  props: {
    detailData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 表单数据模型（用于绑定控件）
      formData: {
        startTime: '',
        completionTime: ''
      },
      // 竣工报告文件回显数据
      form: {
        fileList: [],
        url: ''
      },
      // 中标通知书文件回显数据
      bidNoticeForm: {
        fileList: [],
        url: ''
      }
    }
  },
  methods: {
    // 格式化文件列表（适配FileOrImageDisplay）
    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() {
      // 竣工报告文件
      const completionFiles = this.formatFileList('completion_report')
      this.form = {
        fileList: completionFiles,
        url: completionFiles.length > 0 ? completionFiles[0].lsFilePath : ''
      }

      // 中标通知书文件
      const bidNoticeFiles = this.formatFileList('bid_notice')
      this.bidNoticeForm = {
        fileList: bidNoticeFiles,
        url: bidNoticeFiles.length > 0 ? bidNoticeFiles[0].lsFilePath : ''
      }
    },

    // 设置时间数据（绑定到日期选择器）
    setTimeData() {
      this.formData.startTime = this.detailData.startTime || ''
      this.formData.completionTime = this.detailData.completionTime || ''
    }
  },
  watch: {
    detailData: {
      handler(newVal) {
        if (Object.keys(newVal).length > 0) {
          this.setFileData()
          this.setTimeData()
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</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-bottom: 20px;
}

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