<template>
  <d2-container>
   <div class="d2-table-view-full">
      <div class="d2-table-view-header">
      <el-form size="small" :inline="true" :model="filter" @keyup.enter.native="handleList" class="demo-form-inline">
				<el-form-item label="考勤日期">
					 <el-date-picker
					      
								v-model="time"
								type="daterange"
								@change="dateChange"
								value-format="yyyy-MM-dd"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期">
							</el-date-picker>
				</el-form-item>
				<el-form-item label="班级">
				  <department-tree @clearInput="clearDepartment" v-model="filter.depId" :isClear="isClear"/>
				</el-form-item>
				<el-form-item label="学生学号">
					<el-input v-model="filter.userNo" placeholder="学生学号" clearable/>
				</el-form-item>
				<el-form-item label="学生姓名">
					<el-input v-model="filter.userNm" placeholder="学生姓名" clearable/>
				</el-form-item>
        <el-form-item>
          <el-button  type="primary" @click="handleList('1')">查询</el-button>
          <el-button v-if="func.hrAnalyse" :loading="AnaLoading" type="success" @click="deal()">考勤分析</el-button>
        </el-form-item>
      </el-form>
      </div>
      <div class="d2-table-view-content">
      <d2-crud
              title="考勤日报表列表"
              ref="d2Crud"
              :options="tableOptions"
              :loading="loading"
              :columns="columns"
              :data="data">
			<el-button  slot="headerButton" type="primary" size="small" @click="exportFile()">导出</el-button>
      </d2-crud>
      </div>
      <div class="d2-table-view-footer">
      <el-pagination
      				@current-change="handleCurrentChange"
      				@size-change="handleSizeChange"
					    :current-page.sync="currentPage"
      				:page-size="tableOptions.pageList[0]"
      				:page-sizes="tableOptions.pageList"
      				layout="total,sizes, prev, pager, next,jumper"
      				:total="pagination.total">
      </el-pagination>
      </div>
	 <el-dialog
			 title="考勤分析"
			 :visible.sync="operVisible"
			 @close="clearForm"
			 width="50%"
	 :close-on-click-modal="false">
	   <el-date-picker
			   v-model="dealTime"
			   type="daterange"
			   @change="dealDateChange"
			   value-format="yyyy-MM-dd"
			   range-separator="至"
			   start-placeholder="开始日期"
			   end-placeholder="终止日期">
	   </el-date-picker>
	   <span slot="footer" class="dialog-footer">
    <el-button @click="deal()">数据分析</el-button>
  </span>
	 </el-dialog>
	 <el-dialog
	 		title="分析进度"
	 		:show-close="false"
	 		:close-on-click-modal="false"
	 		:close-on-press-escape="false"
	 		:visible.sync="progressVisible"
	 		width="20%">
	   <el-progress :percentage="progress"/>
	 </el-dialog>
    </div>
  </d2-container>
</template>

<script>
 import {getDayReportByPage} from '../../../api/att/report'
  import {tableOptions} from '../../../assets/options'
 // import departmentTree from '../../../components/department-tree/index'
	 import util from '../../../libs/util'
  export default {
    name: 'attendance-report',
   /* components:{
      departmentTree
    }, */
    data () {
      return {
				progress:0,
				progressVisible:false,
				AnaLoading:false,
				func:{
					select:false,
					hrAnalyse:false
				},
				isClear:'123',
				time: '',
				isExpend:true,
        tableOptions,
        operVisible:false,
        startDate:'',
		    endDate:'',
        dealTime:'',
        loading:false,
        currentPage:1,      
        systemRoles:[],
        filter:{
					empCode:'',
          empName:'',
          startTime:'',
          endTime:'',
          orgId:'',
					userTyp:'0',
          pageSize: 10,
          pageNum:1
        },
        pagination:{
          total: 0
        },
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        columns: [
					{
						title: '序号',
						key: 'index',
						minWidth: '50',
						formatter (row, column, cellValue, index) {
							return index+1
						}
					},
          {
            title: '学生学号',
            key: 'userNo',
            minWidth: '100'
          },
          {
            title: '学生姓名',
            key: 'userNm',
            minWidth: '110'
          },
          {
            title: '所属班级',
            key: 'depNm',
            minWidth: '150'
          },
          {
            title: '出勤日期',
            key: 'reportDate',
            minWidth: '120',
						showOverflowTooltip: true
          },
         /* {
            title: '班次名称',
            key: 'shiftName',
            minWidth: '180',
						showOverflowTooltip: true
          }, */
					{
						title: '来校打卡时间',
						key: 'clockInTime',
						minWidth: '150',
						showOverflowTooltip: true
					},
					{
						title: '放学打卡时间',
						key: 'clockOutTime',
						minWidth: '130'
					},
					{
						title: '在校时间',
						key: 'guardDay',
						minWidth: '100'
					},
					{
						title: '迟到时间',
						key: 'lateTime',
						minWidth: '100'
					},
					{
						title: '早退时间',
						key: 'leaveEarly',
						minWidth: '100'
					},
					{
						title: '旷课时间',
						key: 'absentTime',
						minWidth: '100'
					},
					{
						title: '请假时间',
						key: 'leaveTime',
						minWidth: '100'
					},
					{
						title: '在校天数',
						key: 'guardDay',
						minWidth: '100'
					},
					{
						title: '请假天数',
						key: 'leaveDay',
						minWidth: '100'
					},
					{
						title: '请假类别',
						key: 'lerverName',
						minWidth: '100'
					},
					{
						title: '旷课天数',
						key: 'absentDay',
						minWidth: '100'
					},
					{
						title: '说明',
						key: 'remark',
						minWidth: '100'
					}
        ],
        data: []
      }
    },
    methods: {
      handleList (val) {
         if(val){this.filter.pageNum=1
        this.currentPage = 1}
      this.loading = true
        getDayReportByPage(this.filter).then(res=>{
          this.loading = false
          this.data = res.page.list
          this.pagination.total = res.page.total
        }).catch(err=>{
          this.loading = false
        })
      },
	  deal () {
		//this.loading = true
		  let req = {}
		  req.empCode = this.filter.empCode
		  req.empName = this.filter.empName
		  req.orgId = this.filter.orgId
		  req.startDate = this.startDate
		  req.endDate = this.endDate
         this.AnaLoading=true
				 this.progressVisible=true
				  let time = setInterval(()=>{
				   if (this.progress < 99) {
				     this.progress ++
				   }
				 },3000)
        getReportAttAnaly(this.filter).then(res=>{
					clearInterval(time)
					this.progress = 100
					setTimeout(()=>{
						 this.progressVisible = false
						this.progress = 0
						this.$message({
						  message: '分析成功',
						  type: 'success'
						})
					this.AnaLoading=false
          //this.loading = false
		  this.operVisible = false
		  this.handleList('1')
			  },3000)
		}).catch(err=>{
			clearInterval(time)
			this.progressVisible=false
			this.AnaLoading=false
		  //this.loading = false
          this.operVisible = false
					this.progress = 0
        })
	  },
      clearDepartment(){
        this.filter.depId=''
      },
      handleCurrentChange (val) {
        this.filter.pageNum = val
        this.handleList()
      },
			handleSizeChange (val) {
			this.filter.pageNum = 1
			this.filter.pageSize = val
			this.handleList()
			},
			dateChange (val) {
			if(val == null){
				this.filter.startTime = ''
				this.filter.endTime = ''
			}else{
				this.filter.startTime = val[0] 
				this.filter.endTime = val[1]
			}
			},
      dealDateChange (val) {
        if(val == null){
          this.startDate = ''
          this.endDate = ''
        }else{
          this.startDate = val[0]
          this.endDate = val[1]
        }
      },
      clearForm () {
        this.dealTime = ''
		this.startDate = ''
        this.endDate = ''
	  },
		exportFile(){
			  if (!this.data.length){
			    this.$message({
			      message: '页面无数据,无法导出',
			      type: 'error'
			    })
			    return false
			  }
			  const token = util.cookies.get('token')
			  window.open(`${process.env.VUE_APP_API}/cons/downDayReportByExcel?&empName=${this.filter.empName}&empCode=${this.filter.empCode}&startDate=${this.filter.startDate}&endDate=${this.filter.endDate}&orgId=${this.filter.orgId}&token=${token}`)
			
		},
		/* 	getFunction () {
		  this.$GetFunction({
		    menuUrl:this.$route.path
		  }).then(res=>{
		    res.data.forEach(item=>{
					console.log(item)
		      if(item.functionType === 'select') {
		        if (item.remarks === 'true') {
		          this.func.select = true
		        } else {
		          this.func.select = false
		        }
		      } else if(item.functionType === 'hrAnalyse') {
		        if (item.remarks === 'true') {
		          this.func.hrAnalyse = true
		        } else {
		          this.func.hrAnalyse = false
		        }
		      }
		    })
		  })
		} */
    },
    mounted () {
			//this.getFunction()
			this.time = this.$setInitTime()
			this.filter.startTime =  this.time[0].format('yyyy-MM-dd')
			this.filter.endTime = this.time[1].format('yyyy-MM-dd')
			this.filter.pageSize = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions,70)
			this.handleList()
    }
  }
</script>
