<template>
    <div class="page">
        <LayoutTable :data='tableData' :config='tableConfig'  notDel />
        
        <el-dialog title="用户已分配的角色" :visible.sync="role.visible">
		      <el-form :model="role.form">
		        	<el-checkbox-group v-model="role.checkList" :min='500'>
		          		<el-checkbox v-for='item in allRoles' :key='item.id' :label="item.id">{{item.name}}</el-checkbox>
		        	</el-checkbox-group>
		      </el-form>
		      <div slot="footer" class="dialog-footer">
		        	<el-button size='mini' @click="role.visible = false">关闭</el-button>
		      </div>
    	</el-dialog>
    </div>
</template>

<script>
import table from "@/assets/mixins/table";

export default {
    mixins: [table],
    methods: {
    	// 打开弹窗
	    async findRole({id}) {
	      try {
	        this.tableData.loading = true;
	        this.allRoles = await this.getUserRoles(id);
	        this.role.checkList = await this.getRoleUsers(id);
	        this.role.visible = true;
	      } catch (error) {
	        this.$message.error(error.message);
	      }
	
	      this.tableData.loading = false;
	    },
    	// 获取用户角色列表
	    getUserRoles(id) {
	      return new Promise((resolve, reject)=>{
	        this.$post('/role/roleNameByUserId', {'userId': id}).then(({data})=>{
	          resolve(data);
	        }).catch(reject)
	      })
	    },
		getRoleUsers(id) {
	      return new Promise((resolve, reject)=>{
	        this.$post('/role/user/list', {'query.userId': id, 'pageInfo.prePageResult': -1}).then(({data})=>{
	          const result = data.result.filter(i=>i.roleId).map(i=>i.roleId);
	          resolve(result);
	        }).catch(reject)
	      })
	    },
    },
    data() {
        return {
        	allRoles: {},
	        role: {
	        checkList: [],
	        visible: false,
	     		 },
            config: {
                columns: [
                    {
                        type: "selection",
                        width: 60
                    },
                    {
                        prop: "id",
                        label: "ID",
                        width: 60
                    },
                    {
                        prop: "loginName",
                        label: "登录名称"
                    },
                    {
                        prop: "realName",
                        label: "昵称"
                    },
                    {
                        prop: "mobile",
                        label: "手机号码"
                    },
                    {
                        prop: "userType",
                        label: "用户类型",
                        width: 130,
                        formatter: this.formatter
                    },
                    {
                        prop: "status",
                        label: "状态",
                        width: 60,
                        formatter: this.formatter
                    },
                    {
                        label: "操作",
                        width: 220,
                        formatter: row => {
                            return (
                            <div>
                                <table-buttons row={row} onEdit={this.toEdit} onDel={this.toDel} noDel/>
                                <el-button round size='mini' type="info" icon="el-icon-tickets" onClick={()=>this.findRole(row)}>已分配的角色</el-button>
                  			</div>
                            );
                        }
                    }
                ],
                search: [
                    {
                        name: "loginName",
                        type: "text",
                        label: "登录名"
                    },
                    {
                        name: "realName",
                        type: "text",
                        label: "昵称"
                    },
                    {
                        name: "mobile",
                        type: "text",
                        label: "手机号"
                    },
                    {
                        name: "status",
                        type: "select",
                        label: "用户状态"
                    },
                    {
                        name: "userType",
                        type: "select",
                        label: "用户类型"
                    }
                ]
            }
        };
    }
};
</script>