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

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import UserForm from "./user-form.vue";
import UserDetailForm from "./user-detail.vue";
@Component({
  components: {
    UserForm,UserDetailForm
  }
})
export default class Role extends Vue {
   modelFlag : boolean = false;
   private activeModel : any = {
      code:"",
      name:"",
      description:"",
      roleMenus:[]
  };
   private csTable : any = {
            formWidth: 35,
            parentVm: this,
            dataSrc: this.$msPrefix.base+"/api/v1/data/list/user",
            delSrc: this.$msPrefix.base+"/api/v1/data/delete/user/",
            batchDelUri: this.$msPrefix.base+"/api/v1/data/batch/user",
            dataProp: "data.content",
            postMethod: true,
            pageableProp: {
                pageSize: "data.size",
                total: "data.totalElements",
                currentPage: "data.number"
            },
            showIndex: true,
            emptyModel:  {
                name:""
            },
            search: {
                show: true,
                prop: "usernameLike",
                value: "",
                placeholder: "输入用户名称搜索"
            },
            disableFun:function(tableData){
                tableData.forEach(element => {
                    if(element.username == 'admin'){
                   element._disabled=true;
                }
                });              
            },
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                }, {
                    key: 'username',
                    title: '用户名',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    sortable: "custom"
                },{
                    key: 'name',
                    title: '姓名',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    sortable: "custom"
                },{
                    key: 'phone',
                    title: '联系电话',
                    align: 'center',
                    ellipsis: true,
                    tooltip: true,
                    sortable: "custom"
                },{
                    key: 'email',
                    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'
                        },{
                            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.username == 'admin')return true;
        }
        clickEvent(name:string, obj:any) {
                    if(name == 'delete') {
                        (this.$refs.child as any).handleDelete(obj.id)
                    }else if(name == 'detail'){
                         this.activeModel=_.cloneDeep(obj);
                         var roleList = '';
                         for(var i=0;i<this.activeModel.roles.length-1;i++){
                             roleList = roleList + this.activeModel.roles[i].name + ',';
                         }
                         roleList = roleList + this.activeModel.roles[this.activeModel.roles.length-1].name; 
                         this.activeModel.roles = roleList;                  
                         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> = [];var disabled;
                         (this.$refs.child as any).formInfo.model.roles.forEach(element => {
                            list.push(element.id);
                         });
                         (this.$refs.child as any).formInfo.model.roles = list;   
                          (this.$refs.child as any).formInfo.model.if = true;            
                        (this.$refs.child as any).dialogVisible = true;
                    }

                }

        closeModal(){
            this.modelFlag=!1;
        }


}
</script>
