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

    <el-form
      :model="formData"
      :rules="rules"
      ref="otherForm"
      label-width="110px"
      label-position="top"
    >
      <!-- 项目经理 -->
      <el-form-item label="项目经理" prop="projectManager">
        <el-select
          v-model="formData.projectManager"
          placeholder="请选择项目经理"
          class="form-control"
        >
          <el-option
            v-for="manager in projectManagerOptions"
            :key="manager.value"
            :label="manager.label"
            :value="manager.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- 项目类型 -->
      <el-form-item label="项目类型" prop="proType">
        <el-select
          v-model="formData.proType"
          placeholder="请选择项目类型"
          class="form-control"
        >
          <el-option
            v-for="type in proTypeOptions"
            :key="type.value"
            :label="type.label"
            :value="type.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- 电压等级 -->
      <el-form-item label="电压等级" prop="voltageLevel">
        <el-select
          v-model="formData.voltageLevel"
          placeholder="请选择电压等级"
          class="form-control"
        >
          <el-option
            v-for="level in voltageLevelOptions"
            :key="level.value"
            :label="level.label"
            :value="level.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- 项目概况 -->
      <el-form-item label="项目概况" prop="projectOverview">
        <el-input
          v-model="formData.projectOverview"
          placeholder="请输入项目概况"
          type="textarea"
          rows="6"
          class="form-control"
          maxlength="500"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'OtherInfoEdit',
  props: {
    projectManagerOptions: {
      type: Array,
      default: () => []  // 默认空数组，避免undefined
    }
  },
  data() {
    return {
      formData: {
        projectManager: '',
        proType: '',
        voltageLevel: '',
        projectOverview: ''
      },
      rules: {
        projectManager: [
          { required: true, message: '请选择项目经理', trigger: 'change' }
        ],
        proType: [
          { required: true, message: '请选择项目类型', trigger: 'change' }
        ],
        voltageLevel: [
          { required: true, message: '请选择电压等级', trigger: 'change' }
        ],
        projectOverview: [
          { required: true, message: '请输入项目概况', trigger: 'blur' },
          { max: 500, message: '项目概况不能超过500个字符', trigger: 'blur' }
        ]
      },
      proTypeOptions: [
        { label: '输变电工程', value: '输变电工程' },
        { label: '配电工程', value: '配电工程' },
        { label: '发电工程', value: '发电工程' }
      ],
      voltageLevelOptions: [
        { label: '110kV', value: '110kV' },
        { label: '220kV', value: '220kV' },
        { label: '500kV', value: '500kV' },
        { label: '1000kV', value: '1000kV' }
      ]
    }
  },

  created() {
    // 组件创建后，加载电压等级字典
    this.loadVoltageLevelDict()
  },

  methods: {
    loadVoltageLevelDict() {
      // getDicts 的参数是字典类型编码：voltage_level
      this.getDicts('voltage_level').then(response => {
        this.voltageLevelOptions = response.data.map(item => ({
          label: item.dictLabel,
          value: item.dictLabel
        }))
      }).catch(error => {
        console.error('加载电压等级字典失败：', error)
      })
    },
    // 接收父组件传递的详情数据并回显
    setFormData(data) {
      this.formData = {
        projectManager: data.projectManager || '',
        proType: data.proType || '',
        voltageLevel: data.voltageLevel || '',
        projectOverview: data.projectOverview || ''
      }
    },

    // 表单验证
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.otherForm.validate((valid) => {
          if (valid) {
            resolve(this.formData)
          } else {
            reject(new Error('其他信息填写不完整'))
          }
        })
      })
    },

    // 重置表单
    resetForm() {
      this.$refs.otherForm.resetFields()
    }
  }
}
</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;
  }
}

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

.form-control {
  width: 100%;
}

.el-form-item {
  margin-bottom: 20px;
}
</style>
