<template> 
		<el-row :gutter="10">
			<el-col :span="8" class="border padding">
				<dept-tree
					show-root
					:show-count="false"
					:show-checkbox="true"
					:expand-on-click-node="false"
					@check-change="deptTreeCheckChange" 
					/>
			</el-col>
			<el-col :span="16" class="border padding">
				<ContentWrap :hide-header="true">
					<el-space wrap>
						<mdp-hi-query :column-configs="columnConfigs" v-model="hiQueryParams" @change="onHiQueryParamsChange"/>
						<el-button icon="zoom-out" @click="searchReset()" title="重置查询条件并查询"/> 
						<el-button v-if="multiple==true" :disabled="this.sels.length===0" type="primary" @click="selectListConfirm" icon="check">确认选择</el-button>

						
					<el-input v-model="filters.userid" style="width: 8em;" placeholder="用户编号查询" clearable title="支持>、<、 >=、<=、!=、*陈*、$IS NULL、$IN 1,2,3、between 1,5等操作符"/>

					<el-input v-model="filters.displayUserid" style="width: 8em;" placeholder="登陆编号查询" clearable title="支持>、<、 >=、<=、!=、*陈*、$IS NULL、$IN 1,2,3、between 1,5等操作符"/>

					<el-input v-model="filters.username" style="width: 8em;" placeholder="名称查询" clearable title="支持>、<、 >=、<=、!=、*陈*、$IS NULL、$IN 1,2,3、between 1,5等操作符"/>
					<el-button v-loading="load.list" :disabled="load.list==true" @click="searchTableDatas()" icon="search" >查询</el-button>

				</el-space> 
				</ContentWrap> 
					<!--列表 User 用户表-->
					<el-table v-adaptive :ref="refId+'Table'"  :data="tableDatas" @sort-change="sortChange" highlight-current-row v-loading="load.list" border @selection-change="selsChange" @row-click="rowClick" style="width: 100%;">
						
						<el-table-column  type="selection" width="55" fixed="left" v-if="multiple==true"/> 
						<el-table-column  type="index" width="55" fixed="left"/> 	
						<el-table-column prop="username"  label="用户名称" min-width="220" fixed="left" col-type="String" v-if="showCol('username')">
							
							<template #default="scope">
								<div class="avatar-container" @click="openForm({formData:scope.row,subOpType:'edit'})">
								<div class="avatar-wrapper">
									<img  v-if=" scope.row.headimgurl " class="user-avatar" :src="scope.row.headimgurl"/>
									<img  v-else class="user-avatar" src="../../../assets/image/user_img.gif"/>
									<span class="username"><i v-if="scope.row.sex=='0'" class="el-icon-female"></i><i v-else class="el-icon-male"></i> {{scope.row.username}}</span> 
								</div>    
							</div> 
							</template>
						</el-table-column>
						<el-table-column prop="userid" label="用户编号" min-width="120" show-overflow-tooltip col-type="String" v-if="showCol('userid')"/>
						<el-table-column prop="displayUserid"  label="登录编号" min-width="120" show-overflow-tooltip col-type="String" v-if="showCol('displayUserid')"/>

  
						<el-table-column label="操作" width="120" fixed="right" > 
							<template #default="scope"> 
				        		<el-button v-if="multiple!==true"  type="primary" @click="selectConfirm(scope.row)">选择</el-button> 
							</template>
						</el-table-column>
					</el-table> 
					<el-pagination class="padding-top"
						layout="slot,total, sizes, prev, next,pager,jumper"
						@current-change="handleCurrentChange"
						@size-change="handleSizeChange"
						:page-sizes="[10,20, 50, 100, 500]"
						:current-page="pageInfo.pageNum"
						:page-size="pageInfo.pageSize"
						:total="pageInfo.total"
						style="float:right;"
					/>   
			</el-col>
		</el-row>  
</template>

<script>
 
import { MdpTableMixin } from '../../mdp-ui/mixin/MdpTableMixin.js'; 
 import DeptTree from "../mdp-select-dept/DeptTree.vue"; 

export default {
    name:'user-select',
    mixins:[MdpTableMixin],
    components: { 
		DeptTree,   
    },
    computed: {
    },
    watch:{
    },
    data() {
        return {
            menuDefId:'',//menu_def.id 菜单表菜单编号，用于按钮权限判断
            menuDefName:'用户表',//menu_def.name 功能名称，用于导出excel等文件名
            refId:'user',//引用编号，<table :ref="refId+'Table'"> <form :ref="refId+'Form'">
            pkNames:["userid"],//表格主键的java属性名称，驼峰命名，默认为id,支持多主键
            currOpType:'select',//表格 mng-综合管理具有最大权限，所有按钮可动、detail-只看不能操作
            filters:{//查询参数

            },
            defaultFilters:{//默认查询参数,第一次打开界面的时候用到，恢复默认值的时候用到

            },

            defaultCheckColumnNum:4,//默认展示的表格列数，前8列
			userInviteVisible:false,

            //增删改查(含批量)接口
            apis:{
                list: this.$mdp.listUser, 
            }
        }
    },
    methods: {
         //页面初始化需要配置的特殊逻辑写这里
          initCurrData(){
             this.searchTableDatas();
          },

          /**
           * 检查参数是否满足调用后台接口的条件
           *
           * @param params 提交给后台的参数池,map类型
           * @returns true / false
           */
          preQueryParamCheck(params){
              return true;
          },

          //页面数据加载完后需要对数据进行加工处理的
          afterList(res,isOk,apiName){

          },

          /**
           * 对修改的字段进行判断，返回false ,将取消更新数据库
           * @param {*} row 当前选中的行
           * @param {*} fieldName 修改的字段名
           * @param {*} $event 修改后的值
           * @param {*} params 将要提交服务器的参数
           * @returns true/false 返回false ,将取消更新数据库
           */
          editSomeFieldsCheck(row,fieldName,$event,params){
              if(this.currOpType=='add'||this.currOpType=='detail'){
                  return false;
              }
              params[fieldName]=$event
              return true;
          },

         
		deptTreeCheckChange(data, isSelect, leafSelect) { 
			if(isSelect==false){
				this.dept=null;
				this.filters.deptid=''
			}else{
				this.dept = data;
				this.filters.deptid=this.dept.deptid
			} 
			this.searchTableDatas(); 
		},   
    },
    mounted() {

    }
}

</script>

<style scoped>
</style>