<template>
    <div>
        <div class="basic-info-title">
            <img src="@/assets/enterpriseLibrary/basic-info.png" alt="基础信息">
            <span>基础信息</span>
        </div>
        <el-form :model="form" :rules="rules" ref="basicInfoForm" label-width="110px" label-position="top">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item label="电压等级" prop="voltageLevel">
                        <el-select v-model="form.voltageLevel" placeholder="请选择电压等级" class="form-item">
                            <el-option v-for="item in dict.type.voltage_level" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="建设性质" prop="natureConstruction">
                        <el-select v-model="form.natureConstruction" placeholder="请选择工程性质" class="form-item" multiple>
                            <el-option v-for="item in dict.type.construction_nature" :key="item.value"
                                :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="结构形式" prop="structuralForm">
                        <el-select v-model="form.structuralForm" placeholder="请选择结构形式" class="form-item">
                            <el-option v-for="item in dict.type.structural_form" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item label="基础形式" prop="basicForm">
                        <el-select v-model="form.basicForm" placeholder="请选择基础形式" class="form-item">
                            <el-option v-for="item in dict.type.basic_form" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>


        </el-form>
    </div>
</template>

<script>
export default {
    name: 'BasicInfoTechnical',
    props: {
        detailData: {
            type: Object,
            default: () => { }
        }
    },
    dicts: ['voltage_level', 'construction_nature', 'structural_form', 'basic_form'],
    data() {
        return {
            form: {
                voltageLevel: undefined,
                natureConstruction: [],
                structuralForm: undefined,
                basicForm: undefined,
            },
            rules: {
                voltageLevel: [
                    { required: true, message: '请选择电压等级', trigger: 'change' }
                ],
                natureConstruction: [
                    { required: true, message: '请选择建设性质', trigger: 'change' }
                ],
                structuralForm: [
                    { required: true, message: '请选择结构形式', trigger: 'change' }
                ],
                basicForm: [
                    { required: true, message: '请选择基础形式', trigger: 'change' }
                ],
            }
        }
    },
    watch: {
        detailData: {
            handler(newVal) {
                if (Object.keys(newVal).length > 0) {
                    this.setFormData(newVal)
                }
            },
            immediate: true
        }
    },
    created() {
    },
    methods: {
        // 校验规则
        validate() {
            return new Promise((resolve, reject) => {
                this.$refs.basicInfoForm.validate((valid) => {
                    if (valid) {
                        resolve(this.form) // 校验成功返回表单数据
                    } else {
                        reject(new Error('基础信息未填写完整'))
                    }
                })
            })
        },

        setFormData() {
            this.form = {
                voltageLevel: this.detailData.voltageLevel || '',
                natureConstruction: this.detailData.natureConstruction.split(',') || [],
                structuralForm: this.detailData.structuralForm || '',
                basicForm: this.detailData.basicForm || '',
            }
        },

    },


}
</script>

<style scoped lang="scss">
.basic-info-title {
    display: flex;
    align-items: center;
    margin: 10px 0;

    span {
        margin: 0 5px;
        font-size: 20px;
    }
}

.form-item {
    width: 100%;
}
</style>