<template>
	<div class="flexOne">
		<div class="query-box" style="border-bottom: none;">
			<ul>
				<li>
					<span><em>公司</em><el-select filterable @change='getUser' v-model='msg.RB_BranchId'>
						<el-option label='不限' value='-1'></el-option>
						<el-option v-for='item in companyList' :label='item.BName' :value='item.Id' :key='item.Id'></el-option>
						</el-select>
					</span>
				</li>
				<li>
					<span><em>签到人</em><el-select filterable v-model='msg.EmployeeId'>
						<el-option label='不限' value='-1'></el-option>
						<el-option v-for='item in userList' :label='item.name' :value='item.empId' :key='item.empId'></el-option>
						</el-select>
					</span>
				</li>
				<li><span><em>签到时间</em><el-date-picker v-model='msg.StartTime' class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
										-
			                            <el-date-picker v-model='msg.EndTime'  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="resetPageIndex(),getList()" />
				</li>
			</ul>
		</div>
		<div style="width: 100%; overflow: auto;">
			<table style="min-width: 1400px;" class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<th>公司</th>					
					<th>{{$t('system.query_name')}}</th>
					<th>签到日期</th>
					<th>第一次签到时间</th>
					<th width="400">第一次签到地点</th>
					<th>最后一次签到时间</th>
					<th width="300">最后一次签到地点</th>
					<th width="150">{{$t('system.table_operation')}}</th>
				</tr>
				
				<tr v-for='item in list'  v-loading='loading'>
					<td>{{item.BName}}</td>					
					<td>{{item.EmName}}</td>
					<td>{{item.SignTime}}</td>
					<td>{{item.StartTime}}</td>
					<td>{{item.StartAddress}}</td>
					<td>{{item.EndTime}}</td>
					<td>{{item.EndAddress}}</td>
					<td>
						<el-tooltip class="item" effect="dark" content="详情" placement="top">
							<el-button type="primary" icon="el-icon-tickets" circle @click='getDetail(item.EmployeeId,item.SignTime)'></el-button>
						</el-tooltip>					
					</td>
				</tr>
			</table>
		</div>
		<el-pagination background 
			@current-change="handleCurrentChange" 
			:current-page.sync="currentPage"
			 layout="total,prev, pager, next, jumper"
			:page-size='msg.pageSize' 
			:total='total'>
		</el-pagination>		
		
		<el-dialog custom-class='w500' :title="dialogTitle" :visible.sync="outerVisible" center >	
			<div v-for="(item,index) in layerItem" class="outWorkItem" >
				  <table border="0" cellspacing="0" cellpadding="0">
				  		<tr>
				  			<td colspan="2">第{{index+1}}次签到</td>
				  		</tr>
				  		<tr>
				  			<td colspan="2"><i class="el-icon-time"></i>{{item.SignInTime}}</td>
				  		</tr>
				  		<tr>
				  			<td colspan="2"><i class="iconfont icon-tubiao"></i>{{item.Address}}</td>
				  		</tr>
				  		<tr>
				  			<td width="45">图片：</td>
				  			<td><img v-for="img in toArr(item.Image)" :src='img' @click="getPic(toArr(item.Image))"></td>
				  		</tr>
				  		<tr>
				  			<td>备注：</td>
				  			<td>{{item.Remarks}}</td>
				  		</tr>				  		
				  </table>
			</div>
			<div slot="footer" class="dialog-footer">
				<button class="hollowFixedBtn" @click="outerVisible = false">取 消</button> &nbsp;
			</div>				
		</el-dialog>	
		<div :class="{viewBigPicLayer:true,viewBigPicLayerDisplayNone:dspNone}" @click="colseLayer">
		    <i @click="colseLayer" class="el-icon-circle-close-outline clolseViewBigPicLayer" ></i>
		    <el-carousel height="600px" :interval="5000" trigger="click">
		      <el-carousel-item v-for="(item,index) in picObj" :key="index">
		         <img :src="item" />
		      </el-carousel-item>
		    </el-carousel>
		</div>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				picObj:[],
				dspNone:true,
				loading:true,
				outerVisible:false,
				dialogTitle:"",	
				total:0,
				currentPage: 1,				
				//请求数据
				msg:{
					RB_BranchId:'-1',
					EmployeeId:'-1',
					StartTime:'',
					EndTime:'',
					pageIndex:1,
					pageSize:15,
				},
				getCompanyMsg:{
					RB_Group_Id:'0',
					Status:'0',
				},
				getUserMsg:{
					RB_Branch_id:'-1',
				},
				getDetailMsg:{
					pageIndex:1,
					pageSize:999,
					RB_BranchId:'-1',
					EmployeeId:'0',
					StartTime:'',
					EndTime:'',
					orderBy:'1',
				},
				//返回数据
				list:[],
				companyList:[],
				userList:[],
				layerItem:[],
			}
		},
		methods: {
			colseLayer(){
				this.dspNone=true
			},
			getPic(obj){
				this.picObj=obj
				this.dspNone=false;
			},
			toArr(val){
                let arr=[]
                if(val!="[]")
                {
				    val.substring(1,val.length-1).split(',').forEach(item=>{
				    	arr.push(item.substring(1,item.length-1))
				    });                	
                }
			    return arr;
			},
			getDetail(emId,SignTime){
				this.outerVisible=true;
				this.dialogTitle='外勤详情'
				this.getDetailMsg.EmployeeId=emId
				this.getDetailMsg.StartTime=SignTime
				this.getDetailMsg.EndTime=SignTime
				this.apipost('app_user_GetSignInPageList',this.getDetailMsg,res=>{
					if(res.data.resultCode==1){
						this.layerItem=res.data.data.pageData;
					}else{}
				},err=>{})				
			},
			getCompany(){
				this.apipost('admin_get_BranchGetList',this.getCompanyMsg,res=>{
					if(res.data.resultCode==1){
							this.companyList=res.data.data;
					}else{}
				},err=>{})
			},	
			getUser(){
				this.msg.EmployeeId='-1'
				this.getUserMsg.RB_Branch_id=this.msg.RB_BranchId;
				this.apipost('app_get_company_employee',this.getUserMsg,res=>{
					if(res.data.resultCode==1){
							this.userList=res.data.data;
					}else{}
				},err=>{})				
			},
			getList(){
				this.loading=true;
				this.apipost('app_user_GetSignInManagementPageList',this.msg,res=>{
					if(res.data.resultCode==1){
							this.list=res.data.data.pageData;
							this.total=res.data.data.count;
							this.loading=false											  	
					}else{}
				},err=>{})				
			},
			handleCurrentChange(val) {
				this.msg.pageIndex = val;
				this.getList();
			},
			resetPageIndex() {
				this.msg.pageIndex = 1;
				this.currentPage = 1

			},			

		},
		mounted() {
			let userInfo=this.getLocalStorage();
			this.getUserMsg.RB_Group_id=this.getCompanyMsg.RB_Group_Id=userInfo.RB_Group_id;    //集团ID		
			this.getCompany()
			this.getUser()
			this.getList()
		}

	}
</script>

<style>
.outWorkItem{border-bottom:1px solid #D3D3D3; padding: 10px 0;}
.outWorkItem p {line-height: 24px;}
.outWorkItem table i{color: #bbb; margin-right:5px;}
.outWorkItem table img{width: 50px; height: 50px; margin: 10px 10px 0 0; border-radius: 4px;}
.outWorkItem table tr td{text-align: left;}
</style>