<template>
		<div>
			<div class="query-box" style="border: none;">
				<ul>
					<li><span><em>{{$t('system.query_name')}}</em></span>
						<el-input v-model='msg.CustomerName'></el-input>
					</li>
					<li><span><em>{{$t('hotel.table_tel')}}</em></span>
						<el-input v-model='msg.ContactNumber'></el-input>
					</li>
					<li><span><em>{{$t('salesModule.Laiyuan')}}</em></span>
						<el-select  v-model='msg.MarkOverType'>   
							<el-option :label="$t('pub.unlimitedSel')" value='-1' key='-1'></el-option>
							<el-option :label="$t('pub.noJobSel')" value='1' key='1'></el-option>
							<el-option :label="$t('salesModule.Registered')" value='2' key='2'></el-option>
							<el-option :label="$t('salesModule.AutoRelease')" value='3' key='3'></el-option>
						 </el-select>	   						
					</li>
					<li><span><em>{{$t('active.cl_addPp')}}</em></span>
							<el-select filterable   v-model='msg.CreateByInfo' :placeholder="$t('pub.pleaseSel')">   
								<el-option :label="$t('system.ph_buxian')" value='0' key='0'></el-option>
								<el-option v-for='item in CreateByInfoList' 
									:label='item.emName'
									:value='item.employeeId'
									:key='item.employeeId'>
								</el-option>
							  </el-select>	   
					</li>
				<li><input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="resetPageIndex(),getList()" />
				    	<el-popover width='280' v-model='layerShow' popper-class='pd20' trigger="click">
		            			<div>
		            				<p class="fz12 fbold mt10 color333">{{$t('fnc.zhuanjiao')}}</p>
		            				<p class="fz12 mt30 color666">
		            					<span>{{$t('salesModule.Recipient')}}</span>&nbsp;
		            					<el-select filterable class='w180'   v-model='RecipientMsg.NewCreateBy' :placeholder="$t('pub.pleaseSel')">   
											<el-option v-for='item in RecipientInfoList' 
												:label='item.emName'
												:value='item.employeeId'
												:key='item.employeeId'>
											</el-option>
										  </el-select>	
		            				</p>
		            				<p>
		            					<input type="button"  @click="save()" class="normalBtn mt30" :value="$t('salesModule.MassTransfer')"/>
		            				</p>
		            			</div>
			              	<input  slot="reference" type="button"  class="normalBtn" :value="$t('salesModule.MassTransfer')" />
			              </el-popover>  
				</li>
				</ul>
			</div>
			<table class="publicCustomerTable"  border="0" cellspacing="0" cellpadding="0" v-loading='loading'>
				<tr>
					<th width="20%">
						<label><input type="checkbox"  v-model="isCkedAll"  @click='checkedAll()'  style="vertical-align: middle;"/>{{$t('salesModule.storeName')}}</label>
					</th>
					<th width="17%">{{$t('restaurant.res_ContactNumber')}}</th>
					<th width="20%">{{$t('admin.admin_address')}}</th>
					<th width="10%">{{$t('salesModule.belongUnion')}}</th>
					<th width="10%">{{$t('salesModule.Laiyuan')}}</th>
					<th width="8%">{{$t('salesModule.VisitCount')}}</th>
					<th width="10%">{{$t('salesModule.TransactionMon')}}</th>
					<th width="10%">{{$t('active.cl_addPp')}}</th>
					<th width="5%">{{$t('hotel.table_operat')}}</th>
				</tr>
				<tr>
					<td colspan="8" align="center" v-show='list.length==0'>
						{{$t('system.content_noData')}}
					</td>
				</tr>
				<tr  v-for='(item,index) in list'>
					<td>
						<label><input type="checkbox" :value="item.CustomerId" v-model="customerList" @change="ckeckedOne" style="vertical-align: middle;"/>{{item.CustomerName}}<i class="iconfont icon-shimingrenzheng" :class="{'_class_b': item.RealNameAuthentication===1}"></i></label>
					</td>
					<td><i class="iconfont icon-img_dianhua fz14" style="color:#09D49D;margin-right: 5px;"></i>{{item.ContactNumber}}</td>
					<td>{{item.Address}}</td>
					<td>{{item.AllianceName}}</td>
					<td>{{item.MarkOverType=='1'?'离职':item.MarkOverType=='2'?'申请注册':"自动释放"}}</td>
					<td>{{item.VisiteCount}}</td>
					<td style="color: #FF9C00;">￥{{moneyFormat(item.TotalPrice)}}</td>
					<td>{{item.AccountName}}</td>
					<td>
			            <el-tooltip  effect="dark" :content="$t('fnc.zhuanjiao')"  placement="top-start">
		            		<el-popover width='280'  popper-class='pd20' trigger="click">
		            			<div>
		            				<p class="fz12 fbold mt10 color333">{{$t('fnc.zhuanjiao')}}</p>
		            				<p class="fz12 mt30 color666">
		            					<span>{{$t('salesModule.Recipient')}}</span>&nbsp;
		            					<el-select filterable class='w180'   v-model='RecipientMsg.NewCreateBy' :placeholder="$t('pub.pleaseSel')">   
											<el-option v-for='item in RecipientInfoList' 
												:label='item.emName'
												:value='item.employeeId'
												:key='item.employeeId'>
											</el-option>
										  </el-select>	
		            				</p>
		            				<p>
		            					<input type="button"  class="normalBtn mt30" @click="save" :value="$t('fnc.zhuanjiao')"/>
		            				</p>
		            			</div>
			              	<i  slot="reference"  @click="singeleCked(item)"   style="color: #019CED; font-size: 27px; cursor: pointer;" class="iconfont icon-zhuanjiao"></i>
			              </el-popover>  
			            </el-tooltip>		
					</td>
				</tr>

			</table>
		<el-pagination
			background
			@current-change="handleCurrentChange"
			:current-page.sync="currentPage"
			layout="total,prev, pager, next, jumper" 
			:page-size=msg.pageSize 
			:total=total>
		</el-pagination>					
		</div>	
</template>

<script>
	export default {
	    data(){
	        return{
	        	layerShow:false,
				msg:{
					pageIndex:1,
					pageSize:10,
					CustomerName:'',
					ContactNumber:'',
					CreateByInfo:'0',
					MarkOverType:'-1',
				},	 
				RecipientMsg:{
					NewCreateBy:'',
					MarkOverCustomerList:[]
				},
				isCkedAll:false,
				customerListAll:[],
				customerList:[],
				allLength:0,
				loading:false,
				currentPage:1,
				total:0,
				list:[],
				CreateByInfoList:[],
				RecipientInfoList:[]
	        }
	       },
	    	methods:{
			checkedAll() {   //全选
				if(this.isCkedAll == true) {
					this.customerList = []
				} else {
					this.customerListAll.forEach(item => {
						this.customerList.push(item)
					})
				}
			},
			ckeckedOne() {   //单选
				if(this.customerList.length  < this.allLength) {
					this.isCkedAll = false
				} else {
					this.isCkedAll = true
				}
			},
			singeleCked(obj){
				this.customerList = []
				this.customerList.push(obj.CustomerId)
				this.ckeckedOne()
			},
			save(){
				this.RecipientMsg.MarkOverCustomerList=[]
				this.customerList.forEach(item=>{
					this.list.forEach(x=>{
						if(item==x.CustomerId)
						{
							this.RecipientMsg.MarkOverCustomerList.push({"CreateByInfo":x.CreateByInfo,"CustomerId":x.CustomerId})
						}
					})
				})
				if(this.RecipientMsg.NewCreateBy=='')
				{
					this.$message.Error(this.$t('rule.qxzzjiaoren'))
					return
				}
			
				this.apipost('app_customer_MarkOverCustomer',this.RecipientMsg,res=>{
					if(res.data.resultCode==1){
						this.$message.success(res.data.message)
						this.getList()
						this.RecipientMsg.NewCreateBy=''
						this.layerShow=false
					}else{
						this.$message.error(res.data.message)
					}
				},err=>{})
			},
	    	getList(){
	    		this.loading=true
	    		this.apipost('app_customer_GetLeaveEmployeeCustomer',this.msg,res=>{
	    			if(res.data.resultCode==1){
	    				this.loading=false
						this.list=res.data.data.pageData
						this.allLength=res.data.data.pageData.length
						this.customerListAll=[]
						res.data.data.pageData.forEach(item=>{
						  this.customerListAll.push(item.CustomerId)
						})
						this.total=res.data.data.count
						
					}else{
						this.$message.error(res.data.message)
						this.loading=false
					}
	    		},err=>{})
	    	},
	    	getCreateByInfoList(){
	    		this.apipost('app_customer_GetDepartmentEmployee',this.msg,res=>{
	    			if(res.data.resultCode==1){
						this.CreateByInfoList=res.data.data.leaveList
						this.RecipientInfoList=res.data.data.noLeaveList
					}else{
						this.$message.error(res.data.message)
						
					}
	    		},err=>{})	
	    	},
			handleCurrentChange(val) {
				this.msg.pageIndex = val;
				this.getList()				
			},
			resetPageIndex() {
				this.msg.pageIndex = 1;
				this.currentPage = 1
			},		    	
	    },
	    mounted(){
	    	this.getList()
	    	this.getCreateByInfoList()
	    },
	   }
</script>

<style>
	.publicCustomerTable{width: 100%; font-size:14px; color: #333;border: 1px solid #DCDCDC; box-sizing: border-box; border-bottom: none; border-right: none;}
	.publicCustomerTable tr th{background: #DCDCDC;height:30px; font-size: 12px; text-align: left; text-indent: 25px;}
	.publicCustomerTable tr{text-align: left;}
	.publicCustomerTable tr:nth-child(2n){background:#F2F2F2;}
	.publicCustomerTable tr:nth-child(2n+1){background:#FFFFFF;}
	.publicCustomerTable tr:hover{background:#D0D2D9;}	
	.publicCustomerTable tr td{height: 40px; padding-left:25px; border-bottom:1px solid #DCDCDC; font-size: 14px; color: #333; border-right: 1px solid #DCDCDC;}	
	.pd20{padding: 12px 20px !important; }
	.el-popper[x-placement^=bottom]{margin-top: 0px !important;}
	.el-popper[x-placement^=top]{margin-bottom: 0px !important;}
	.publicCustomerTable ._class_b{
	color: #257BF1 !important
}
</style>