<template>
    <div class="user role">
        <Card :bordered="false" dis-hover>
            <bingo-list
                :columns="columns"
                :pageSetting="pageSetting"
                :page="true"
                :isAdvanceTable="false"
                :showBtnType="'all'"
                :showBtnOutNum="2"
                :toolbarNew="true"
                ref="bingoList"
                :searchList="searchList"
                :dataApi="Api"
                :queryData="queryData"
                :isSearch="true"
                :isSearchAdvance="true"
                :showSwitchBtn="false"
                :processData="processData"
                @on-query-submit="querySubmit"
                @on-add-new="onAddNew"
                @on-edit-btn="onEditBtn"
                :showNewBtn="auth.add!==0"
                :isEditBtn="auth.edit!==0"
                :isDeleteBtn="auth.delete!==0"
                v-if="auth.table!==0"
            >
                <template slot="action" slot-scope="{ row, index }">
                    <Button
                        class="btn-more"
                        size="small"
                        @click="funcAuth(row)"
                        v-if="auth.funcAuth!==0"
                    >
                    <i class="icon iconfont iconquanxianguanli"></i>
                    <span class="font">功能权限</span></Button
                    >
                    <!-- <Button
                        class="btn-more"
                        size="small"
                        @click="dataAuth(row)"
                    ><i class="icon iconfont iconqueding"></i>
                    <span class="font">数据权限</span></Button
                    > -->
                    <Button
                        class="btn-more"
                        size="small"
                        @click="allotGroup(row)"
                        v-if="auth.allotGroup!==0"
                    >
                    <i class="icon iconfont iconqunzuguanli"></i>
                    <span class="font">分配群组</span></Button
                    >
                    <Button
                        class="btn-more"
                        size="small"
                        @click="allotUser(row)"
                        v-if="auth.allotUser!==0"
                    >
                    <i class="icon iconfont iconyonghuguanli"></i>
                    <span class="font">分配用户</span></Button
                    >
                </template>
            <!-- 高级搜索 -->
                <template slot="queryForm">
                    <bingo-grid-item>
                        <bingo-form-item label="角色名称" prop="nameCn">
                            <Input
                                v-model="queryData.nameCn"
                                placeholder="请输入角色名称"
                            />
                        </bingo-form-item>
                    </bingo-grid-item>
                </template>
            </bingo-list>
        </Card>
        <Modal v-model="isShowNewForm" :title="isAdd==true?'新建':'修改'" @on-ok="onOk" :width="900">
            <Form ref="formAdd" :model="formAdd" label-position="right" :label-width="90">
                <Row>
                    <Col :span="12">
                        <bingo-form-item label="角色名称">
                            <Input type="text" v-model="formAdd.nameCn" placeholder="请输入角色名称">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="德文名称">
                            <Input type="text" v-model="formAdd.nameDe" placeholder="请输入德文名称">
                            </Input>
                        </bingo-form-item>
                    </Col>
                    <Col :span="12">
                        <bingo-form-item label="英文名称">
                            <Input type="text" v-model="formAdd.nameEn" placeholder="请输入英文名称">
                            </Input>
                        </bingo-form-item>
                    </Col>
                </Row>
            </Form>
        </Modal>
        <bingo-modal-select
        ref="modalUser"
        :title="'分配用户'"
        :datas="datasUser"
        :show-input="false"
        :columns="selectColumnsUser"
        :field="'nameCn'"
        :value="selectedUsers"
        :keyId="'sn'"
        @on-ok="onSelectOkUser"
        @getData="getDataUser">
                    <bingo-grid-item>
                        <bingo-form-item label="用户名称" prop="nameCn">
                            <Input v-model="userArr.nameCn" placeholder=""/>
                        </bingo-form-item>
                    </bingo-grid-item>
        </bingo-modal-select>
        <bingo-modal-select
        ref="modalGroup"
        :title="'分配群组'"
        :datas="datasGroup"
        :show-input="false"
        :columns="selectColumnsGroup"
        :field="'nameCn'"
        :value="selectedGroups"
        :keyId="'sn'"
        @on-ok="onSelectOkGroup"
        @getData="getDataGroup">
                    <bingo-grid-item>
                        <bingo-form-item label="用户组" prop="nameCn">
                            <Input v-model="groupArr.nameCn" placeholder=""/>
                        </bingo-form-item>
                    </bingo-grid-item>
        </bingo-modal-select>
        <Modal v-model="showFunc" title="功能权限" width="900" @on-ok="onOkFunc">
            <Form :model="funcAuthForm" label-position="right" :label-width="90">
                <bingo-form-item label="角色名称" prop="nameCn">
                    <Input v-model="funcAuthForm.nameCn" placeholder="" disabled/>
                </bingo-form-item>
                <bingo-form-item label="分配菜单" prop="nameCn">
                    <Tree :data="menuData" show-checkbox multiple @on-check-change="onChangeTree"></Tree>
                </bingo-form-item>
            </Form>
        </Modal>
        <!-- <Modal v-model="showData" title="数据权限" width="900">
            <Form :model="dataAuthForm" label-position="right" :label-width="90">
                <bingo-form-item label="角色名称" prop="nameCn">
                    <Input v-model="dataAuthForm.nameCn" placeholder="" disabled/>
                </bingo-form-item>
                <bingo-form-item label="数据范围" prop="nameCn">
                    <Select v-model="dataAuthForm.dataRange">
                      <Option v-for="item in dataRangeArr" :value="item.value" :key="item.value">{{item.label}}</Option>
                    </Select>
                </bingo-form-item>
            </Form>
        </Modal> -->
    </div>
</template>
<script>
    import bingoList from '@/components/bingo-list';
    import Api from '@/api/system/role';
    import userApi from '@/api/system/user';
    import groupApi from '@/api/system/group';
    import menuApi from '@/api/system/menu';
    import rbacApi from '@/api/system/rbac'
    import module from '@/mixins/module';
    import bingoModalSelect from '@/components/bingo-modal-select'
    import util from '@/utils/tool'
    export default {
        name:'plat-role',
        data () {
            return {
                columns: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        title: '角色名称',
                        key: 'nameCn'
                    },
                    {
                        title: '创建人',
                        key: 'creator'
                    },
                    {
                        title: '创建时间',
                        key: 'createTime'
                    },
                    {
                        title: '修改人',
                        key: 'modifier'
                    },
                    {
                        title: '修改时间',
                        key: 'modifyTime'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        align: 'center',
                        width: 200
                    }
                ],
                Api: Api,
                pageSetting: {
                    pageNum: 1,
                    pageSize: 20,
                    showSizer: true
                },
                // 搜索的字段
                searchList: [
                    {
                        label: '角色名称',
                        value: 'nameCn',
                        type: 'input'
                    }
                ],
                tableData: [],
                queryData: {
                    nameCn: '',
                    nameDe: '',
                    nameEn: '',
                    sn: ''
                },
                queryObj: {},
                isShowNewForm: false,
                formAdd: {
                    nameCn: '',
                    nameDe: '',
                    nameEn: '',
                    sn: ''
                },
                grid: {
                    xl: 12,
                    lg: 13,
                    md: 13,
                    sm: 24,
                    xs: 24
                },
                isAdd: true,
                datasUser: [],
                datasGroup: [],
                selectColumnsUser: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        title: '用户名称',
                        key: 'nameCn'
                    },
                    {
                        title: '账号',
                        key: 'account'
                    }
                ],
                selectColumnsGroup: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        title: '用户组',
                        key: 'nameCn'
                    }
                ],
                userArr: {
                    nameCn: '',
                    account: ''
                },
                groupArr: {
                    nameCn: ''
                },
                row: {},
                selectedUsers: [],
                selectedGroups: [],
                showFunc: false,
                menuData: [],
                menuValue: [],
                showData: false,
                funcAuthForm: {
                    nameCn: '',
                    treeData: []
                },
                dataAuthForm: {
                    nameCn: '',
                    dataRange: ''
                }
                // dataRangeArr: [
                //     {
                //         value: 0,
                //         label: '全部数据权限'
                //     },
                //     {
                //         value: 1,
                //         label: '本部门数据权限'
                //     },
                //     {
                //         value: 2,
                //         label: '本部门及以下数据权限'
                //     },
                //     {
                //         value: 3,
                //         label: '仅本人数据权限'
                //     }
                // ]
            };
        },
        created () {
            // this.getAuth();
            this.auth = JSON.parse(localStorage.getItem('auth'));
        },
        mixins: [module],
        methods: {
            // 获取权限
            // async getAuth () {
            //     let auth = await this.getPermission();
            //     this.auth = JSON.parse(JSON.stringfy(auth));
            // },
            // 功能权限
            funcAuth (row) {
                let _this = this;
                this.row = row;
                this.funcAuthForm.nameCn = row.nameCn;
                let data = { sn: row.sn };
                menuApi.getMenusByRole(data).then(res => {
                    if (res.rows.length > 0) {
                        res.rows.forEach(item => {
                            item.title = item.nameCn;
                            if (item.isCheck === 1 && item.parentId !== 0) {
                                _this.$set(item, 'checked', true);
                            }
                        })
                    }
                    function findChild (curPid) {
                        var _arr = [];
                        var items = res.rows;
                        var length = items.length;
                        for (var i = 0; i < length; i++) {
                            items[i].path = items[i].url;
                            if (items[i].parentId == curPid) {
                                var _obj = items[i];
                                _obj.children = findChild(_obj.id);
                                if (_obj.children.length > 0) {
                                    _obj.expand = true;
                                }
                                _arr.push(_obj);
                            }
                        }
                        return _arr;
                    }
                    let menuData = findChild(0);
                    this.menuData = menuData;
                    this.showFunc = true;
                })
            },
            // 数据权限
            // dataAuth (row) {
            //     this.dataAuthForm.nameCn = row.nameCn;
            //     this.showData = true;
            // },
            // 弹出层查询
            querySubmit (obj) {
                if (obj) {
                    this.queryObj = obj;
                }
                this.$refs.bingoList.getTableData(this.queryObj);
            },
            // 分配群组
            allotGroup (row) {
                this.row = row;
                let data = { sn: row.sn }
                groupApi.getGroupsByRole(data).then(res => {
                    if (res.rows.length > 0) {
                        this.selectedGroups = res.rows.filter(item => item.isCheck === 1);
                    }
                    this.getDataGroup();
                })
            },
            // 分配用户
            allotUser (row) {
                this.row = row;
                let data = { sn: row.sn }
                userApi.getUsersByRole(data).then(res => {
                    if (res.rows.length > 0) {
                        this.selectedUsers = res.rows.filter(item => item.isCheck === 1);
                    }
                    this.getDataUser();
                })
            },
            // 获取用户列表
            getDataUser () {
                let data = this.userArr;
                userApi.tableList(data).then(res => {
                    this.datasUser = res.rows;
                    this.$refs.modalUser.show = true;
                })
            },
            // 获取群组列表
            getDataGroup () {
                let data = this.userArr;
                groupApi.tableList(data).then(res => {
                    this.datasGroup = res.rows;
                    this.$refs.modalGroup.show = true;
                })
            },
            // 选用户
            onSelectOkUser (areaData) {
                let userSns = [];
                if (areaData.length > 0) {
                    userSns = areaData.map(item => item.sn);
                }
                let data = {
                    userSns: userSns,
                    sn: this.row.sn
                }
                rbacApi.roleUsers(data).then(res => {
                    this.$Message.success('分配用户成功');
                })
            },
            // 选群组
            onSelectOkGroup (areaData) {
                let groupSns = [];
                if (areaData.length > 0) {
                    groupSns = areaData.map(item => item.sn);
                }
                let data = {
                    groupSns: groupSns,
                    sn: this.row.sn
                }
                rbacApi.roleGroups(data).then(res => {
                    this.$Message.success('分配群组成功');
                })
            },
            // 新建
            async onAddNew () {
                this.isAdd = true;
                for (let i in this.formAdd) {
                    if (Array.isArray(this.formAdd[i])) {
                        this.formAdd[i] = [];
                    } else {
                        this.formAdd[i] = '';
                    }
                }
                this.formAdd.sn = await this.getSn();
                this.isShowNewForm = true;
            },
            // 新建确定
            onOk () {
                if (this.isAdd) {
                    Api.addTable(this.formAdd).then(res => {
                        this.$Message.success('新建成功');
                        this.$refs.bingoList.getTableData();
                    })
                } else {
                    Api.editTable(this.formAdd).then(res => {
                        this.$Message.success('修改成功');
                        this.$refs.bingoList.getTableData();
                    })
                }
            },
            // 编辑
            onEditBtn (id) {
                this.isAdd = false;
                Api.getTableById(id).then(res => {
                    this.formAdd = res;
                    this.isShowNewForm = true;
                })
            },
            // 选择树
            onChangeTree (value) {
                // let dataArr = [];
                // for (let i = 0; i < value.length; i++) {
                //     getParent(this.menuData, value[i]);
                // }
                // function getParent (data, val) {
                //     if (data.length > 0) {
                //         data.forEach(function (item) {
                //             if (item.id === val.parentId) {
                //                 dataArr.push(item);
                //                 if (item.parentId != 0) {
                //                     getParent(data, item)
                //                 }
                //             }
                //             if (item.children) {
                //                 getParent(item.children, val);
                //             }
                //         })
                //     }
                // }
                // dataArr = dataArr.concat(value);
                // let array = [];
                // for (let i = 0; i < dataArr.length; i++) {
                //     if (!array.includes(dataArr[i])) {
                //         array.push(dataArr[i]);
                //     }
                // }
                this.funcAuthForm.treeData = value;
            },
            // 分配菜单
            onOkFunc () {
                let areaData = this.funcAuthForm.treeData;
                let menuSns = [];
                if (areaData.length > 0) {
                    menuSns = areaData.map(item => item.sn);
                }
                let data = {
                    menuSns: menuSns,
                    sn: this.row.sn
                }
                rbacApi.roleMenus(data).then(res => {
                    this.$Message.success('分配功能权限成功');
                })
            },
            // 处理数据
            processData (data) {
                data.forEach(item => {
                    if (item.createTime) {
                        item.createTime = util.format(new Date(item.createTime), 'yyyy-MM-dd');
                    }
                    if (item.modifyTime) {
                        item.modifyTime = util.format(new Date(item.modifyTime), 'yyyy-MM-dd')
                    }
                });
            }
        },
        components: { bingoList, bingoModalSelect }
    };
</script>
