<template>
    <PageHeader :title="title">
        <template #action>
            <Button v-if="elements.indexOf('3-1') != -1" name="新增角色" type="primary"
                @click="modlShow = true">新增角色</Button>
        </template>
    </PageHeader>
    <div style="margin-top: 8px;">
        <Row class="code-row-bg">
            <Col :lg="10" span="24">
            <Table row-key="id" :columns="columns" :data="allRole"
                @on-cell-click="(row, column, data, event) => { column.key == 'name' && getRolePermissions(row.id) }">
                <template #name="{ row }">
                    <strong>{{ row.name }}</strong>
                </template>
                <template v-if="elements.indexOf('3-2') != -1" name="编辑列" #action="{ row }">
                    <Button size="small" type="error" shape="circle" icon="md-trash" @click="delRole(row.id)"></Button>
                </template>
            </Table>

            </Col>
            <Col :lg="4" span="0">
            </Col>
            <Col :lg="10" span="0">
            <Card v-if="choiceId" style="height: 700px">
                <Form>
                    <FormItem>
                        <div style="background-color: blue;height: 600px;overflow:auto">
                            <Table :show-header="false" row-key="id" :columns="menu_columns"
                                @on-selection-change="(a) => { select_menu = a }" :data="choicePermissions">
                                <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._checked" checkable
                                        @on-change="(chec, name) => { elechoice(row, chec, name) }" color="primary"
                                        style="margin-right: 5px">
                                        {{ item.name }}</Tag>
                                </template>
                            </Table>
                        </div>
                    </FormItem>
                    <FormItem style="text-align: right;">
                        <Button type="primary" @click="updatePermissions(choiceId)">确认</Button>
                    </FormItem>
                </Form>
            </Card>
            </Col>
        </Row>
    </div>
    <Space wrap>
        <Modal title="添加角色" v-model="modlShow" class-name="vertical-center-modal">
            <Form ref="addForm" :model="addinfo" :rules="ruleValidate" :label-width="80">
                <FormItem label="角色名" prop="name">
                    <Input v-model="addinfo.name" placeholder="请输入角色名"></Input>
                </FormItem>
            </Form>
            <template #footer>
                <Button @click="closeShow()">取消</Button>
                <Button type="primary" @click="addRole()">确认</Button>
            </template>
        </Modal>
    </Space>
</template>

<script>


export default {
    props: ['isCollapsed',],
    data() {
        return {
            page_id: 16,
            title: "角色管理",
            modlShow: false,
            addinfo: {
                role_name: null
            },
            allRole: [],
            choiceId: null,
            choicePermissions: [],
            select_menu: [],
            select_element: [],
            allPermissions: [],
            ruleValidate: {
                name: [
                    { required: true, message: '角色名不能为空', trigger: 'blur' }
                ],
            },
            columns: [
                {
                    title: '角色',
                    key: 'name',
                    align: 'center'
                }
            ],
            menu_columns: [
                {
                    key: "_checked",
                    type: 'selection'
                },

                {
                    title: '菜单名',
                    key: 'name',
                    tree: true
                }, {
                    title: '元素',
                    slot: 'elements',
                    align: 'center'
                }
            ],
            elements: []
        }
    },
    methods: {
        closeShow() {
            this.addinfo = {
                role_name: null
            },
                this.modlShow = false;
        },
        elechoice(row, chec, name) {
            const index = row.elements.findIndex(i => { return i.id == name })
            const id = row.elements[index].id
            const index2 = this.select_element.findIndex(i => { return i.id == id })
            if (index2 == -1 && chec)
                this.select_element.push({ type: 1, id })
            if (index2 != -1 && !chec)
                this.select_element.splice(index2, 1)
        },
        async addRole() {
            var next_ = await this.$refs["addForm"].validate((valid) => {
                if (!valid) {
                    this.$Message.error('请完善信息')
                };
            })
            if (!next_) return
            this.$request("post", "/identity/add_role", this.addinfo, this, () => { this.getRole(); this.closeShow() })
        },
        getRole() {
            this.$request("get", "/identity/role_list", null, this, (data) => { this.allRole = data.data })
        },
        async delRole(id_) {
            this.$request("delete", "/identity/delete_role/" + id_, null, this, () => { this.getRole(); })
        },
        getMenu() {
            this.$request("get", "/identity/meun_list", null, this, (data) => { this.allPermissions = data.data })
        },
        getRolePermissions(id_) {
            if (this.elements.indexOf("3-3") == -1) return
            this.$request("get", "/identity/get_permissions/" + id_, null, this, (data) => { a(data.data) })
            this.select_element = []
            const a = (Permissions) => {
                const m = (elements) => {
                    elements.forEach(element => {
                        const index1 = Permissions.findIndex(e => { return (e.p_id == element.id && e.type == 0) })
                        element._checked = index1 == -1 ? false : true
                        index1 != -1 && this.select_menu.push({ type: 0, id: element.id })
                        if (element.elements) {
                            element.elements.forEach(each => {
                                const index2 = Permissions.findIndex(e => { return e.p_id == each.id && e.type == 1 })
                                each._checked = index2 == -1 ? false : true
                                index2 != -1 && this.select_element.push({ type: 1, id: each.id })
                            })
                        }
                        element.children && m(element.children)
                    })
                }
                this.choicePermissions = JSON.parse(JSON.stringify(this.allPermissions));
                m(this.choicePermissions);
                console.info(this.choicePermissions)
                this.choiceId = id_
            }
        },
        updatePermissions(id_) {
            this.select_menu.forEach(ele => {
                if (this.select_element.findIndex(i => { return i.id == ele.id && i.type == 0 }) == -1)
                    this.select_element.push({ type: 0, id: ele.id })
            })
            this.$request("post", "/identity/update_permissions/" + id_, this.select_element, this, () => { this.getRolePermissions(this.choiceId) })
        }
    },

    watch: {
        // choiceId(value) {
        //     value && this.getRolePermissions(value)
        // }
        //    编辑权限2,删除权限3,操作栏4
        elements(value) {
            if (value.indexOf('3-2') != -1 && this.columns.findIndex(each => { return each.title == '编辑' }) == -1) {
                this.columns.push({
                    title: '编辑',
                    slot: 'action',
                    width: 200,
                    align: 'center'
                })
            } else {
                const index = this.columns.findIndex(ele => { return ele.title == 'Action' })
                index != -1 && this.columns.splice(index, 1)
            }
        }
    },
    created() {
        this.$getElements(this.page_id, this, (data) => this.elements = data.data)
        this.getMenu();
        this.getRole();
    }
};
</script>

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

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