<template>
  <d2-container>
    <div class="d2-table-view-full">
      <div class="d2-table-view-header">
        <el-form label-width="70px" labelPosition="center" 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="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss"
										:default-time="['00:00:00', '23:59:59']"
                    @change="dateChange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="状态标志">
            <!-- <custom-select :value="filter.flag" :isAll="true" v-model="filter.flag" typeName="刷卡类型" style="width: 180px;"/> -->
					<el-select v-model="filter.flag" placeholder="请选择">
						<el-option label="正常" value="0"></el-option>
						<el-option label="非法" value="1"></el-option>
						<el-option label="黑名单" value="3"></el-option>
					</el-select>
          </el-form-item>
					<el-form-item label="设备号" >
						<el-input v-model="filter.equipmentCode" clearable style="width: 180px;"/>
					</el-form-item>
          <el-form-item label="卡号">
            <el-input v-model="filter.cardCode" clearable   style="width: 180px;"/>
          </el-form-item>
          <el-form-item label="部门"  >
            <department-tree  @clearInput="clearDepartment" v-model="filter.depId"  />
          </el-form-item>
         <!-- <el-form-item label="姓名或工号" label-width="90px">
            <el-input v-model="filter.empName" clearable style="width: 180px;"/>
          </el-form-item> -->
					<!-- <el-form-item label="员工工号">
					  <el-input v-model="filter.empCode" clearable/>
					</el-form-item> -->
          <el-form-item>
            <el-button  type="primary" @click="handleList('1')">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="d2-table-view-content">
        <d2-crud
                title="考勤记录列表"
                ref="d2Crud"
                :loading="loading"
                :columns="columns"
                :data="data"
                :options="tableOptions">
				<el-button v-if="func.out" 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>
    </div>
  </d2-container>
</template>

<script>
  import { getAttendanceRecordByPage } 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-check',
   /* components:{
      departmentTree
    }, */
    data () {
      return {
				func:{
					select:false,
					out:false
				},
        time: '',
        loading: false,
        currentPage:1,
        tableOptions,
        filter: {
          startTime: '',
          endTime: '',
          flag:null,
          cardCode: '',
          empName: '',
          orgId:'',
          pageSize: 10,
          pageNum: 1,
					equipmentCode:'',
					empCode:''
        },
        pagination: {
          total: 0
        },
        columns: [
          {
            title: '序号',
            key: 'index',
            minWidth: '50',
            formatter (row, column, cellValue, index) {
              return index+1
            }
          },
					{
					  title: '卡号',
					  key: 'cardCode',
					  minWidth: '100'
					},
			/* 		{
						title: '工号',
						key: 'empCode',
						minWidth: '100'
					}, */
          {
            title: '姓名',
            key: 'userNm',
            minWidth: '100'
          },
          {
            title: '部门',
            key: 'depNm',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '设备号',
            key: 'equipmentCode',
            minWidth: '100',
          },
					{
						title: '设备名称',
						key: 'eqpNm',
						minWidth: '120',
						 showOverflowTooltip: true
					},
         /* {
            title: '打卡日期',
            key: 'tsDate',
            minWidth: '120',
          }, */
					 {
					  title: '打卡时间',
					  key: 'transTime',
					  minWidth: '160',
					},
          {
            title: '考勤模式',
            key: 'attModel',
            minWidth: '90',
						// formatter(row, column, cellValue, index) {
						// 	 if(cellValue == 0){
						// 		 return '物理卡号'
						// 	 }else if(cellValue == 1){
						// 		 return '逻辑卡号'
						// 	 }
						// }
          },
          {
            title: '状态标志',
            key: 'flag',
            minWidth: '90',
          },
          {
            title: '入库时间',
            key: 'uploadTime',
            minWidth: '180',
          },
        ],
        data: []
      }
    },
    methods: {
      handleList (val) {
         if(val){this.filter.pageNum=1
        this.currentPage = 1}
      this.loading = true
        getAttendanceRecordByPage(this.filter).then(res => {
          this.loading = false
          this.data = res.page.list
          this.pagination.total = res.page.total
        }).catch(err => {
          this.loading = false
        })
      },

      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]
				}
      },
			clearDepartment(){
				this.filter.orgId=''
			},
				 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}/hr/downAttendanceRecordByExcel?startTime=${this.filter.startTime}&endTime=${this.filter.endTime}&flag=${this.filter.flag || ''}&equipmentCode=${this.filter.equipmentCode}&cardCode=${this.filter.cardCode}&empName=${this.filter.empName}&orgId=${this.filter.orgId}&token=${token}`)
				},
			/* getFunction () {
			  this.$GetFunction({
			    menuUrl:this.$route.path
			  }).then(res=>{
			    res.data.forEach(item=>{
			      if (item.functionType === 'select') {
			        if (item.remarks === 'true') {
			          this.func.select = true
			        } else {
			          this.func.select = false
			        }
			      }else if(item.functionType === 'out'){
							if (item.remarks === 'true') {
							  this.func.out = true
							} else {
							  this.func.out = false
							}
						}  
			    })
			  })
			} */
    },
    mounted () {
			//this.getFunction()
      this.time = this.$setInitTime()
      this.tableOptions = this.$calcTableHeight(tableOptions,70)
      this.filter.startTime = this.time[0].format('yyyy-MM-dd hh:mm:ss')
      this.filter.endTime = this.time[1].format('yyyy-MM-dd hh:mm:ss')
	  this.filter.pageSize = this.tableOptions.pageList[0]
      this.handleList()
    }
  }
</script>
