<template>
    <div class="add-edit-dialog-container">
        <el-dialog
            :title="addEditDialogTitle"
            :visible.sync="addEditDialogVisible"
            width="500px"
            :before-close="close"
        >
            <el-form
                :model="addEditDialogForm"
                ref="addEditDialogForm"
                :rules="addEditDialogRules"
                label-width="90px"
            >
                <el-form-item label="父级Id" prop="parentId">
                    <el-input placeholder="请输入内容" v-model="addEditDialogForm.parentId"></el-input>
                </el-form-item>
                <el-form-item label="菜单名称" prop="name">
                    <el-input placeholder="请输入内容" v-model="addEditDialogForm.name"></el-input>
                </el-form-item>
                <el-form-item label="菜单编码" prop="code">
                    <el-input placeholder="请输入内容" v-model="addEditDialogForm.code"></el-input>
                </el-form-item>
                <el-form-item label="菜单路径" prop="url">
                    <el-input placeholder="请输入内容" v-model="addEditDialogForm.url"></el-input>
                </el-form-item>
                <el-form-item label="菜单类型" prop="type">
                    <el-select placeholder="请选择" v-model="addEditDialogForm.type">
                        <el-option label="菜单名" :value="'menu'"></el-option>
                        <el-option label="操作" :value="'button'"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input placeholder="请输入内容" v-model="addEditDialogForm.description"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button
                    type="primary"
                    @click="submitForm('addEditDialogForm')"
                    :disabled="submitBtndisabled"
                >确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { toTree } from '@/apps/mobile/utils/util';
import { addSystemMenus } from '@/apps/mobile/api/system-menu/index';
export default {
    data() {
        return {
            addEditDialogVisible: false,
            addEditDialogTitle: '新增',
            addEditDialogForm: {
                parentId: '',
                name: '',
                code: '',
                url: '',
                description: '',
                type: 'menu',
            },
            submitBtndisabled: false,
            addEditDialogRules: {
                name: [
                    {
                        required: true,
                        message: '请填写',
                        trigger: 'blur',
                    },
                    { max: 30, message: '长度最大30个字符', trigger: 'blur' },
                ],
                code: [
                    {
                        required: true,
                        message: '请填写',
                        trigger: 'blur',
                    },
                    { max: 30, message: '长度最大30个字符', trigger: 'blur' },
                ],
                url: [
                    {
                        required: true,
                        message: '请填写',
                        trigger: 'blur',
                    },
                    { max: 30, message: '长度最大30个字符', trigger: 'blur' },
                ],
                parentId: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur',
                    },
                ],
                description: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur',
                    },
                    { max: 30, message: '长度最大30个字符', trigger: 'blur' },
                ],
                type: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'change',
                    },
                ],
            },
            propsOptions: {
                checkStrictly: true,
                value: 'id',
                label: 'name',
                children: 'appmenu',
                leaf: 'hasChildren',
            },
            options: [],
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let formData = {
                        ...this.addEditDialogForm,
                    };
                    console.log(formData);
                    addSystemMenus(formData)
                        .then(res => {
                            if (res.statusCode === '1') {
                                this.completeOperation(res.message);
                            } else {
                                this.$message.warning(res.message);
                            }
                        })
                        .catch(() => {
                            this.submitBtndisabled = false;
                        });
                } else {
                    return false;
                }
            });
        },

        open() {
            this.addEditDialogVisible = true;
        },
        close() {
            this.$refs['addEditDialogForm'].resetFields();
            this.addEditDialogVisible = false;
        },
        completeOperation(message) {
            this.$message({
                type: 'success',
                message,
            });
            this.close();
            this.submitBtndisabled = false;
            this.$emit('queryListData');
        },
    },
};
</script>
<style lang="stylus" scoped>
.add-edit-dialog-container {
    ::v-deep .el-input__inner {
        width: 200px;
    }
}
</style>
