<template>
	<section>
		<el-row  class="app-container">
			<el-input v-model="filters.key" style="width: 20%;" placeholder="模糊查询"></el-input>
			<el-button type="primary" v-loading="load.list" :disabled="load.list==true" v-on:click="searchMemMembers" icon="el-icon-search"></el-button>
			<!-- <el-button type="primary" @click="showAdd" icon="el-icon-plus">mem_member</el-button> -->
		<!-- 	<el-button type="danger" v-loading="load.del" @click="batchDel" :disabled="this.sels.length===0 || load.del==true">批量删除</el-button> -->
		</el-row>
		<el-row class="app-container">
			<!--列表 MemMember mem_member-->
			<el-table :max-height="tableHeight" :data="memMembers"  highlight-current-row v-loading="load.list" border @selection-change="selsChange" @row-click="rowClick" style="width: 100%;">
<!-- 				<el-table-column sortable type="selection" width="40"></el-table-column>
				<el-table-column sortable type="index" width="40"></el-table-column> -->
				<el-table-column sortable prop="headimgurl" label="头像" min-width="80"  show-overflow-tooltip>
						<template   slot-scope="scope">
						        <span  v-show="scope.row.headimgurl!=undefined && scope.row.headimgurl!=''"><img v-bind:src="scope.row.headimgurl"></span>
						        <span  v-show="scope.row.headimgurl==undefined || scope.row.headimgurl==''"><img src="../../../../assets/image/noImg.png"></span>
						</template>
				</el-table-column>
				<el-table-column sortable prop="userid" label="用户id" min-width="80" show-overflow-tooltip>
					<!-- 	<template   slot-scope="scope">
						        <el-button @click="showDetail(scope.row)" type="text" >{{scope.row.userid}}</el-button>
						</template> -->
				</el-table-column>
				<el-table-column sortable prop="unionid" label="全局唯一编号" min-width="80" show-overflow-tooltip></el-table-column>
				<el-table-column sortable prop="displayUserid" label="登录展示使用用户编号" min-width="80" show-overflow-tooltip></el-table-column>
				<!-- 是否被冻结0否1是 -->
				<el-table-column sortable prop="locked" label="是否被冻结" min-width="80" show-overflow-tooltip>
					<template slot-scope="scope">
						<span v-if="scope.row.locked=='1'">是</span>
						<span v-if="scope.row.locked=='0'">否</span>
					</template>
				</el-table-column>
				<el-table-column sortable prop="openRebate" label="是否开启会员权益" min-width="80" show-overflow-tooltip>
					<template slot-scope="scope">
						<span v-if="scope.row.openRebate=='1'">是</span>
						<span v-if="scope.row.openRebate!='1'">否</span>
					</template>
				</el-table-column>

				<el-table-column sortable prop="startdate" label="启用日期" min-width="80" show-overflow-tooltip></el-table-column>
				<el-table-column sortable prop="enddate" label="到期日期" min-width="80" show-overflow-tooltip></el-table-column>
				<el-table-column sortable prop="nickname" label="昵称" min-width="80" show-overflow-tooltip></el-table-column>
				<el-table-column sortable prop="username" label="用户名称" min-width="80" show-overflow-tooltip></el-table-column>
				<el-table-column sortable prop="sex" label="性别" min-width="80" show-overflow-tooltip>
					<template slot-scope="scope">
						<span v-if="scope.row.sex=='0'">男</span>
						<span v-if="scope.row.sex=='1'">女</span>
            <span v-if="scope.row.sex=='2'">保密</span>
					</template>
				</el-table-column>
				<!-- <el-table-column sortable prop="idCardNo" label="身份证号码" min-width="80" show-overflow-tooltip></el-table-column> -->
				<el-table-column sortable prop="birthday" label="生日" min-width="80" show-overflow-tooltip></el-table-column>
				<el-table-column sortable prop="phoneno" label="移动电话号码" min-width="80" show-overflow-tooltip></el-table-column>
				<el-table-column sortable prop="email" label="邮箱" min-width="80" show-overflow-tooltip></el-table-column>

				<!-- <el-table-column sortable prop="pwdtype" label="密码类型" min-width="80" show-overflow-tooltip>
					<template slot-scope="scope">
						<span v-if="scope.row.pwdtype=='1'">指纹</span>
						<span v-if="scope.row.pwdtype=='2'">密码</span>
					</template>
				</el-table-column>
				<el-table-column sortable prop="password" label="密码" min-width="80" show-overflow-tooltip></el-table-column>
				<el-table-column sortable prop="salt" label="盐值" min-width="80" show-overflow-tooltip></el-table-column>
				<el-table-column sortable prop="fgOne" label="指纹1" min-width="80" show-overflow-tooltip></el-table-column>
				<el-table-column sortable prop="fgTwo" label="指纹2" min-width="80" show-overflow-tooltip></el-table-column>
				<el-table-column sortable prop="fgThr" label="指纹3" min-width="80" show-overflow-tooltip></el-table-column> -->

				<!-- <el-table-column sortable prop="districtId" label="区县编号" min-width="80" show-overflow-tooltip></el-table-column> -->
				<el-table-column sortable prop="country" label="国家" min-width="80" show-overflow-tooltip></el-table-column>
				<el-table-column sortable prop="province" label="省份" min-width="80" show-overflow-tooltip></el-table-column>
				<el-table-column sortable prop="city" label="城市" min-width="80" show-overflow-tooltip></el-table-column>
				<el-table-column sortable prop="address" label="详细地址" min-width="80" show-overflow-tooltip></el-table-column>

				<el-table-column sortable prop="branchId" label="机构号" min-width="80" show-overflow-tooltip></el-table-column>
				<el-table-column sortable prop="shopId" label="商户编号" min-width="80" show-overflow-tooltip></el-table-column>

				<el-table-column sortable label="操作" min-width="100" fixed="right"  show-overflow-tooltip>
					<template slot-scope="scope">
            <el-button v-loading="load.add" type="primary" @click.native="addSubmit(scope.row,scope.$index)" >添加</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination  layout="total, sizes, prev, pager, next" @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-pagination>

		</el-row>
	</section>
</template>

<script>
	import util from '@/common/js/util';//全局公共库
	//import Sticky from '@/components/Sticky' // 粘性header组件
	//import { listOption } from '@/api/mdp/meta/itemOption';//下拉框数据查询
	// import { listMemMember, delMemMember, batchDelMemMember,editMemMember } from '@/api/mk/mem/memMember';
   import { selectByMemMember,addSubacctAddForm } from '@/api/mdp/sys/userTpa';
   // import { addUserTpa, } from '@/api/mdp/sys/userTpa';
	import { mapGetters } from 'vuex'
	export default {
		computed: {
		    ...mapGetters([
        'userInfo'
		    ])
		},
		// fromMemMemberTagUserId  from-mem-member-tag-user-id from-mem-member-location-user-id
		props:['visible','userTpa','branch','users'],
		watch: {
      	'userTpa':function( userTpa ) {
        this.addForm = userTpa;
      },
	      'visible':function(visible) {
	      	if(visible==true){
				  //从新打开页面时某些数据需要重新加载，可以在这里添加
				  console.log("visit---:MemMenmberMng")
				  this.getMemMembers();

	      	}
	      }
		},

		data() {
			return {
				filters: {
					key: ''
				},
				memMembers: [],//查询结果
				pageInfo:{//分页数据
					total:0,//服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。
					pageSize:10,//每页数据
					// count:false,//是否需要重新计算总记录数
					pageNum:1,//当前页码、从1开始计算
					orderFields:['startdate'],//排序列 如 ['sex','student_id']，必须为数据库字段
					orderDirs:['desc']//升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc']
				},
				load:{ list: false, edit: false, del: false, add: false },//查询中...
				loading:false,
				sels: [],//列表选中数据
				options:{},//下拉选择框的所有静态数据 params=[{categoryId:'0001',itemCode:'sex'}] 返回结果 {'sex':[{optionValue:'1',optionName:'男',seqOrder:'1',fp:'',isDefault:'0'},{optionValue:'2',optionName:'女',seqOrder:'2',fp:'',isDefault:'0'}]}
				//访问其他页面
				addFormVisible: false,//新增memMember界面是否显示
				//新增memMember界面初始化数据
				addForm:{unionid:'',displayUserid:'',userid:'',locked:'',startdate:'',nickname:'',username:'',phoneno:'',password:'',salt:'',pwdtype:'',headimgurl:'',country:'',city:'',province:'',address:'',sex:'',enddate:'',districtId:'',email:'',fgOne:'',fgTwo:'',fgThr:'',idCardNo:'',branchId:'',birthday:'',shopId:'',openRebate:''},
				//memMembers:{unionid:'',displayUserid:'',userid:'',locked:'',startdate:'',nickname:'',username:'',phoneno:'',password:'',salt:'',pwdtype:'',headimgurl:'',country:'',city:'',province:'',address:'',sex:'',enddate:'',districtId:'',email:'',fgOne:'',fgTwo:'',fgThr:'',idCardNo:'',branchId:'',birthday:'',shopId:'',openRebate:''},
        editFormVisible: false,//编辑界面是否显示
				//编辑memMember界面初始化数据,
				tableHeight:500,
				editForm:{unionid:'',displayUserid:'',userid:'',locked:'',startdate:'',nickname:'',username:'',phoneno:'',password:'',salt:'',pwdtype:'',headimgurl:'',country:'',city:'',province:'',address:'',sex:'',enddate:'',districtId:'',email:'',fgOne:'',fgTwo:'',fgThr:'',idCardNo:'',branchId:'',birthday:'',shopId:'',openRebate:''},

			}
		},//end data
		methods: {
			handleSizeChange(pageSize) {
				this.pageInfo.pageSize=pageSize;
				this.getMemMembers();
			},
			handleCurrentChange(pageNum) {
				this.pageInfo.pageNum = pageNum;
				this.getMemMembers();
			},
			// 表格排序 obj.order=ascending/descending,需转化为 asc/desc ; obj.prop=表格中的排序字段,字段驼峰命名
			sortChange( obj ){
				var dir='asc';
				if(obj.order=='ascending'){
					dir='asc'
				}else{
					dir='desc';
				}
				if(obj.prop=='xxx'){
					this.pageInfo.orderFields=['xxx'];
					this.pageInfo.orderDirs=[dir];
				}
				this.getMemMembers();
			},
			searchMemMembers(){
				 this.pageInfo.count=true;
				 this.getMemMembers();
			},
			//获取列表 MemMember mem_member
			getMemMembers() {
				let params = {
          branchId:this.branch.id,
					pageSize: this.pageInfo.pageSize,
					pageNum: this.pageInfo.pageNum,
					total: this.pageInfo.total,
					count:this.pageInfo.count
				};
				if(this.pageInfo.orderFields!=null && this.pageInfo.orderFields.length>0){
					let orderBys=[];
					for(var i=0;i<this.pageInfo.orderFields.length;i++){
						orderBys.push(this.pageInfo.orderFields[i]+" "+this.pageInfo.orderDirs[i])
					}
					params.orderBy= orderBys.join(",")
				}
				if(this.filters.key!==""){
					params.key="%"+this.filters.key+"%"
				}else{
					//params.xxx=xxxxx
				}
				this.load.list = true;
        console.log("查看memMember");
        console.log(params);
				selectByMemMember(params).then((res) => {
					var tips=res.data.tips;
					if(tips.isOk){
            console.log("res.data");
            console.log(res.data);
						this.pageInfo.total = res.data.total;
						this.pageInfo.count=false;
						this.memMembers = res.data.data;
					}else{
						this.$notify({ message: tips.msg, type: 'error' });
					}
					this.load.list = false;
				}).catch( err => this.load.list = false );
			},

			//选择行memMember
			selsChange: function (sels) {
				this.sels = sels;
			},

			rowClick: function(row, event, column){
				this.$emit('row-click',row, event, column);//  @row-click="rowClick"
			},

			/**begin 自定义函数请在下面加**/
			// 取消按钮点击 父组件监听@cancel="addFormVisible=false" 监听
			handleCancel:function(){
			//	this.$refs['addForm'].resetFields();
				this.$emit('cancel');
			},
			//新增提交UserTpa 第三方系统向我方开放的用户列表 父组件监听@submit="afterAddSubmit"
      	addSubmit: function (row,index) {
             console.log("打印row");
           console.log(row);
      	this.$confirm('确认提交吗？', '提示', {}).then(() => {
      		this.load.add=true
          let params ={
            users:this.users,
            memMembers:Object.assign({}, row),
          };
 //         
          console.log("查看params");
          console.log(params);
      	addSubacctAddForm(params).then((res) => {
      			this.load.add=false;
      			var tips=res.data.tips;
      			if( tips.isOk ){
      			this.$emit('submit');
      			}
      			this.$notify({ message: tips.msg, type: tips.isOk?'success':'error'});
      		});
      	}).catch(() => this.load.add=false );
      },

			/**end 自定义函数请在上面加**/

		},//end methods
		components: {
		     
		    //在下面添加其它组件
		},
		mounted() {   
			this.$nextTick(() => {
				this.tableHeight = window.innerHeight - 250;   
			}); 
			this.$nextTick(() => {
				this.getMemMembers();
        	});
		}
	}

</script>

<style scoped>
img {
    border-style: none;
    height: 50px;
}

</style>
