<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
        <el-form-item label="选择月份" prop="attCurrentMonth">
          <el-date-picker
            v-model="queryParams.attCurrentMonth"
            style="width: 240px"
            placeholder="请选择选择月份"
            type="month"
            value-format="yyyy-MM"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="部门" prop="orgName">
          <el-select v-model="queryParams.orgName" placeholder="选择部门" clearable style="width: 100%;">
            <el-option
              v-for="dict in dict.type.sys_voltage_level"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名:"  prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入姓名"
            clearable
            @keyup.enter.native="handleQuery"
            maxlength="20"
          />
        </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="reset">重置</el-button>
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['att:detail:export']"
          >导出数据</el-button>
        </el-form-item>
      </el-form>
  
  
      <el-table v-loading="loading" :data="tableData" ref="multipleTable" row-key="id" >
        <el-table-column label="序号" align="center" width="80" type="index">
        <template slot-scope="scope">
          <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
        <el-table-column label="编号" align="center" prop="id" v-if="false" />
        <el-table-column label="姓名" align="center" prop="name" sortable/>
        <el-table-column label="所属部门" align="center" prop="orgName"  sortable/>
        <el-table-column label="应出勤天数" align="center" prop="requiredDays" sortable/>
        <el-table-column label="正常打卡天数" align="center" prop="normalNum" sortable>
          <template slot-scope="scope">
            <div v-if="scope.row.normalNum!=0"
            @click="openRecord(scope.row,title1)" style="color: #02a7f0; cursor: pointer">
                {{ scope.row.normalNum}}
            </div>
             <div v-else>{{ scope.row.normalNum}}</div>
        </template>
        </el-table-column>
        <el-table-column label="迟到次数" align="center" prop="lateNum" sortable>
          <template slot-scope="scope">
            <div v-if="scope.row.lateNum!=0"
            @click="openRecord(scope.row,title2)" style="color: #02a7f0; cursor: pointer">
                {{ scope.row.lateNum}}
            </div>
             <div v-else>{{ scope.row.lateNum}}</div>
        </template>
        </el-table-column>
        <el-table-column label="早退次数" align="center" prop="earlyNum" sortable>
          <template slot-scope="scope">
            <div v-if="scope.row.earlyNum!=0"
            @click="openRecord(scope.row,title3)" style="color: #02a7f0; cursor: pointer">
                {{ scope.row.earlyNum}}
            </div>
             <div v-else>{{ scope.row.earlyNum}}</div>
        </template>
        </el-table-column>
        <el-table-column label="旷工次数" align="center" prop="skippingNum" sortable>
          <template slot-scope="scope">
            <div v-if="scope.row.skippingNum!=0"
            @click="openRecord(scope.row,title4)" style="color: #02a7f0; cursor: pointer">
                {{ scope.row.skippingNum}}
            </div>
             <div v-else>{{ scope.row.skippingNum}}</div>
        </template>
        </el-table-column>
        <el-table-column label="打卡地异常次数" align="center" prop="addressErrorNum" sortable>
          <template slot-scope="scope">
            <div v-if="scope.row.addressErrorNum!=0"
            @click="openRecord(scope.row,title5)" style="color: #02a7f0; cursor: pointer">
                {{ scope.row.addressErrorNum}}
            </div>
             <div v-else>{{ scope.row.addressErrorNum}}</div>
        </template>
        </el-table-column>
        <el-table-column label="出入异常次数" align="center" prop="einErrorNum" sortable>
          <template slot-scope="scope">
            <div v-if="scope.row.einErrorNum!=0"
            @click="openRecord(scope.row,title6)" style="color: #02a7f0; cursor: pointer">
                {{ scope.row.einErrorNum}}
            </div>
             <div v-else>{{ scope.row.einErrorNum}}</div>
        </template>
        </el-table-column>
        <el-table-column label="请假天数" align="center" prop="leaveNum" sortable>
          <template slot-scope="scope">
            <div v-if="scope.row.leaveNum!=0"
            @click="openRecord(scope.row,title7)" style="color: #02a7f0; cursor: pointer">
                {{ scope.row.leaveNum}}
            </div>
             <div v-else>{{ scope.row.leaveNum}}</div>
        </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="title" :visible.sync="showRecord" width="1200px" height="1000px" append-to-body @close="cancelRecord">
        <el-form :model="queryRecord" ref="queryFormRecord" size="small" :inline="true" v-show="showSearch" label-width="110px">
        <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>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryRecord">查询</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetRecord">重置</el-button>
        </el-form-item>
        </el-form>

      <el-table v-loading="loadingTwo" :data="tableDataRecord" width="900px" height = "600px" row-key="id">
        <el-table-column label="序号" align="center" width="80" type="index">
        <template slot-scope="scope">
          <span>{{ (queryRecord.pageNum - 1) * queryRecord.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
        <el-table-column label="id" align="center" prop="id" v-if="false" />
        <el-table-column label="姓名" align="center" prop="name" width="80" sortable/>
        <el-table-column label="所属部门" align="center" prop="orgName" sortable/>
        <el-table-column label="考勤日期" align="center" prop="attCurrent" width="100" sortable>\
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.attCurrent) }}</span>
        </template>
        </el-table-column> 
        <el-table-column label="上班打卡时间" align="center" prop="goWorkTime" width="140" sortable/>
        <el-table-column label="上班状态" align="center" prop="goWorkStatus" width="100" sortable>
          <template slot-scope="scope">
            <span v-if="scope.row.goWorkStatus==1">{{ '正常' }}</span>
            <span v-if="scope.row.goWorkStatus==2">{{ '迟到' }}</span>
            <span v-if="scope.row.goWorkStatus==3">{{ '旷工' }}</span>
            <span v-if="scope.row.goWorkStatus==4">{{ '早退' }}</span>
            <span v-if="scope.row.goWorkStatus==5">{{ '轮休' }}</span>
            <span v-if="scope.row.goWorkStatus==6">{{ '请假' }}</span>
            <span v-if="scope.row.goWorkStatus==7">{{ '临时外出' }}</span>
            <span v-if="scope.row.goWorkStatus==8">{{ '出入异常' }}</span>
            <span v-if="scope.row.goWorkStatus==9">{{ '打卡地异常' }}</span>
            <span v-else>{{  }}</span>
        </template>
        </el-table-column> 
        <el-table-column label="上班打卡地址" align="center" prop="goWorkAddress" sortable/>
        <el-table-column label="下班打卡时间" align="center" prop="offWorkTime" width="140" sortable/>
        <el-table-column label="下班状态" align="center" prop="offWorkStatus" width="100" sortable>
          <template slot-scope="scope">
            <span v-if="scope.row.offWorkStatus==1">{{ '正常' }}</span>
            <span v-if="scope.row.offWorkStatus==2">{{ '迟到' }}</span>
            <span v-if="scope.row.offWorkStatus==3">{{ '旷工' }}</span>
            <span v-if="scope.row.offWorkStatus==4">{{ '早退' }}</span>
            <span v-if="scope.row.offWorkStatus==5">{{ '轮休' }}</span>
            <span v-if="scope.row.offWorkStatus==6">{{ '请假' }}</span>
            <span v-if="scope.row.offWorkStatus==7">{{ '临时外出' }}</span>
            <span v-if="scope.row.offWorkStatus==8">{{ '出入异常' }}</span>
            <span v-if="scope.row.offWorkStatus==9">{{ '打卡地异常' }}</span>
            <span v-else>{{  }}</span>
        </template>
        </el-table-column> 
        <el-table-column label="下班打卡地址" align="center" prop="offWorkAddress" sortable/>
      </el-table>
  
      <pagination
        v-show="totalTwo>0"
        :total="totalTwo"
        :page.sync="queryRecord.pageNum"
        :limit.sync="queryRecord.pageSize"
        @pagination="getListRecord"
      />

      </el-dialog>

    </div>
  </template>
  
  <script>
  import { listMonthlyError,getDetail,exportMonthlyError} from "@/api/attendanceReport/monthlyError";
  import { listDept, getDept, delDept, addDept, updateDept,orgPersonSelect } from "@/api/system/dept";
  import { downloadFile } from '@/utils/download'
  // import { getEngineeringList } from "@/api/select";
  import { getToken } from '@/utils/auth'
  export default {
    name: "Post",
    dicts: ['sys_normal_disable','sys_voltage_level','sys_org_name','sys_pro_type','sys_pro_status',
    'sys_yz_manage','sys_sg_manage','sys_jl_manage','sys_device_type'],
    components: {
		},
    data() {
      return {
        showAttribute:false,
        // 遮罩层
        loading: true,
        // 遮罩层
        loadingTwo: true,
        // 选中数组
        ids: [],
        // 部门树选项
        deptOptions: [],
        // 显示搜索条件
        showSearch: true,
        showRecord:false,
        maxLength:100,//已选列表上限，防止数据过多请求报错
        // 总条数
        total: 0,
        totalTwo: 0,
        // 表格数据
        tableData: [],
        tableDataRecord: [],
        // 弹出层标题
        title: "",
        title1: "打卡记录",
        title2: "迟到记录",
        title3: "早退记录",
        title4: "旷工记录",
        title5: "打卡地异常记录",
        title6: "出入异常记录",
        title7: "请假记录",
        // 是否显示弹出层
        open: false,
        dateRange: [],

        queryParams: {
          pageNum: 1,
          pageSize: 10,
          attCurrentMonth:undefined,
          name:undefined,
          orgName: undefined,
        },

        queryRecord: {
          pageNum: 1,
          pageSize: 10,
          userId: undefined,
          attStatis: undefined,
        },
        // 表单参数



      };
    },
    computed: {
    },
    created() {
      this.getDeptList(),
      this.getList();
    },
    mounted(){
    },
    methods: {
        formatDate(dateString){
          const date = new Date(dateString); // 创建日期对象
          const year = date.getFullYear(); // 获取年份
          const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份（注意：月份从0开始）
          const day = String(date.getDate()).padStart(2, '0'); // 获取日期
          const weekdays = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; // 星期几数组
          const weekday = weekdays[date.getDay()]; // 获取星期几

          return `${year}-${month}-${day} ${weekday}`; // 组合成所需格式
        },

        /** 查询部门列表 */
        getDeptList() {
          this.loading = true;
          listDept().then(response => {
            this.deptList = this.handleTree(response.data, "id");
            this.loading = false;
          });
        },
 
        /** 查询月异常列表 */
        getList() {
            this.loading = true;
            listMonthlyError(this.queryParams).then(response => {
              this.tableData = response.rows;
              this.total = response.total;
              this.loading = false;
            });
        },

        /** 搜索按钮操作 */
        handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
        },

        // 表单重置
        reset() {
            this.queryForm = {};
            this.resetForm("queryForm");
            this.getList();
        },
        // 表单重置
        resetRecord() {
            // this.queryFormRecord = {};
            this.dateRange = [];
            this.resetForm("queryFormRecord");
            this.getListRecord();
        },


        //打开月异常详情页面
        openRecord(row,titleBoss){
          this.id = row.id;
          this.title = titleBoss;
          this.queryRecord.userId = row.userId;
          if(titleBoss=='打卡记录'){
            this.queryRecord.attStatis=1;
          }else if(titleBoss=='迟到记录'){
            this.queryRecord.attStatis=2;
          }else if(titleBoss=='早退记录'){
            this.queryRecord.attStatis=4;
          }else if(titleBoss=='旷工记录'){
            this.queryRecord.attStatis=3;
          }else if(titleBoss=='打卡地异常记录'){
            this.queryRecord.attStatis=9;
          }else if(titleBoss=='出入异常记录'){
            this.queryRecord.attStatis=8;
          }else if(titleBoss=='请假记录'){
            this.queryRecord.attStatis=6;
          }
          this.showRecord = true;
          this.getListRecord();
        },

        /** 查询月异常详情列表 */
        getListRecord() {
          this.loadingTwo = true;
          getDetail(this.addDateRange(this.queryRecord, this.dateRange)).then(response => {
            this.tableDataRecord = response.rows;
            this.totalTwo = response.total;
            this.loadingTwo = false;
          });
        },

        /** 搜索按钮操作 */
        handleQueryRecord() {
        this.queryRecord.pageNum = 1;
        this.getListRecord();
        },

        cancelRecord() {
            this.showRecord = false;
            this.resetRecord();
        },
  
        /** 导出按钮操作 */
        handleExport() {
        exportMonthlyError(this.queryParams).then(res => {
          downloadFile({ fileName: `月异常报表_${new Date().getTime()}.xlsx`, fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
        })
      },
  
    }
  };
  </script>

  <style lang="scss" scoped>
  .uploadImg {
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .deviceCode {
      margin-top: 10px;
      padding-bottom: 20px;
      font-size: 18px;
  }
  ::v-deep.el-table .fixed-width .el-button--mini {
      width: 60px !important;
      margin-bottom: 10px;
  }
  //隐藏图片上传框的css
  ::v-deep.disabled {
      .el-upload--picture-card {
          display: none;
      }
  }
  </style>