<template>
    <div>
        <div>
            <el-dialog v-model="dialogVisible" title="Tips" width="30%" @close="closes">
                <!--  -->
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                    status-icon>
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>
                    <el-form-item label="电压等级">
                        <el-select @change="flashChange" v-model="ruleForm.volId" placeholder="请选择电压等级">
                            <template v-for="(item, index) in selectList">
                                <el-option :label="item.name" :value="item.id" />
                            </template>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="上传图片">
                        <el-button type="primary">上传</el-button>
                    </el-form-item> -->
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="cancels">取消</el-button>
                        <el-button type="primary" @click="sureClick">
                            确定
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, toRefs, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import systemRow from '@/api/systemRow';
import litLine from "@/api/litLine"
export default {
    //voltage_level,电压等级
    props: {
        alModal: {
            type: Boolean,
            required: true
        },
        search: {
            type: Function,
            required: true
        }
    },
    setup(props, { emit }) {
        let dialogVisible = ref(false)
        let result = props.alModal
        let { cancels, sureClick } = toRefs(props)
        let ruleForm = ref({
            name: "",
            volId: "",
        })
        let selectList = ref([])
        let rules = reactive({
            name: [
                { required: true, message: '请输入名称', trigger: 'blur' },
            ]
        })
        function lineList() {
            dialogVisible.value = result
        }
        function searchFlashLel() {
            systemRow.getChildren({ code: "voltage_level" }).then(res => {
                console.log(res, 'lel');
                selectList.value = res.data
            })
        }
        function flashChange(e) {
            ruleForm.value.volId = e
        }
        function cancelBack() {
            dialogVisible.value = false
            emit("alBack", dialogVisible.value)
        }
        function sureBack() {
            litLine.addLine({
                name: ruleForm.value.name,
                vol_id: ruleForm.value.volId - 0
            }).then(res => {
                if (res.code == 0) {
                    dialogVisible.value = false
                    emit("alBack", dialogVisible.value)
                    ElMessage({
                        message: "添加成功",
                        type: "success",
                        duration: 1500
                    })
                    props.search()
                }
            })

        }
        onMounted(() => {
            lineList()
            searchFlashLel()
        })
        return {
            searchFlashLel,
            dialogVisible,
            cancels: cancelBack,
            sureClick: sureBack,
            flashChange,
            ruleForm,
            selectList,
            rules,
            closes: cancelBack,
        }
    }
}
</script>

<style lang="scss" scoped></style>