<template>
    <div v-loading="loading">
        <my-breadcrumb />
        <div class="main">
            <div class="left">
                <DD
                    :data="menus"
                    @add="onAdd"
                    @select="onSelect"
                />
            </div>
            <div class="right">
                <el-form v-show="visible" ref="form" :model="form" label-width="80px" style="width: 360px;margin: 0 auto;">
                    <el-form-item label="父级">
                        <el-input v-model="parentTitle" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="名称" :error="serverError.name">
                        <el-input v-model="form.name" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item label="类型" :error="serverError.type">
                        <el-select v-model="form.type" placeholder="请选择类型" style="width: 100%;">
                            <el-option label="group" value="group" />
                            <el-option label="route" value="route" />
                            <el-option label="hidden" value="hidden" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="URL" v-show="form.type != 'group'">
                        <el-input v-model="form.url" placeholder="请输入URL"></el-input>
                    </el-form-item>
                    <el-form-item label="后端路由">
                        <multiple-input v-model="form.routes" placeholder="请输入后端路由" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">创建</el-button>
                        <el-button @click="onCancel">取消</el-button>
                    </el-form-item>
                </el-form>
                <el-form v-show="infoVisible" ref="info" :model="info" label-width="80px" style="width: 360px;margin: 0 auto;">
                    <el-form-item label="名称：">
                        <span>{{info.name}}</span>
                    </el-form-item>
                    <el-form-item label="类型：">
                        <span>{{info.type}}</span>
                    </el-form-item>
                    <el-form-item label="URL：">
                        <span>{{info.url}}</span>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="danger" @click="onDelete">删除</el-button>
                        <el-button type="primary" @click="onAdd(info)">添加子菜单</el-button>
                        <el-button @click="onCancel">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        
    </div>
</template>

<script>
import MyBreadcrumb from '../components/MyBreadcrumb'
import DD from './DD'
import menuAPI from '../api/menu.js'
import MultipleInput from '../components/Form/MultipleInput'

export default {
    components: {
        MyBreadcrumb,
        MultipleInput,
        DD
    },
    mounted () {
        menuAPI.query(data => {
            this.menus = data.data
        })
    },
    computed: {
        parentTitle () {
            if (this.parent) {
                return this.parent.name
            }
            return '无'
        }
    },
    watch: {
        'form.type' (newVal) {
            if (newVal == 'group') {
                this.form.url = ''
            }
        }
    },
    data () {
        return {
            visible: false,
            infoVisible: false,
            form: {
                name: '',
                type: '',
                url: '',
                icon: '',
                routes: []
            },
            info: {
                id: '',
                name: '',
                type: '',
                url: '',
            },
            serverError: {
                name: '',
                type: '',
                url: ''
            },
            parent: null,
            loading: false,
            menus: []
        }
    },
    methods: {
        onAdd (item) {
            this.parent = item
            this.infoVisible = false
            this.visible = true
        },
        onSelect (item) {
            this.info.id = item.id
            this.info.name = item.name
            this.info.type = item.type
            this.info.url = item.url
            this.infoVisible = true
        },
        onSubmit () {
            this.loading = true
            menuAPI.store({
                parent_id: this.parent ? this.parent.id : null,
                ...this.form
            }, () => {
                this.onCancel()
                menuAPI.query(data => {
                    this.menus = data.data
                })
                this.loading = false
            }, error => {
                const data = error.response.data
                for (let k in data.errors) {
                    this.serverError[k] = data.errors[k].join(', ')
                }
                this.loading = false
            })
        },
        onDelete () {
            this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.loading = true
                menuAPI.destroy(this.info.id, () => {
                    menuAPI.query(data => {
                        this.menus = data.data
                    })
                    this.onCancel()
                    this.loading = false
                }, () => {
                    this.loading = false
                })
            })
        },
        onCancel () {
            this.resetData()
            this.visible = false
            this.infoVisible = false
        },
        resetData () {
            this.form = {
                name: '',
                type: '',
                url: '',
                icon: '',
                routes: []
            }
            this.info = {
                id: '',
                name: '',
                type: '',
                url: '',
            }
            this.serverError = {
                name: '',
                type: '',
                url: ''
            }
        }
    }
}
</script>

<style lang="less" scoped>
.main {
    display: flex;
    .left {
        width: 210px;
    }
    .right {
        margin-left: 20px;
        flex: 1;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
    }
}
</style>