<template>
    <div>
        <h1>
             我是角色管理页面
        </h1>

<!--增加菜单-->
        <el-button type="primary" @click="addRoleBtn" round size="small"><i class="el-icon-circle-plus-outline"></i> 新增</el-button>
        <br><br>
<!--角色管理-->
        <el-table
                ref="multipleTable"
                stripe border fit highlight-current-row
                :data="list"
                height="961"
                style="width: 100%">
            <el-table-column type="index"    label="序号"    width="240" align="center"></el-table-column>
            <el-table-column prop="role_name"    label="角色名称" width="240" align="center"></el-table-column>
            <el-table-column prop="role_status"  label="可用状态" width="240" align="center"></el-table-column>
            <el-table-column prop="permission"
                             label="权限"
                             :formatter="formatter"
                             width="280"
                             align="center"></el-table-column>
<!--单个删除-->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="small"
                            type="info"
                            @click="handleEdit(scope.$index, scope.row)">
                        <i class="el-icon-edit"></i>编辑</el-button>
                    <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">
                        <i class="el-icon-delete"></i>_删除</el-button>
                </template>
            </el-table-column>
        </el-table>

<!--菜单信息-新增/编辑弹窗层-->
        <el-dialog
                :title="form._id?'修改角色':'新增角色'"
                :visible.sync="dialogVisibleAdd"
                width="50%">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<!--菜单名称-->
                <el-form-item label="角色名称" prop="label">
                    <el-input v-model="form.role_name" style="width: 25%"></el-input>
                </el-form-item>

<!--角色权限管理-->
                <el-form-item label="角色权限" >
                    <el-checkbox-group v-model="checkListValue"
                                       @change="handleCheckedCitiesChange">
                        <el-checkbox
                                v-for="item in checkList"
                                :label="item._id">{{item.label}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
<!--立即创建/取消-->
                <el-form-item>
                    <el-button type="primary" @click="form._id?updateRoleBtn():createRoleBtn()" round>{{form._id?'修改':'新增'}}</el-button>
                    <el-button type="warning" @click="cancelBtnClick" round>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
<!--底部说明-->
        <footer>
            <p>{{CopyRight}}</p>
        </footer>
    </div>
</template>

<script>
    const axios=require('axios');
    import Cookies from 'js-cookie';



    export default {
        data(){
            return{

                ceshi1:[],
                value:[],
                checkList:[],
                checkListValue:[],
                rolePermissionList:[],
                list:[],
                CopyRight:'2020  Role  Vue  Demo ! ',
                dialogVisibleAdd:false,
                form: {
                    _id:'',
                    role_name:'',
                    role_status:'',
                    permission:[],
                },
                rules:{
                    role_name:[
                        {required:true,message:'请填菜单名称',trigger:'blur'}
                    ],
                }
            }
        },
        created(){
            this.getRoleInfo();
            this.getMenuInfo();
        },
        methods:{
            getRoleInfo(){
                axios.get('https://mz.tshe.cn/restauantCH/role/roleMenuFindPopulate')
                    .then((res)=>{
                        // console.log(res.data.data,'RoleInfo!!')
                        this.list=res.data.data;
                    })
            },
            getMenuInfo(){//获取菜单表的信息，作为角色表的权限
                const MenuInfoArr=[];
                axios.post('https://mz.tshe.cn/restauantCH/menu/find')
                    .then((res)=>{
                        // console.log(res.data.data,'MenuInfo')
                        res.data.data.forEach((item)=>{
                            MenuInfoArr.push(item)
                        })
                        this.checkList=MenuInfoArr;
                    })
            },
            formatter(row, column) {
                const permissionArr=[];
                row.permission.forEach((item)=>{
                    permissionArr.push(`${item.label} `)
                })
                return permissionArr;
            },
            handleCheckedCitiesChange(value){
                this.checkListValue=value;
                // console.log(this.checkListValue,'点击选择的复选框集合！')
            },
            //单条删除
            handleDelete(index,row) {
                if (confirm('确定要删除吗') == true) {
                    axios.post('https://mz.tshe.cn/restauantCH/role/remove', {_id: row._id})
                        .then((res) => {
                            this.$message.success('删除成功!')
                            const that=this;
                            setTimeout(function () {
                                that.getRoleInfo()
                            },300)
                        })
                }
            },
            //新增角色-打开Dilog弹窗
            addRoleBtn(){
                this.form._id='',
                this.form.role_name='',
                this.value=[],
                this.checkListValue=[],
                this.dialogVisibleAdd =true;
            },
            //新增角色
            createRoleBtn(){
                //点击创建;
                //细节分为：1.权限长度为1创建 2.长度大于1的时候创建，分别调用不同的接口
                if(this.checkListValue.length==0 || this.form.role_name.length==0){
                    if(this.form.role_name.length==0){
                        this.$message.error('请填写要生成的角色名');
                    }
                    else if(this.value.length==0){
                        this.$message.error('请至少选择一项');
                    }
                }
                else if(this.checkListValue.length==1){
                    console.log(this.checkListValue[0],'this.checkListValue!!!');
                    axios.post('https://mz.tshe.cn/restauantCH/role/roleAddOne',{
                        role_name:this.form.role_name,
                        permission:this.checkListValue[0]
                    })
                        .then((res)=>{
                            if(res.data.code==0){
                                this.$message.success(`角色-${this.form.role_name}-生成成功`);
                                this.dialogVisibleAdd=false;
                                this.getRoleInfo();
                            }
                            if(res.data.code==-1) this.$message.error(res.data.msg);
                        })
                }
                else{//多条插入
                    axios.post('https://mz.tshe.cn/restauantCH/role/roleAddOne',{
                        role_name:this.form.role_name,
                        permission:this.checkListValue[0]
                    })
                        .then(async(res)=>{
                            for(let i=0;i<this.checkListValue.length-1;i++){
                                axios.post('https://mz.tshe.cn/restauantCH/role/roleAddMany',{
                                    role_name:this.form.role_name,
                                    permission:this.checkListValue[i+1]
                                })
                            }
                            if(res.data.code==0){
                                this.$message.success(`多级权限-${this.form.role_name}-生成成功`);
                                this.checkListValue=[];
                                this.dialogVisibleAdd=false;
                                const that = this;
                                setTimeout(function () {
                                    that.getRoleInfo();
                                }, 300);
                            }
                            else if(res.data.code==-1) {
                                this.$message.error(res.data.msg);
                            }
                        })
                }
            },
            //dialog-编辑弹窗
            handleEdit(index, row) {
                console.log(row,'点击获取行信息！！');
                this.dialogVisibleAdd = true;

                const permissionArrList=[];
                row.permission.forEach((item)=>{
                    permissionArrList.push(item._id);
                })
                //将row的信息 赋值给form
                this.form = {
                    _id:row._id,
                    role_name:row.role_name,
                    role_status:row.role_status,
                    permission:permissionArrList
                };
                this.checkListValue=permissionArrList;
                console.log(this.form,'dialog-编辑按钮')
            },
            //编辑弹窗-修改按钮
            updateRoleBtn(){
               axios.post('https://mz.tshe.cn/restauantCH/role/updateRoleName',
                    {_id:this.form._id,
                    role_name:this.form.role_name})
                   .then(res=>{
                       console.log(res,'res')
                       if(res.data.code==0){//继续执行
                           console.log('我要删除子文档了！')
                           axios.post('https://mz.tshe.cn/restauantCH/role/emptyChlidrenInfo',{
                               _id:this.form._id,
                           })
                               .then(()=>{
                                   //这个直接增加子文档，不走新增角色接口
                                   for(let i=0;i<this.checkListValue.length;i++){
                                       axios.post('https://mz.tshe.cn/restauantCH/role/roleAddMany',{
                                           role_name:this.form.role_name,
                                           permission:this.checkListValue[i]
                                       })
                                   }
                                   this.dialogVisibleAdd=false;
                                   this.$message.success('修改成功') ;
                                   //这块可以做个优化，
                                   //如果修改的不是自己的，就setTimeout，是自己的就刷新，
                                   //因为，如果修改自己的，在用setTimeout的话，导航栏新增的不刷新
                                   //定时任务
                                   let that = this;
                                   setTimeout(function () {
                                       that.getRoleInfo();
                                   }, 300);
                               })
                       }
                       else{//角色名重复
                           this.$message.error(res.data.msg)
                       }
                   })
            },
            cancelBtnClick(){
                this.form._id='',
                this.form.role_name='',
                this.form.role_status='',
                this.value=[],
                this.dialogVisibleAdd =false;
            },
        }
    }
</script>
