<template>
 <div class="oo-page">
     <div class="oo-server">
        <cs-dynamic-table ref="child" :prop="csTable" :parent="this">
            <template slot="form" scope="props">
                <role-form :model="props.obj" :action="props.action" :tableVm="props.tableVm" @closeModal="props.closeModal" :tableInfo="props.tableInfo" ref="form"></role-form>
            </template>
        </cs-dynamic-table>
         <Modal v-model="modelFlag" title="详情" width="50" :mask-closable="false" @closeModal="closeModal">
            <role-detail-form @closeModal="closeModal" ref="manage" :detail="activeModel"></role-detail-form>
            <div slot="footer"></div>
        </Modal>
    </div>
 </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import RoleForm from "./role-form.vue";
import RoleDetailForm from "./role-detail.vue";
@Component({
  components: {
    RoleForm,RoleDetailForm
  }
})
export default class Role extends Vue {
   modelFlag : boolean = false;
   menuList:any = {};
   private activeModel : any = {
      code:"",
      name:"",
      description:"",
      roleMenus:''
  };
   private csTable : any = {
            formWidth: 35,
            parentVm: this,
            dataSrc: this.$msPrefix.base+"/api/v1/data/list/role",
            delSrc: this.$msPrefix.base+"/api/v1/data/delete/role/",
            batchDelUri: this.$msPrefix.base+"/api/v1/data/batch/role",
            dataProp: "data.content",
            postMethod: true,
            pageableProp: {
                pageSize: "data.size",
                total: "data.totalElements",
                currentPage: "data.number"
            },
            showIndex: true,
            emptyModel:  {
                name:""
            },
            search: {
                show: true,
                prop: "nameLike",
                value: "",
                placeholder: "输入角色名称搜索"
            },
            disableFun:function(tableData){
                tableData.forEach(element => {
                    if(element.code == 'admin'){
                   element._disabled=true;
                }
                });              
            },
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                  
                }, {
                    key: 'code',
                    title: '角色代码',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    sortable: "custom"
                },{
                    key: 'name',
                    title: '角色名称',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    sortable: "custom"
                },{
                    key: 'description',
                    title: '角色描述',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    sortable: "custom"
                },
                {
                    title: '操作',
                    key: 'action',
                    minWidth:200,
                    align: 'center',
                    render: (h, params) => {
                        let menus = [{
                            icon: 'ios-eye',
                            action: 'detail',
                            label: '详情',
                            type:'primary',
                            disabled:false
                        },{
                            icon: 'ios-create-outline',
                            action: 'update',
                            label: '编辑',
                            type:'primary',
                             disabled:this.setCancelLoading(params)
                        },{
                            icon: 'md-trash',
                            action: 'delete',
                            label: '删除',
                            type:'error',
                             disabled:this.setCancelLoading(params)

                        }];
                        let clickEvent = this.clickEvent;
                        return h('div', [
                            h('CsButton', {
                                props: {
                                    actions: menus,
                                    click: clickEvent,
                                    data: params.row,
                                    size:"small",
                                    styleCss:"marginRight:5px",
                                    // disabled:params.row._disabled
                                },
                            })
                        ]);
                    }
                }]
        }

         setCancelLoading(params){
            if(params.row.code == 'admin')return true;
        }
        clickEvent(name:string, obj:any) {
                    
                    console.info(name)
                    if(name == 'delete') {
                        (this.$refs.child as any).handleDelete(obj.id)
                    }else if(name == 'detail'){
                         this.activeModel=_.cloneDeep(obj);
                          var list : Array<any> = [];
                         this.activeModel.roleMenus.forEach(element => {
                            list.push(element.id.menu.id);
                         });
                         list = this.handleRoleMenu(list);
                         var menuList = '';
                         for(var i=0;i<list.length-1;i++){
                             menuList = menuList + this.menuList[list[i]].name + ',';
                         }
                         menuList = menuList + this.menuList[list[list.length-1]].name;
                         this.activeModel.roleMenus = menuList;
                          this.modelFlag=!0;
                    }else{
                        (this.$refs.child as any).formInfo.title = name == 'update' ? "编辑" : "详情";
                        (this.$refs.child as any).formInfo.action = name == 'update' ? 'update' : 'detail';
                        (this.$refs.child as any).formInfo.model = _.cloneDeep(obj);
                        var list : Array<any> = [];
                         (this.$refs.child as any).formInfo.model.roleMenus.forEach(element => {
                            list.push(element.id.menu.id);
                         });
                          list = this.handleRoleMenu(list);
                         (this.$refs.child as any).formInfo.model.roleMenus = list;
                           (this.$refs.child as any).formInfo.model.if = true;  
                        (this.$refs.child as any).dialogVisible = true;
                    }

                }

        closeModal(){
            this.modelFlag=!1;
        }
        mounted(){
            this.getMenuList();
            console.log('%%%%',this.menuList)
        }
        getMenuList(){
            this.menuList = {};
            this.getApiData('post',this.$msPrefix.base+'/api/v1/data/list/menu?size=1000&page=0','',res=>{
                    if (res.rtnCode == 0) {
                         res.data.content.forEach(element => {
                             this.menuList[element.id] = element;
                         });
                    }
                },err=>{
            });
        }
        //如果上级菜单的全部子菜单，都被选中，那么合并成父菜单；否则单独显示子菜单，去掉父菜单
        handleRoleMenu(roleMenus){
            var res = _.cloneDeep(roleMenus);
            roleMenus.forEach(element => {
                var childrenList : Array<any> = [];
                this.getAllChildrenMenu(this.menuList[element],childrenList);
                if(childrenList.length != 0){
                    this.uniqueArr(childrenList);                 
                    if(this.includes( roleMenus,childrenList)){
                        this.removePointById(res,childrenList);
                    }else{
                        var index = res.indexOf(element);
                        res.splice(index,1);
                    }
                }
                
            });
            return res;
        }
         uniqueArr(ary){
            ary.sort(function(a,b){return a-b;});
            for(var i=0;i<ary.length;i++){
                if(ary[i]===ary[i+1]){
                    ary.splice(i,1);
                    i--;
                }
            }
        }
         removePointById(arr1,arr2){
            for(let i=0;i<arr2.length;i++){
                for(let j=0;j<arr1.length;j++){
                    if(arr2[i]== arr1[j]){
                    let indexs = arr1.indexOf(arr1[j]);
                    arr1.splice(indexs, 1);
                }
              }
            }             
            return arr1
        }
        includes(arr1, arr2) {
            return arr2.every(val => arr1.includes(val));
        }
        isEmpty(obj){
        	return (typeof obj === 'undefined' || obj === null || obj === "" || obj.length ==0);
        }
        getAllChildrenMenu(menu,arr){
            if(menu.children&&menu.children.length>0){
                menu.children.forEach(element => {
                    // if(element.name != '分组管理'){
                        arr.push(element.id);
                        this.getAllChildrenMenu(element,arr);
                    // }                    
                });
            }
        }

}
</script>
