<template>
    <div>
        <div class="bigBox">
            <el-dialog v-model="dialogVisible" :title="letTips" width="30%" @close="closes">
                <el-form :model="newForm" label-width="120px" :rules="formRule">
                    <el-form-item label="字典名称" prop="name">
                        <el-input v-model="newForm.name" />
                    </el-form-item>
                    <el-form-item label="上级字典编码" prop="parents">
                        <el-select style="width: 372px;" v-model="newForm.parents" placeholder="Select">
                            <el-option v-for="(item, index) in topCode" :key="item.id" :label="item.name"
                                :value="item.code" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="字典编码" prop="codes">
                        <el-input v-model="newForm.codes" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="cancels">取消</el-button>
                        <el-button type="primary" @click="sureAdd">确认</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, toRefs, reactive } from 'vue';
import systemRow from "@/api/systemRow"
import { ElMessage } from 'element-plus';
export default {
    props: {
        setModal: {
            type: Boolean,
            required: true
        },
        addOrEdit: {
            type: Number,
            required: true
        },
        searchSystem: {
            type: Function,
            required: true
        },
        editRow: {
            type: Object,
            required: true
        }
    },
    setup(props, { emit }) {
        let dialogVisible = ref(false)
        let result = props.setModal
        let letTips = ref("新增")
        let { cancels, sureAdd } = toRefs(props)
        let obj = props.editRow
        let editId = ref('')
        let newForm = ref({
            name: "",
            parents: "",
            codes: "",
        })
        let formRule = reactive({
            name: [
                { required: true, message: '请输入名称', trigger: 'blur' },
            ],
            parents: [
                { required: true, message: '请选择上级', trigger: 'blur' },
            ],
            codes: [
                { required: true, message: '请输入编码', trigger: 'blur' },
            ]
        })
        let topCode = ref([
        ])
        let caseNum = props.addOrEdit
        function lineList() {
            dialogVisible.value = result
            if (caseNum == 0) {
                letTips.value = '新增'
            }
            if (caseNum == 1) {
                letTips.value = '编辑'
                newForm.value.name = obj.name
                newForm.value.parents = obj.parentcode
                newForm.value.codes = obj.code
                editId.value = obj.id
            }
            systemRow.getChildren({}).then(res => {
                topCode.value = res.data
            })
        }
        function closes() {
            dialogVisible.value = false
            emit("getModal", dialogVisible.value)
        }
        function getSure() {
            if (caseNum == 0) {
                systemRow.saveRow({
                    name: newForm.value.name,
                    parentcode: newForm.value.parents,
                    code: newForm.value.codes
                }).then(res => {
                    if (res.returncode == 200) {
                        dialogVisible.value = false
                        emit("getModal", dialogVisible.value)
                        props.searchSystem()
                        ElMessage({
                            type: "success",
                            message: "新增成功"
                        })
                    }
                })
            } else if (caseNum == 1) {
                systemRow.saveRow({
                    name: newForm.value.name,
                    parentcode: newForm.value.parents,
                    code: newForm.value.codes,
                    id: editId.value
                }).then(res => {
                    if (res.returncode == 200) {
                        dialogVisible.value = false
                        emit("getModal", dialogVisible.value)
                        props.searchSystem()
                        ElMessage({
                            type: "success",
                            message: "修改成功"
                        })
                    }
                })
            }

        }
        onMounted(() => {
            lineList()
        })
        return {
            dialogVisible,
            closes,
            cancels: closes,
            sureAdd: getSure,
            lineList,
            letTips,
            newForm,
            topCode,
            formRule,
            editId,
        }
    }
}
</script>

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