
<template>
    <div style="height: 100%;">
        <Row style="height: 100%;">
            <i-col span="5" style="height: 100%;">
                <div style="border-bottom: 1px solid #EDEFF1">
                    <div class="title">
                        <span class="title-text">系统角色</span>
                    </div>
                </div>
                <div>
                    <div class="system-role-div" v-for="item in roleList" :value="item.index" :key="item.id">
                        <img :src="item.imgUrl" class="system-role-img"/>
                        <span :class="item.selectFlag === 'selected' ? 'system-role-name-selected' : 'system-role-name-un-select'"
                              @click="selectRole(item.id)" :value="item.id">{{item.name}}</span>
                        <span :class="item.selectFlag === 'selected' ? 'system-role-number-selected' : 'system-role-number-un-select'"
                              @click="goToAccManagerPage(item)">{{item.number}}</span>
                    </div>
                </div>
            </i-col>
            <i-col span="1" style="max-width: 5px;background-color: #EFF3F8;height: 100%;">
            </i-col>
            <!--权限多选-->
            <i-col span="18" style="height: 100%;">
                <div style="border-bottom: 1px solid #EDEFF1;margin-left: 17px;">
                    <div style="margin: 15px 0 15px 0">
                        <span style="color: #697882;font-size: 12px;font-weight: 700">角色权限</span>
                    </div>
                </div>
                <div style="margin-left: 30px;margin-top: 39px;border-top: 1px solid #E4E9F1;">
                    <!--1-->
                    <div v-for="item in permissionList" :key="item.id">
                        <div style="border-bottom: 1px solid #E4E9F1;height: 49px;line-height: 49px;background-color: #F7F8FA;">
                            <Checkbox :indeterminate="item.indeterminate" :value="item.check"
                                      @click.prevent.native="handleItemCheckAll(item)"
                                      style="margin-left: 20px;height: 95%;color:#697882;background-color: #F7F8FA;">{{item.name}}
                            </Checkbox>
                        </div>
                        <!--2-->
                        <div v-for="itemSon in item.sonPermissionList" :key="itemSon.id" style="height: 49px;">
                            <div style="float: left;width: 20%;border-right: 1px solid #E4E9F1;border-bottom: 1px solid #E4E9F1;height: 49px;line-height: 49px;">
                                <CheckboxGroup v-model="item.checkArr">

                                    <Checkbox style="margin-left: 30px;color:#697882" :label="itemSon.id"
                                              @click.prevent.native="handleItemSonCheckAll(itemSon, item)"
                                              :key="itemSon.id"
                                              :indeterminate="itemSon.indeterminate" :value="itemSon.check">
                                        {{itemSon.name}}
                                    </Checkbox>
                                </CheckboxGroup>

                            </div>
                            <!--3-->
                            <div style="float: left;width: 80%;height: 49px;line-height: 49px;border-bottom: 1px solid #E4E9F1;">
                                <CheckboxGroup v-model="itemSon.checkArr"
                                               @on-change="handleGrandSonCheckChange(itemSon, item)">
                                    <Checkbox v-for="itemGrandson in itemSon.sonPermissionList"
                                              :key="itemGrandson.id"
                                              style="margin-left: 30px;color:#697882" :label="itemGrandson.id"
                                              :value="itemGrandson.check">
                                        {{itemGrandson.name}}
                                    </Checkbox>
                                </CheckboxGroup>
                            </div>
                        </div>

                    </div>
                </div>
                <div style="padding-top: 20px;text-align: center;">
                    <Button type="primary" style="width: 70px;height: 32px;line-height: 32px;background-color: #2074E2;"
                            @click="savePermission()">保存
                    </Button>
                </div>
            </i-col>
        </Row>
    </div>
</template>
<script>
    import RoleManager from '../../services/user/RoleManager'
    import roleSelectedImg from '../../../static/img/role-selected.png'
    import roleUnSelectImg from '../../../static/img/role-un-select.png'

    export default {
        data() {
            return {
                name: "RoleManager",
                //当前选中角色id
                roleSelectId: 1,
                //角色集合
                roleList: [
                    {
                        id: 1,
                        name: "系统管理员",
                        number: 6,
                        imgUrl: roleSelectedImg,
                        selectFlag: 'selected'
                    },
                    {
                        id: 2,
                        name: "运营人员",
                        number: 18,
                        imgUrl: roleUnSelectImg,
                        selectFlag: "unSelect"
                    },
                    {
                        id: 3,
                        name: "店长",
                        number: 123,
                        imgUrl: roleUnSelectImg,
                        selectFlag: "unSelect"
                    },
                    {
                        id: 4,
                        name: "导购",
                        number: 423,
                        imgUrl: roleUnSelectImg,
                        selectFlag: "unSelect"
                    },
                ],
                //权限集合
                permissionList: [
                    {
                        id: 1,
                        name: '一级权限a',
                        level: 1,
                        //选中1个：false，全部选中：true，全未选：false
                        check: false,
                        //选中1个：true，全部选中：true，全未选：false
                        indeterminate: false,
                        //选中的子权限
                        checkArr: [],
                        sonPermissionList: [
                            {
                                id: 2,
                                name: '二级权限a',
                                level: 2,
                                //选中1个：false，全部选中：true，全未选：false
                                check: false,
                                //选中1个：true，全部选中：true，全未选：false
                                indeterminate: false,
                                checkArr: [],
                                sonPermissionList: [
                                    {
                                        id: 7,
                                        name: '三级权限a',
                                        level: 3,
                                    },
                                    {
                                        id: 8,
                                        name: '三级权限b',
                                        level: 3,
                                    }
                                ]
                            },
                            {
                                id: 3,
                                name: '二级权限b',
                                level: 2,
                                //选中1个：false，全部选中：true，全未选：false
                                check: false,
                                //选中1个：true，全部选中：true，全未选：false
                                indeterminate: false,
                                checkArr: [],
                                sonPermissionList: [
                                    {
                                        id: 9,
                                        name: '三级权限c',
                                        level: 3,
                                    },
                                    {
                                        id: 10,
                                        name: '三级权限d',
                                        level: 3,
                                    }
                                ]
                            }
                        ]
                    }, {
                        id: 4,
                        name: '一级权限b',
                        level: 1,
                        check: false,
                        checkArr: [],
                        indeterminate: false,
                        sonPermissionList: [
                            {
                                id: 5,
                                name: '二级权限c',
                                level: 2,
                                check: false,
                                checkArr: [],
                                indeterminate: false,
                                sonPermissionList: [
                                    {
                                        id: 11,
                                        name: '三级权限e',
                                        level: 3
                                    },
                                    {
                                        id: 12,
                                        name: '三级权限f',
                                        level: 3
                                    }
                                ]
                            },
                            {
                                id: 6,
                                name: '二级权限d',
                                level: 2,
                                check: false,
                                checkArr: [],
                                indeterminate: false,
                                sonPermissionList: [
                                    {
                                        id: 13,
                                        name: '三级权限g',
                                        level: 3
                                    },
                                    {
                                        id: 14,
                                        name: '三级权限h',
                                        level: 3
                                    }
                                ]
                            }
                        ]
                    },
                ]

            }
        },
        mounted: function () {
            this.roleInit();
        },
        methods: {
            //一级权限-点击事件
            handleItemCheckAll(item) {
                // let item = this.permissionList[index];
                if (item.indeterminate) {
                    item.check = false;
                } else {
                    item.check = !item.check;
                }
                item.indeterminate = false;
                //二级权限全选
                if (item.check) {
                    //全选
                    item.sonPermissionList.forEach(function (itemSon) {
                        itemSon.check = true;
                        item.checkArr.push(itemSon.id);
                        //三级权限全选
                        let itemGrandsonList = itemSon.sonPermissionList;
                        itemGrandsonList.forEach(function (grandson) {
                            itemSon.checkArr.push(grandson.id);
                        })
                    });
                } else {
                    //取消全部选择
                    item.checkArr = [];
                    item.sonPermissionList.forEach(function (itemSon) {
                        itemSon.check = false;
                        itemSon.checkArr = [];
                    });
                }
            },
            //二级权限-点击事件
            handleItemSonCheckAll(itemSon, item) {
                /*let item = this.permissionList[index];
                let itemSon = this.permissionList[index].sonPermissionList[itemSonIndex];*/
                if (itemSon.indeterminate) {
                    itemSon.check = false;
                } else {
                    itemSon.check = !itemSon.check;
                }
                itemSon.indeterminate = false;
                //三级权限全选
                let sonPermission = itemSon.sonPermissionList;
                // 1.存在三级权限
                if (sonPermission && sonPermission.length > 0) {
                    if (itemSon.check) {
                        //全选
                        sonPermission.forEach(function (sonItem) {
                            if (itemSon.checkArr.indexOf(sonItem.id) < 0) {
                                itemSon.checkArr.push(sonItem.id);
                            }
                        });
                        if (item.checkArr.indexOf(itemSon.id) < 0) {
                            item.checkArr.push(itemSon.id);
                        }
                    } else {
                        //取消三级全部选择
                        itemSon.checkArr = [];
                        //从二级选中数组中移除当前二级权限
                        let curItemSonIndex = item.checkArr.indexOf(itemSon.id);
                        item.checkArr.splice(curItemSonIndex, curItemSonIndex + 1);
                    }
                    //处理一级权限勾选图标
                    let sonPermissionCount = item.sonPermissionList.length;
                    if (item.checkArr.length === sonPermissionCount) {
                        item.indeterminate = false;
                        item.check = true;
                    } else if (item.checkArr.length > 0) {
                        item.indeterminate = true;
                        item.check = false;
                    } else {
                        item.indeterminate = false;
                        item.check = false;
                    }
                } else {
                    // 2.不存在三级权限
                    if (itemSon.check) {
                        if (item.checkArr.indexOf(itemSon.id) < 0) {
                            item.checkArr.push(itemSon.id);
                        }
                    } else {
                        //从二级选中数组中移除当前二级权限
                        let curItemSonIndex = item.checkArr.indexOf(itemSon.id);
                        item.checkArr.splice(curItemSonIndex, curItemSonIndex + 1);
                    }
                    //处理一级权限勾选图标
                    let sonPermissionCountSe = item.sonPermissionList.length;
                    if (item.checkArr.length === sonPermissionCountSe) {
                        item.indeterminate = false;
                        item.check = true;
                    } else if (item.checkArr.length > 0) {
                        item.indeterminate = true;
                        item.check = false;
                    } else {
                        item.indeterminate = false;
                        item.check = false;
                    }
                }

            },
            //三级权限-点击事件
            handleGrandSonCheckChange(itemSon, item) {
                /*let item = this.permissionList[index];
                let itemSon = this.permissionList[index].sonPermissionList[itemSonIndex];*/
                let sonPermissionCount = itemSon.sonPermissionList.length;
                if (itemSon.checkArr.length === sonPermissionCount) {
                    itemSon.indeterminate = false;
                    itemSon.check = true;
                    item.checkArr.push(itemSon.id);
                } else if (itemSon.checkArr.length > 0) {
                    itemSon.indeterminate = true;
                    itemSon.check = false;
                } else {
                    itemSon.indeterminate = false;
                    itemSon.check = false;
                    //从二级选中数组中移除当前二级权限
                    let curItemSonIndex = item.checkArr.indexOf(itemSon.id);
                    item.checkArr.splice(curItemSonIndex, curItemSonIndex + 1);
                }
                let parentPermissionCount = item.sonPermissionList.length;
                if (item.checkArr.length === parentPermissionCount) {
                    item.indeterminate = false;
                    item.check = true;
                } else if (item.checkArr.length > 0) {
                    item.indeterminate = true;
                    item.check = false;
                } else {
                    item.indeterminate = false;
                    item.check = false;
                }
            },
            //点击角色数字跳转到账号管理页面
            goToAccManagerPage: function (item) {
                // this.$router.push({path: '/account/manager',query:item});
                // 回调首页更新菜单栏选择
                this.bus.$emit("callBack",item);
            },
            //选中角色
            selectRole: function (id) {
                let curId = id;
                let that = this;
                that.roleList.forEach(function (item) {
                    if (item.id === curId) {
                        item.imgUrl = roleSelectedImg;
                        item.selectFlag = "selected";
                        that.roleSelectId = item.id;
                    } else {
                        item.imgUrl = roleUnSelectImg;
                        item.selectFlag = "unSelect";
                    }
                });
                that.rolePermissionList();
            },
            //保存
            savePermission: function () {
                let request = {
                    roleId: this.roleSelectId,
                    permissionJson:JSON.stringify(this.permissionList)
                };
                let that = this;
                RoleManager.saveRolePermission(request, function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("保存角色失败!");
                        return;
                    }
                    if (data.code === '0000') {
                        that.$Message.info("保存角色权限成功!");
                    }
                })
            },
            //查询角色
            roleInit: function () {
                let that = this;
                that.roleList = [];
                RoleManager.listRoleInfoApi({}, function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询角色失败!");
                        return;
                    }
                    if (data.code === '0000') {
                        data = data.results;
                        for (let i = 0; i < data.length; i++) {
                            let row = data[i];
                            row.imgUrl = roleUnSelectImg;
                            if (i === 0) {
                                row.selectFlag = "selected";
                                row.imgUrl = roleSelectedImg;
                            } else {
                                row.selectFlag = "unSelect";
                            }
                            that.roleList.push(row);
                        }
                        that.roleSelectId = that.roleList[0].id;
                        that.rolePermissionList();
                    }
                })
            },
            //查询角色的所有权限
            rolePermissionList: function () {
                let request = {
                    roleId: this.roleSelectId
                };
                this.permissionList = [];
                let that = this;
                RoleManager.rolePermissionList(request, function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询角色权限失败!");
                        return;
                    }
                    if (data.code === '0000') {
                        data = data.results;
                        for (let i = 0; i < data.length; i++) {
                            let row = data[i];
                            that.permissionList.push(row);
                        }
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .addButton {
        background: #3496EB;
    }

    .deleteButton {
        border: 1px solid #3496EB;
        color: #3496EB;
        background: white;
    }

    .role-select-radio-group {
        height: 24px;
        line-height: 24px;
        color: #637182;
        border: 1px solid #EDEFF1;
    }

    .ivu-radio-group-button .ivu-radio-wrapper-checked:first-child {
        color: #2d8cf0 !important;
    }

    .system-role-div {
        height: 40px;
        padding: 10px;
    }

    .system-role-img {
        height: 12px;
        width: 12px;
        display: inline-block;
        margin-right: 9px;
        margin-left: 7px;
    }

    .system-role-name-selected {
        font-size: 14px;
        display: inline-block;
        color: #2074E2;
        cursor: default;
    }

    .system-role-name-un-select {
        font-size: 14px;
        display: inline-block;
        color: #535353;
        cursor: default;
    }

    .system-role-name-un-select:hover {
        color: #2074E2;
    }

    .system-role-number-selected {
        font-size: 13px;
        display: inline-block;
        color: #2074E2;
        float: right;
        margin-right: 11px;
        cursor: pointer;
    }

    .system-role-number-un-select {
        font-size: 13px;
        display: inline-block;
        color: #535353;
        float: right;
        margin-right: 11px;
        cursor: pointer;
    }

    .ivu-checkbox {
        margin-right: 13px;
    }

    .ivu-checkbox-checked .ivu-checkbox-inner {
        border-color: #2074E2 !important;
        background-color: #2074E2 !important;
    }

    .ivu-checkbox-indeterminate .ivu-checkbox-inner {
        border-color: #2074E2 !important;
        background-color: #2074E2 !important;
    }

    .title {
        margin: 15px 0 15px 15px;
    }

    .title-text{
        color: #697882;font-size: 12px;font-weight: 700;
    }
</style>
