<template>
	<div class="flexOne">
		<div class="query-box">
			<ul>
				<li><span><em>公司</em><el-select  filterable  v-model='msg.BranchId' @change='linkageDepartment()'>
							        <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.DepartmentId'  @change='linkageEmployeeMsg()'>
							        <el-option label='不限' value='-1'></el-option>
									<el-option v-for='item in departmentList' 
										:label='item.DepartmentName'
										:value='item.DepartmentID'
										:key='item.DepartmentID'>
									</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 employeeList' 
										:label='item.name'
										:value='item.empId'
										:key='item.empId'>
									</el-option>
								  </el-select>
					</span></li>						
				<li><span><em>时间</em><el-date-picker :picker-options="pickerOptions0" v-model='msg.StartTime' class='w135'  value-format="yyyy-MM-dd" type="date"></el-date-picker>
						                       -
		                                      <el-date-picker :picker-options="pickerOptions1" 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="查询" @click="resetPageIndex(),getList()" />
					<input type="button" class="normalBtn" value="导出报表" @click="exportExcel()" />
				</li>
			</ul>
		</div>

		<el-table :data="dataList" stripe style="width: 100%" v-loading='loading'>
			<el-table-column fixed prop="EmName" label="姓名" min-width="100">
			</el-table-column>
			<el-table-column fixed prop="EmployeeId" label="工号" min-width="80">
			</el-table-column>
			<el-table-column prop="DepartmentName" label="部门" min-width="120">
			</el-table-column>
			<el-table-column prop="PostName" label="岗位" min-width="100">
			</el-table-column>			
			<el-table-column prop="DateStr" label="日期" min-width="150">
			</el-table-column>
			<el-table-column prop="BeOnDutyTime" label="上班打卡时间" min-width="150">
			</el-table-column>
			<el-table-column prop="BeOnResult" label="上班打卡状态" min-width="150">
			</el-table-column>
			<el-table-column prop="OffDutyTime" label="下班打卡时间" min-width="150">
			</el-table-column>
			<el-table-column prop="OffResult" label="下班打卡状态" min-width="150">
			</el-table-column>
			<el-table-column  label="上班关联审批单号" min-width="200">
				<template slot-scope="scope">
					<p @click="getWorkflow(scope.row.BeOnRelevance,scope.row.BeOnRelevanceType)">{{scope.row.BeOnRelevance}}</p>
				</template>	
			</el-table-column>
			<el-table-column prop="OffRelevance" label="下班关联审批单号" min-width="200">
				<template slot-scope="scope">
					<p @click="getWorkflow(scope.row.OffRelevance,scope.row.OffRelevanceType)">{{scope.row.OffRelevance}}</p>
				</template>					
			</el-table-column>
		</el-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 {
				pickerOptions0: {
					disabledDate: (time) => { //disabledDate true 为禁止选择
						let endTime=new Date(this.msg.EndTime)
						return time.getTime() > Date.now()||time.getTime()>endTime.getTime()
						//return time.getTime() > Date.now()||time.getTime() < endTime.getTime()-2.592e9 //禁止选择的日期：(今天之后的日期，结束日期之后一个月以前的日期)
					}
				},
				pickerOptions1: {
					disabledDate: (time) => {
						let starTime=new Date(this.msg.StartTime)
						return time.getTime() > Date.now()||time.getTime()<starTime.getTime()
						//return  time.getTime() <starTime.getTime() ||time.getTime() > starTime.getTime()+2.592e9 || time.getTime() > Date.now();//禁止选择的日期：(开始日期之前，开始日期一个月以后的日期，今天之后的日期)
					}
				},
				loading:true,
				//分页
				total: 0,
				pageSize: '',
				currentPage: 1,
				//请求数据
				msg: {
					pageIndex: 1,
					pageSize: 15,
					BranchId: '-1',
					DepartmentId: '-1',
					EmployeeId: '-1',
					StartTime: '',
					EndTime: '',
				},
				exportMsg:{
					BranchId: '-1',
					DepartmentId: '-1',
					EmployeeId: '-1',
					StartTime: '',
					EndTime: '',	
				},
				companyMsg: {
					Status: '0',
					is_show: '0',
					RB_Group_Id: '0',
				},
				departmentMsg: {
					RB_Group_Id: '0',
					RB_Branch_Id:'-1',
					Status:'0',
					ParentId:'-1',
					Tier:'0',
				},
				employeeMsg: {
					RB_Group_id:'0',
					RB_Branch_id:'-1',
                    departmentId:'0',
                    IsLeave:'-1',
				},
				//返回数据
				dataList: [],
				companyList: [],
				departmentList: [],
				employeeList: [],
			}
		},
		methods: {
			exportExcel(){
				this.exportMsg.BranchId=this.msg.BranchId;
				this.exportMsg.DepartmentId=this.msg.DepartmentId;
				this.exportMsg.EmployeeId=this.msg.EmployeeId;
				this.exportMsg.StartTime=this.msg.StartTime;
				this.exportMsg.EndTime=this.msg.EndTime;
				this.apipost('User_get_GetEveryDayAttendanceRecordExcel',this.exportMsg,res=>{
					if(res.data.resultCode==1){
						console.log(res.data)
		                const link = document.createElement('a');
		                let _loadUrl=this.domainManager().DomainUrl;
		                link.href = _loadUrl+res.data.data;
		                document.body.appendChild(link);
		                link.click();
					}
				},err=>{})
				
			},
			getWorkflow(id,type){
				if(id!=null&&type!=null){
					this.apipost('app_user_workflow_GetAuditInfo',{WorkFlowId:id,TemplateType:type},res=>{
						console.log(res.data)
					},err=>{})
				}
			
			},
			getCompany() {
				this.apipost('admin_get_BranchGetList', this.companyMsg, res => {
					if(res.data.resultCode == 1) {
						this.companyList = res.data.data;
						//console.log(this.companyList)
					}
				}, err => {})
			},
			linkageDepartment(){
				this.departmentMsg.RB_Branch_Id=this.msg.BranchId;
				this.employeeMsg.RB_Branch_id=this.msg.BranchId;
				this.msg.DepartmentId='-1';
				this.msg.EmployeeId='-1';
				this.getDepartment();
				this.linkageEmployeeMsg()
			},
			getDepartment() {
				this.apipost('admin_get_DepartmentGetList', this.departmentMsg, res => {
					if(res.data.resultCode == 1) {
						this.departmentList = res.data.data;
					}
				}, err => {})				
			},
			linkageEmployeeMsg(){
				this.employeeMsg.departmentId=this.msg.DepartmentId;
				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;
						//console.log(this.employeeList)
					}
				}, err => {})				
			},
			getList() {
				this.loading=true;
				let endTime = new Date(this.msg.EndTime)
				let starTime = new Date(this.msg.StartTime)
				if(endTime - starTime > 2.6784e9) {
					this.$alert('时间跨度不能超过31天！！', '提示')
					return
				}
				
				this.apipost('User_get_GetEveryDayAttendanceRecordList',this.msg, res => {
					if(res.data.resultCode == 1) {
						this.loading=false;
						this.$nextTick(() => {
						this.dataList = res.data.data.pageData;
						 });
						this.total = res.data.data.count;
					}
				}, err => {})
			},
			handleCurrentChange(val) {
				this.msg.pageIndex = val;
				this.getList();
			},
			resetPageIndex() {
				this.msg.pageIndex = 1;
				this.currentPage = 1
			}
		},
		mounted() {
			let userInfo = this.getLocalStorage();
			
			this.departmentMsg.RB_Group_Id=this.employeeMsg.RB_Group_id=this.companyMsg.RB_Group_Id = userInfo.RB_Group_id; //集团
		//	this.employeeMsg.RB_Branch_id=userInfo.RB_Branch_id;    //公司		
			
			
			let  myDate = new Date();
		    let  _year=myDate.getFullYear();
		    let  _month=myDate.getMonth()>=9?myDate.getMonth()+1:'0'+(myDate.getMonth()+1);
		    let  _date=myDate.getDate()>9?myDate.getDate():'0'+myDate.getDate(); 
		    this.msg.StartTime=_year+'-'+_month+'-'+'01'; 
		    this.msg.EndTime=_year+'-'+_month+'-'+_date;
		    
			this.getList()
			this.getCompany()
			this.getDepartment()
			this.getEmployee()	
		}
	}
</script>

<style>
	.el-table .el-table__row {
		font-size: 12px!important;
	}
	
	.el-table__row td {
		padding: 5px 0;
	}
	.has-gutter tr th,.el-table th.is-leaf{background:#EAEAEA!important;} 
</style>