<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="日期">
          <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="部门" prop="orgId">
            <treeselect v-model="queryParams.orgId" :options="deptOptions" :normalizer="normalizer" @select="handleSelect" placeholder="选择部门" style="width: 240px"/>
        </el-form-item>
        <el-form-item label="姓名" prop="userName">
          <el-input
            v-model="queryParams.userName"
            placeholder="请输入姓名"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
       
        
       
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['system:dict:export']"
          >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
  
      <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column type="index" width="55" align="center" />
        <el-table-column label="考勤日期" align="center" prop="attCurrentDay" />
        <el-table-column label="正常打卡人数" align="center" prop="normalNum">
          <!-- <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template> -->
        </el-table-column>
        <el-table-column label="迟到人数" align="center" prop="lateNum">
          <!-- <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template> -->
        </el-table-column>
        <el-table-column label="早退人数" align="center" prop="eaelyNum">
          <!-- <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template> -->
        </el-table-column>
        <el-table-column label="旷工人数" align="center" prop="skippingNum">
          <!-- <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template> -->
        </el-table-column>
        <el-table-column label="请假人数" align="center" prop="leaveNum">
          <!-- <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template> -->
        </el-table-column>
        <el-table-column label="打卡地异常人数" align="center" prop="addressErrorNum">
          <!-- <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template> -->
        </el-table-column>
        <el-table-column label="出入异常人数" align="center" prop="einErrorNum">
          <!-- <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template> -->
        </el-table-column>
        <el-table-column label="轮休人数" align="center" prop="restNum">
          <!-- <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template> -->
        </el-table-column>
        <el-table-column label="临时外出人数" align="center" prop="outNum">
          <!-- <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template> -->
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

    <el-dialog title="打卡记录" :visible.sync="open" width="1000px" append-to-body>
        <el-form ref="dialogQueryForm" :model="dialogQueryForm" size="small" label-width="80px">
            <el-form-item label="姓名" prop="userName">
                
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleDialogQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetDialogQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="dialogList" >
            <el-table-column type="index" width="55" align="center" />
            <el-table-column label="姓名" align="center" prop="userName" />
            <el-table-column label="所属部门" align="center" prop="orgName" :show-overflow-tooltip="true" />
            
            <el-table-column label="上班打卡时间" align="center" prop="toWorkAttCurrentTime" width="180"></el-table-column>
            <el-table-column label="上班状态" align="center" prop="toWorkAttStatus">

            </el-table-column>
            <el-table-column label="打卡地址" align="center" prop="toWorkAttAddress" :show-overflow-tooltip="true" />
             
            <el-table-column label="下班打卡时间" align="center" prop="offWorkAttCurrentTime" width="180"></el-table-column>
            <el-table-column label="下班状态" align="center" prop="offWorkAttStatus">
                
            </el-table-column>
            <el-table-column label="打卡地址" align="center" prop="offWorkAttAddress" :show-overflow-tooltip="true" />
        </el-table>

        <pagination
        v-show="dialogTotal>0"
        :total="dialogTotal"
        :page.sync="dialogQueryForm.pageNum"
        :limit.sync="dialogQueryForm.pageSize"
        @pagination="getDialogList"
        />

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="cancel">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
    
    </div>
  </template>
  
  <script>
  import { getdayAttReport } from "@/api/report/dayReport";
  import { listDept } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";   
  export default {
    name: "Dict",
    dicts: ['sys_normal_disable'],
    components: { Treeselect },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 字典表格数据
        typeList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        dialogQueryForm:{
            pageNum: 1,
            pageSize: 10,
        },
        dialogList:[],
        dialogTotal: 0,
        // 日期范围
        dateRange: [],
        deptOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userName: undefined,
          orgId: undefined,
          orgName: undefined,
        },
      };
    },
    created() {
      this.getDeptList();
      this.getList();
    },
    methods: {
        getDeptList(){
            listDept().then(response => {
                this.deptOptions = this.handleTree(response.data, "id");
            });
        },
        /** 转换部门数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.id,
                label: node.orgName,
                children: node.children
            };
        },
        handleSelect(value, instanceId) { 
            console.log('Selected:', value);
            // 在这里处理选择事件
            this.queryParams.orgName=value.orgName;
        },
         /** 查询字典类型列表 */
        getList() {
            this.loading = true;
            console.log(this.dateRange)
            if(this.dateRange&&this.dateRange.length>0){
                this.queryParams.startDate=this.dateRange[0]
                this.queryParams.endDate=this.dateRange[1]
            }else{
                this.queryParams.startDate=undefined
                this.queryParams.endDate=undefined
            }
            getdayAttReport(this.queryParams).then(response => {
                this.typeList = response.rows;
                this.total = response.total;
                this.loading = false;
            }
            );
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },

        openDialog(){
            this.open=true;
            this.resetForm("dialogQueryForm");
            this.handleQuery();
        },
        cancel(){
            this.open=false;
        },
        getDialogList() { 
            // getdayAttReport(this.dialogQueryForm).then(response => {
            //     this.dialogList = response.rows;
            //     this.dialogTotal = response.total; 
            // });
        },
        /** 搜索按钮操作 */
        handleDialogQuery() {
            this.dialogQueryForm.pageNum = 1;
            this.getDialogList();
        },
        /** 重置按钮操作 */
        resetDialogQuery() {
            this.resetForm("dialogQueryForm");
            this.handleQuery();
        },

        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.dictId)
            this.single = selection.length!=1
            this.multiple = !selection.length
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('system/dict/type/export', {
            ...this.queryParams
            }, `type_${new Date().getTime()}.xlsx`)
        },
 
    }
  };
  </script>