<template>
    <el-dialog :title="title" :visible.sync="show" :close-on-click-modal="false" :close-on-press-escape="false" destroy-on-close :before-close="onClose">
        <el-form :model="formData" :rules="rules" ref="form" label-width="100px">
            <el-form-item label="类型" prop="type">
                <template v-if="isEdit">
                    <el-radio-group v-model="formData.type">
                        <el-radio label="1">菜单</el-radio>
                        <el-radio label="2">按钮</el-radio>
                    </el-radio-group>
                </template>
                <template v-else>
                    <el-radio-group v-model="formData.type">
                        <el-radio label="1">菜单</el-radio>
                        <el-radio label="2">按钮</el-radio>
                    </el-radio-group>
                </template>
            </el-form-item>
            <el-form-item label="名称" prop="name">
                <el-input v-model="formData.name" clearable placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="上级菜单" prop="parent_name">
                <el-input v-model="formData.parent_name" readonly @focus="showMenuTree=true" placeholder="请选择"></el-input>
            </el-form-item>
            <el-form-item v-if="formData.type == 1" label="路由" prop="url">
                <el-input v-model="formData.url" clearable placeholder="请选择"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input-number v-model="formData.sort" :min="0" :max="10000" label="请输入"></el-input-number>
            </el-form-item>
            <el-form-item v-if="formData.type == 1" label="打开方式" prop="open_way">
                <el-radio-group v-model="formData.open_way">
                    <el-radio label="0">内部打开</el-radio>
                    <el-radio label="1">外部打开</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="授权标识" prop="perms">
                <el-input v-model="formData.perms" placeholder="多个用逗号分隔，如：sys:menu:save,sys:menu:update"></el-input>
            </el-form-item>
            <el-form-item v-if="formData.type == 1" label="图标" prop="icon">
                <el-input v-model="formData.icon" @focus="showPickerIcon=true" clearable placeholder="请选择"></el-input>
            </el-form-item>
            <div class="tool">
                <el-button @click="onClose">取消</el-button>
                <el-button type="primary" @click="onSubmit">保存</el-button>
            </div>
        </el-form>

        <menu-tree :show.sync="showMenuTree" @confirm="onConfirmMenu"></menu-tree>
        <picker-icon :show.sync="showPickerIcon" @confirm="onConfirmIcon"></picker-icon>
    </el-dialog>
</template>

<script>
import MenuTree from './MenuTree.vue';
import PickerIcon from './PickerIcon.vue';

import { updateMenu, addMenu } from '@/api/menu';

export default {
    props: ['show', 'menu'],
    components: {
        MenuTree,
        PickerIcon,
    },
    data () {
        return {
            formData: {
                parent_id: '',
                parent_name: '',
                name: '',
                url: '',
                perms: '',
                type: '1',
                open_way: '0',
                icon: '',
                sort: '0',
            },
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                ],
                parent_name: [
                    { required: true, message: '请选择上级菜单', trigger: 'change' }
                ],
            },
            showMenuTree: false,
            showPickerIcon: false,
        }
    },
    computed: {
        title() {
            if (this.menu) {
                return '编辑'
            }
            return '新增'
        },
        isEdit() {
            return this.menu && this.menu.id > 0;
        },
    },
    watch: {
        menu: {
            handler(n) {
                if (n) {
                    this.initFormData();
                }
            },
            deep: true,
        }
    },
    methods: {
        initFormData() {
            Object.keys(this.formData).map(key => {
                if (key == 'type') {
                    this.formData[key] = this.menu[key] + '';
                }
                else {
                    this.formData[key] = this.menu[key];
                }
            });
        },
        onClose(flag = false) {
            this.$emit('update:show', false);
            this.$emit('close', flag);
            this.$refs.form.resetFields();
        },
        onConfirmMenu(data) {
            if (data) {
                this.formData.parent_id = data.id == -1 ? '' : data.id;
                this.formData.parent_name = data.name;
            }
            this.showMenuTree = false;
        },
        onConfirmIcon(data) {
            this.formData.icon = data;
            this.showPickerIcon = false;
        },
        onSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    if (this.isEdit) {
                        updateMenu(this.menu.id, this.formData).then(res => {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.onClose(true);
                        });
                    }
                    else {
                        addMenu(this.formData).then(res => {
                            this.$message({
                                message: '新增成功',
                                type: 'success'
                            });
                            this.onClose(true);
                        });
                    }
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.tool {
    display: flex;
    justify-content: flex-end;
    margin: 8px;
}
</style>