<template>
  <div class="page">
    <LayoutTable :data="tableData" :config="tableConfig" notDel notAdd>
      <el-button
        slot="table-head-left2"
        style="margin-left: 10px"
        size="mini"
        type="primary"
        @click="morehandle"
        >批量处理</el-button
      >
      <el-button
        slot="table-head-left2"
        style="margin-left: 10px"
        icon="el-icon-tickets"
        size="mini"
        type="primary"
        @click="doExport"
        :disabled="isExport"
        >导出</el-button
      >
    </LayoutTable>
    <drawer-show ref="drawerShow" @ok="getData" />
    <!-- 撤销提示 -->
    <el-dialog :visible.sync="dialogVisible" title="提示" width="40%">
      <div>
        撤销异常处理结果后，当天的考勤结果将会重新计算，系统需要花费一点时间。
      </div>
      <div class="flex flex_end">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="resetError">确定</el-button>
      </div>
    </el-dialog>
    <div class="mask" v-if="progress">
      <el-progress :stroke-width="26" :percentage="percent"></el-progress>
    </div>
  </div>
</template>

<script>
/** 表单弹出框模式需引入 */
import drawerShow from "./drawershow";
import table from "@/assets/mixins/table";
import {
  getFirstDay,
  getLastDay,
  getdiffdate,
  timestampToTime,
  getMyDay,
} from "@/assets/utils/dateFormat.js";
export default {
  name: "AttendanceRecordErrorList",
  components: {
    drawerShow,
  },
  mixins: [table],
  data() {
    return {
      // 进度展示值
      percent: 0,
      // 导出按钮加载状态
      isExport: false,
      // 是否显示进度条
      progress: false,
      // 表格配置项
      config: {
        isshowTabPane: true,
        search: [
          {
            name: "salaId",
            type: "selectSalaId",
            label: "大厅",
            fuzzy: false,
          },
          {
            name: "deptId",
            type: "selectDeptId",
            label: "部门",
            fuzzy: false,
          },
          // {
          //   name: "groupId",
          //   type: "select",
          //   label: "全部考勤组",
          // },
          /*                        {
                            name: "classId",
                            type: "select",
                            label: "全部班次",
                            fuzzy: false
                        },*/
          {
            name: "errorStatus",
            type: "select",
            label: "异常状态",
          },
          {
            name: "processStatus",
            type: "select",
            label: "处理状态",
          },
          {
            name: "errorDateTimeStart",
            type: "date",
            label: "异常开始时间",
          },
          {
            name: "errorDateTimeEnd",
            type: "date",
            label: "异常结束时间",
          },
          {
            name: "staffName",
            type: "text",
            label: "员工姓名",
            fuzzy: true,
          },
          // {
          //   name: "phoneNumber",
          //   type: "text",
          //   label: "手机号",
          //   fuzzy: true,
          // },
        ],
        columns: [
          { type: "selection", width: 60, fixed: "left" },
          { type: "index", label: "序号", width: 50, fixed: "left" },
          { label: "员工姓名", prop: "staffName", fixed: "left", width: 100 },
          { label: "工号", prop: "workNum" },
          {
            label: "大厅",
            prop: "salaName",
            formatter: this.formatter,
            show: true,
          },
          {
            label: "部门",
            prop: "deptName",
            formatter: this.formatter,
            show: true,
          },
          { label: "考勤组", prop: "attendanceGroupName" },
          /*  {label: "班次", prop: "shiftsName"},*/
          {
            label: "异常状态",
            prop: "errorStatus",
            formatter: this.formattereErrorStatus,
          },
          {
            label: "异常时间",
            prop: "errorDateTime",
            width: 160,
            formatter: this.formatterDate,
          },
          {
            label: "处理结果",
            prop: "processResult",
            formatter: this.formatters,
          },
          {
            label: "上下班时间",
            prop: "goOffDateTime",
            formatter: (row) => {
              return row.goOrOff + " " + row.goOffDateTime;
            },
          },
          {
            label: "实际打卡时间",
            prop: "actualAttendanceDateTime",
            formatter: this.formatterDate,
            width: 160,
          },
          {
            label: "处理时间",
            prop: "operDateTime",
            formatter: this.formatterDate,
            width: 160,
          },
          {
            label: "处理状态",
            prop: "processStatus",
            formatter: this.formattereDealStatus,
          },
          { label: "处理人", prop: "opertor", formatter: this.formatters },
          { label: "备注", prop: "remark", formatter: this.formatters },
          {
            label: "操作",
            width: 100,
            formatter: (row) => {
              if (row.processStatus == 0 || !row.processStatus) {
                return (
                  <el-button
                    type="text"
                    size="mini"
                    onClick={() => {
                      this.handle(row);
                    }}
                  >
                    处理
                  </el-button>
                );
              } else {
                return (
                  <span>
                    <el-button
                      type="text"
                      size="mini"
                      onClick={() => {
                        this.reCancle(row);
                      }}
                    >
                      撤销
                    </el-button>
                  </span>
                );
              }
            },
          },
        ],
      },
      dialogVisible: false,
      currentParams: {},
    };
  },
  created() {
    this.query.errorDateTimeStart = getFirstDay();
    this.query.errorDateTimeEnd = getLastDay();
  },
  methods: {
    // 倒计时
    countDown() {
      if (this.percent == 95) {
        let params = {};
        for (let value of this.config.search) {
          if (this.query[value.name]) {
            params[value.name] = this.query[value.name];
          }
        }

        if (this.selection.length > 0) {
          params["idList"] = this.selection;
        }
        let that = this;
        this.$download(
          "/attendance/record/error/exportExcel",
          {
            ...params,
          },
          { type: "excel", name: "异常处理" }
        )
          .then(() => {
            this.percent = 100;
            this.progress = false;
            that.isExport = false;
          })
          .catch((error) => {
            this.isExport = false;
            this.progress = false;
            this.$message.error(error.message);
          });
        return;
      } else {
        this.percent = this.percent + 1;
        let that = this;
        setTimeout(function () {
          that.countDown();
        }, 100);
      }
    },
    /** 导出Excel */
    doExport() {
      if (this.isExport == true) {
        this.$message.info("数据正在导出中，请勿重复点击！");
        return false;
      }

      this.isExport = true;
      this.progress = true;
      this.percent = 0;
      this.countDown();
    },
    /** 重写新增方法 */
    // toAdd(row) {
    //     this.$refs.dialogform.add(row);
    // },
    // /** 重写编辑方法 */
    // toEdit(row) {
    //     this.$refs.dialogform.edit(row);
    // },
    // /** 重写查看方法 */
    // toView(row) {
    //     this.$refs.dialogform.view(row);
    // },
    // 处理选择项
    morehandle() {
      let arr = this.tableData.data.filter((item) => {
        if (this.selection.includes(item.id) && item.processStatus == 0) {
          return item;
        }
      });
      this.$nextTick(() => {
        this.selection = arr.map((item) => item.id);
      });
      if (arr.length < 1) {
        this.$message.error("请至少选择一条处理");
        return;
      }

      this.$refs.drawerShow.edit(arr[0], arr);
    },
    // 处理
    handle(err) {
      this.$refs.drawerShow.edit(err, []);
    },
    // 撤销
    reCancle(err) {
      this.currentParams = err;
      this.dialogVisible = true;
    },
    // 重置
    resetError() {
      this.$post("attendance/record/error/revokeError", {
        id: this.currentParams.id,
      }).then((res) => {
        if (res.code == 1) {
          this.dialogVisible = false;
          this.getData();
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.mask {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  padding: 0 30%;
  padding-top: 20%;
  background: rgba(0, 0, 0, 0.6);
}
::v-deep .el-progress__text {
  color: #409eff;
  font-weight: 600;
}
</style>
