<template>
<div class="flexOne">	
	<div class="workTotalSearch">
		<ul>
			<li>
				<span><em class="fl" style="margin-top: 10px!important;">{{$t('fnc.bmxuanze')}}</em>
				<treeselect class='w200 fl'
				  :options="departmentList"
				   v-model="RB_Department_Id"
				   :placeholder="$t('pub.unlimitedSel')"
				  :normalizer="normalizer"
				   @select='linkageEmployeeMsg()'
				/>
				</span>
			</li>	
			<li>
				<span><em>{{$t('fnc.ryxuanze')}}</em></span>
				<el-select class='w200' v-model="msg.EmployeeId" filterable :placeholder="$t('pub.pleaseSel')" >
		            <el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
					<el-option v-for='item in employeeList' 
						:label='item.name'
						:value='item.empId'
						:key='item.empId'>
					</el-option>
	      		</el-select>
			</li>
			<li><span><em>{{$t('fnc.bmriqi')}}</em><el-date-picker :picker-options="pickerOptions" v-model='msg.StartDate'  class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
									-
	                            <el-date-picker :picker-options="pickerOptions"  v-model='msg.EndDate'  class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
	            </span>
			</li>			
			<li>
				<input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="getList();resetPageIndex()" />
			</li>			
		</ul>	
	</div>
	<div style="clear: both; width: 100%;height: 20px;"></div>
		<table class="workTotalSearchTable" border="0" cellspacing="0" cellpadding="0" v-loading='loading'>
			<tr>
				<th width="15%">{{$t('salesModule.Personnel')}}</th>
				<th width="15%">{{$t('salesModule.Visital')}}</th>
				<th width="15%">{{$t('salesModule.laxin')}}</th>
				<th width="15%">{{$t('salesModule.ShouKe')}}</th>
				<th width="10%">{{$t('fnc.shoukuan')}}</th>
				<th width="10%">{{$t('salesModule.MakeInquiry')}}</th>
				<th width="10%">{{$t('salesModule.Complaints')}}</th>
				<th width="10%">{{$t('salesModule.AfterSales')}}</th>
			</tr>
			<tr>
				<td v-show="list.length==0" colspan="11" align="center">{{$t('system.content_noData')}}</td>
			</tr>				
			<tr v-for="item in list">
				<td>
					<img v-if='!item.EmPhoto' src="../../assets/img/litheader.png"/>
				    <img v-if='item.EmPhoto' :onerror="defaultImg" :src='item.EmPhoto'/>
					{{item.EmName}}
				</td>
				<td><span @click="goUrl('worksalesApproval',item.EmployeeId,msg.StartDate,msg.EndDate)">{{item.CallOnNum}}</span></td>
				<td><span @click="goUrl('worksalesApproval',item.EmployeeId,msg.StartDate,msg.EndDate)">{{item.PullTheNewNum}}</span></td>
				<td>
					<span @click="goUrlT('enrollTotal',item.EmployeeId,msg.StartDate,msg.EndDate)">{{item.GuestNum}}</span>&nbsp;&nbsp;&nbsp;￥{{moneyFormat(item.PreferPrice)}}
				</td>
				<td style="color: #FF9C00;"><span @click="goUrl('saleReceivablesTotal',item.EmployeeId,msg.StartDate,msg.EndDate)">￥{{moneyFormat(item.Income)}}</span></td>
				<td><span @click="goUrl('askPriceTotal',item.EmployeeId,msg.StartDate,msg.EndDate)">{{item.DemandNum}}</span></td>
				<td>
					0
				</td>
				<td>0</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>
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'	
	export default {
	    components: { Treeselect },	
		data() {
			return {
				pickerOptions: {
					disabledDate: (time) => { //disabledDate true 为禁止选择
						return time.getTime()>Date.now()
					}
				},
				defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
                normalizer(node) {
                    return {
                        id: node.DepartmentId,
                        label: node.DepartmentName,
                        children: node.ChildList,
                    }
                },			
				currentPage:1,
				total:0,				
				loading:false,
				RB_Department_Id:null,
				msg:{
					RB_Department_Id:null,
					EmployeeId:'-1',
					StartDate:'',
					EndDate:'',
					pageIndex:1,
					pageSize:10,
				},
				employeeMsg: {
					RB_Group_id:'0',
					RB_Branch_id:'-1',
                    departmentId:'0',
                    IsLeave:'-1',
				},				
				list: [],
				departmentList:[],
				employeeList: [],
			}
		},
		methods: {
			goUrl(path,id,starTime,endTime) {
				this.$router.push({
					name: path,
					query: {
						"id": id,
						"starTime": starTime,
						"endTime": endTime,
					}
				})
			},
			goUrlT(path,id,starTime,endTime) {
				this.$router.push({
					name: path,
					query: {
						"EmployeeId": id,
						"starTime": starTime,
						"endTime": endTime,
					}
				})
			},
			linkageEmployeeMsg(){
				this.employeeMsg.departmentId=this.RB_Department_Id;
				this.msg.EmployeeId='-1';
				this.getEmployee();
			},			
			getEmployee() {
				this.apipost('app_get_company_employee', this.employeeMsg, res => {
					if(res.data.resultCode == 1) {
						this.employeeList = res.data.data;
					}
				}, err => {})
			},			
	    	getDepartment(){
				this.apipost('Advertising_get_GetNowDepartmentAndSubordinate',{},res=>{
	    			if(res.data.resultCode==1){
	    				this.departmentList=res.data.data
	    			}else{
	    				this.$message.error(res.data.message)
	    			}
	    		},err=>{})
	    	},			
			getList() {
				this.loading = true
				if(this.RB_Department_Id==null){
					this.msg.RB_Department_Id='-1'
				}else{
					this.msg.RB_Department_Id=this.RB_Department_Id
				}
				
				this.apipost('TaskManagemnet_get_GetDepartmentEmpWork', this.msg, res => {
					if(res.data.resultCode == 1) {
						this.loading = false
						this.total = res.data.data.count
						this.list = res.data.data.pageData
					} else {
						this.loading = false
						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.getDepartment()
			this.getEmployee()	
		},
	}
</script>

<style>
  .workTotalSearch{width: 100%; min-height: auto; padding:0 0 20px 0;}
  .workTotalSearch li{float: left; font-size: 12px; color: #666; margin:20px 10px 0px 0;}
  .workTotalSearch li>span {display: inline-block; }
  .workTotalSearch li span>em{display: inline-block; min-width: 60px; text-align: right; font-style: normal; margin:0 12px 0 0;}
  .workTotalSearch li:last-child{float: right; position: absolute; top: -15px; right: 20px; z-index: 50;}
  .workTotalSearchTable{width: 100%;  font-size:14px; color: #333; background: #ccc;}
  .workTotalSearchTable tr{border-bottom: 2px solid #333;}
  .workTotalSearchTable tr th{background: #BDBDBD;height:30px; font-size: 12px; text-align: left; text-indent: 30px;}
  .workTotalSearchTable tr{background: #fff;text-align: left;}
  .workTotalSearchTable tr:nth-child(2n+1){background: #E5E5E5;}
  .workTotalSearchTable tr td{height: 60px; padding-left:30px; border-right: 1px solid #DCDCDC; border-bottom: 1px solid #DCDCDC;}
  .workTotalSearchTable tr td>span{cursor: pointer; text-decoration: underline;}
  .workTotalSearchTable tr td>img{width: 32px; height: 32px;border-radius: 16px; vertical-align: middle; margin-right: 15px;}
</style>