<template>
    <PageHeader :title="title">
        <template #action>
            <Button v-if="elements.indexOf('2-1') != -1" name="添加顶级菜单" type="primary"
                @click="modlShow = true">添加顶级菜单</Button>
        </template>
    </PageHeader>
    <div style="margin-top: 8px;">
        <Table highlight row-key="id" :columns="columns" :data="menuData">
            <template #name="{ row }">
                <strong>{{ row.name }}</strong>
            </template>
            <template #elements="{ row }">
                <Tag v-for="item in row.elements" :key="item.id" :name="item.id" :checked="item.default_show"
                    color="primary" style="margin-right: 5px">
                    {{ item.name }}</Tag>
            </template>
            <template v-if="elements.indexOf('2-2') != -1" name="编辑列" #action="{ row }">
                <Button v-if="elements.indexOf('2-3') != -1" name="新增子菜单" type="primary" size="small"
                    style="margin-right: 5px"
                    @click="changeinfo.parent_id = row.id; changeinfo.parent_name = row.name; modlShow = true">新增子菜单</Button>
                <Button v-if="elements.indexOf('2-4') != -1" name="编辑" type="primary" size="small"
                    style="margin-right: 5px"
                    @click="changeinfo = JSON.parse(JSON.stringify(row)); changeinfo.type = 1; modlShow = true">编辑</Button>
                <Button v-if="elements.indexOf('2-5') != -1" name="删除" type="error" size="small"
                    @click="delMenu(row.id)">删除</Button>
            </template>
        </Table>
    </div>
    <Space wrap>
        <Modal :title="changeinfo.type ? '编辑菜单' : '新增菜单'" v-model="modlShow" class-name="vertical-center-modal"
            @on-cancel="closeShow()">
            <Form ref="addForm" :model="changeinfo" :rules="ruleValidate" :label-width="80">
                <FormItem label="父菜单" prop="parent_name">
                    <Input v-model="changeinfo.parent_name" disabled></Input>
                </FormItem>
                <FormItem label="菜单名" prop="name">
                    <Input v-model="changeinfo.name" placeholder="请输入菜单名"></Input>
                </FormItem>
                <FormItem label="路由" prop="router">
                    <Input v-model="changeinfo.router" placeholder="请输入路由地址"></Input>
                </FormItem>
                <FormItem label="Icon" prop="icon">
                    <Input v-model="changeinfo.icon" placeholder="请输入菜单图标"></Input>
                </FormItem>
                <FormItem label="默认选中">
                    <Select v-model="changeinfo.default_show">
                        <Option :value="1">是</Option>
                        <Option :value="0">否</Option>
                    </Select>
                </FormItem>
                <FormItem label="子元素" prop="elements">
                    <div>
                        <Tag v-for="item, index in changeinfo.elements" :key="item.id" :name="item.id" closable
                            checkable :checked="item.default_show" @on-change="changeCheck" color="primary"
                            @on-close="changeinfo.elements.splice(index, 1)">
                            {{ item.name }}</Tag>
                        <Button icon="ios-add" type="dashed" size="small" @click="elemodlShow = true">添加元素</Button>
                    </div>
                </FormItem>
            </Form>
            <template #footer>
                <Button @click="closeShow()">取消</Button>
                <Button type="primary" @click="changeinfo.type ? editMenu() : addMenu()">确认</Button>
            </template>
        </Modal>
        <Modal title="添加元素" v-model="elemodlShow" class-name="vertical-center-modal" @on-cancel="closeEleShow()">
            <Form ref="addForm2" :model="eleinfo" :rules="ruleValidate2" :label-width="80">
                <FormItem label="菜单名" prop="parent_name">
                    <Input v-model="changeinfo.parent_name" disabled></Input>
                </FormItem>
                <FormItem label="元素名" prop="name">
                    <Input v-model="eleinfo.name" placeholder="请输入元素名"></Input>
                </FormItem>
                <FormItem label="默认选中">
                    <Select v-model="eleinfo.default_show">
                        <Option :value="1">是</Option>
                        <Option :value="0">否</Option>
                    </Select>
                </FormItem>
                <FormItem label="u_id" porp="u_id">
                    <Input v-model="eleinfo.u_id" placeholder="请输入uid"></Input>
                </FormItem>

            </Form>
            <template #footer>
                <Button @click="closeEleShow()">取消</Button>
                <Button type="primary" @click="this.addEle()">确认</Button>
            </template>
        </Modal>
    </Space>
</template>

<script>

export default {
    props: ['isCollapsed'],
    data() {
        return {
            page_id:15,
            value: [],
            title: "菜单管理",
            modlShow: false,
            elemodlShow: false,
            eleinfo: {
                name: null,
                id: null,
                u_id: null,
                default_show: 0
            },
            changeinfo: {
                parent_id: 0,
                parent_name: null,
                name: null,
                default_show: 0,
                elements: []
            },
            ruleValidate: {
                name: [
                    { required: true, message: '菜单名不能为空', trigger: 'blur' }
                ]
            },
            ruleValidate2: {
                name: [
                    { required: true, message: '元素名不能为空', trigger: 'blur' }
                ], u_id: [
                    { required: true, message: 'uid不能为空', trigger: 'blur' }
                ],
            },
            elements: [],
            columns: [
                {
                    title: '菜单名',
                    key: 'name',
                    width: 200,
                    tree: true
                }, {
                    title: '元素',
                    slot: 'elements',
                    align: 'center',
                    minWidth: 100,
                }
            ],
            editClo: {
                title: '编辑',
                slot: 'action',
                width: 300,
                align: 'center'
            },
            menuData: []
        }
    },
    methods: {
        closeShow() {
            this.modlShow = false;
            this.changeinfo = {
                parent_id: 0,
                parent_name: null,
                name: null,
                default_show: 0,
                elements: []
            }
        },
        changeCheck(chec, name) {
            const index = this.changeinfo.elements.findIndex(x => { return x.id == name })
            if (index == -1) return this.$Message.error("系统错误")
            this.changeinfo.elements[index].default_show = chec ? 1 : 0
        },
        closeEleShow() {
            this.eleinfo = {
                name: null,
                id: null,
                u_id: null,
                default_show: 0
            },
                this.elemodlShow = false
        },
        async addEle() {
            var next_ = await this.$refs["addForm2"].validate((valid) => {
                if (!valid) {
                    this.$Message.error('请完善信息')
                };
            })
            if (!next_) return
            this.changeinfo.elements.push(this.eleinfo); this.closeEleShow()
        },
        async addMenu() {
            var next_ = await this.$refs["addForm"].validate((valid) => {
                if (!valid) {
                    this.$Message.error('请完善信息')
                };
            })
            if (!next_) return
            console.info(this.changeinfo)
            this.$request("post", "/identity/add_menu", this.changeinfo, this, () => {
                this.getMenu();
                this.closeShow()
            })
        },
        async editMenu() {
            var next_ = await this.$refs["addForm"].validate((valid) => {
                if (!valid) {
                    this.$Message.error('请完善信息')
                };
            })
            if (!next_) return
            console.info(this.changeinfo)
            this.$request("post", "/identity/update_meun/" + this.changeinfo.id, this.changeinfo, this, () => {
                this.getMenu();
                this.closeShow()
            })
        },
        getMenu() {
            this.$request("get", "/identity/meun_list", null, this, (data) => { this.menuData = data.data })
        },
        delMenu(id_) {
            this.$request("delete", "/identity/delete_meun/" + id_, null, this, () => {
                this.getMenu();
            })
        },
    },

    watch: {
        //    编辑权限2,删除权限3,操作栏4
        elements(value) {
            if (this.elements.indexOf("2-2") != -1 && !this.isCollapsed) {
                if (this.columns.findIndex(each => { return each.title == this.editClo.title }) != -1) return
                this.columns.push(this.editClo)
            } else {
                const index = this.columns.findIndex(ele => { return ele.title == '编辑' })
                index != -1 && this.columns.splice(index, 1)
            }
        },
        isCollapsed(value) {
            if (this.elements.indexOf("2-2") != -1 && !value) {
                if (this.columns.findIndex(each => { return each.title == this.editClo.title }) != -1) return
                this.columns.push(this.editClo)
            } else {
                console.info(this.columns)
                const index = this.columns.findIndex(ele => { return ele.title == '编辑' })
                index != -1 && this.columns.splice(index, 1)
            }
        }
    },
    created() {
        this.$router.hasRoute()
        this.$getElements(this.page_id,this,(data)=>this.elements=data.data)
        this.getMenu()
    },
};
</script>

<style>
.vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vertical-center-modal .ivu-modal {
    top: 0;
}
</style>