<template>
  <div class="page">
    <LayoutTable :data="tableData" :config="tableConfig" notAdd notDel>
      <el-button
        slot="table-head-left2"
        style="margin-left: 10px"
        icon="el-icon-tickets"
        size="mini"
        type="primary"
        @click="doExport"
        :disabled="isExport"
        >导出</el-button
      >
      <el-button
        slot="table-head-left2"
        style="margin-left: 10px"
        icon="el-icon-tickets"
        size="mini"
        type="success"
        @click="lookexportHis"
        >导出记录</el-button
      >
      <el-button
        slot="table-head-left2"
        style="margin-left: 10px"
        icon="el-icon-tickets"
        size="mini"
        @click="setdialog"
        >表格设置</el-button
      >
      <el-button
        slot="table-head-left2"
        style="margin-left: 10px"
        icon="el-icon-tickets"
        size="mini"
        @click="restTable"
        >重新汇总</el-button
      >
    </LayoutTable>
    <dialog-show ref="dialogform" @ok="getData" />
    <!-- 表格设置 -->
    <el-dialog :visible.sync="isdialog" title="导出表格设置">
      <div class="tipsword">
        请选择表格展示字段，导出的表格中的内容选中的字段将保持一致。
      </div>
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="(item, index) in setcolum"
          :key="index"
          :label="item.label"
        >
        </el-checkbox>
      </el-checkbox-group>
      <div class="mt20" style="text-align:right">
        <el-button>取消</el-button>
        <el-button type="primary">确定</el-button>
      </div>
    </el-dialog>
    <!-- 导出记录查看 -->
    <el-drawer
      title="导出记录"
      :visible.sync="drawerhistory"
      :direction="direction"
    >
      <div class="hisList">
        <div class="list mt10" v-for="item in 10" :key="item">
          <div class="flex flex-align-center flex-pack-justify">
            <div>打卡记录汇总</div>
            <el-button type="text">导出成功</el-button>
          </div>
          <div class="times">
            导出时间：2020-08-13
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
/** 表单弹出框模式需引入 */
import dialogShow from "./dialogshow";
import table from "@/assets/mixins/table";
import {
  getFirstDay,
  getLastDay,
  getdiffdate,
  timestampToTime,
  getMyDay,
} from "@/assets/utils/dateFormat.js";
export default {
  name: "AttendanceStatList",
  components: {
    dialogShow,
  },
  mixins: [table],
  created() {
    this.query.summaryTimeStart = getFirstDay();
    this.query.summaryTimeEnd = getLastDay();
    this.initalArr = this.config.columns;
  },
  methods: {
    // 处理
    handleArr(arr, currentTime) {
      console.log(currentTime);
      console.log(arr);
      let index = arr.findIndex((item) => item.createTime == currentTime);
      if (index > -1) {
        console.log(arr[index].attendanceSummary);
        return arr[index].attendanceSummary;
      } else {
        return "-";
      }
    },
    restTable() {
      this.getTable();
    },
    afterRender(data) {
      this.addColumn = getdiffdate(
        this.query.summaryTimeStart,
        this.query.summaryTimeEnd
      );
      // 动态处理
      let addobjArr = [];
      this.addColumn.map((item, index) => {
        let obj = {
          label: item + "(" + getMyDay(new Date(item)) + ")",
          prop: "attendanceStaffStatEntities",
          formatter: (row) => {
            if (
              row.attendanceStaffStatEntities &&
              row.attendanceStaffStatEntities.length > 0
            ) {
              return this.handleArr(row.attendanceStaffStatEntities, item);
            } else {
              return "-";
            }
          },
        };
        addobjArr.push(obj);
      });
      this.config.columns = [...this.initalArr, ...addobjArr];
      this.$forceUpdate();
    },
    beforeRender(row) {
      row.data.forEach((element) => {
        if (
          element.attendanceStaffStatEntities &&
          element.attendanceStaffStatEntities.length > 0
        ) {
          element.attendanceStaffStatEntities.forEach((item1) => {
            item1.createTime = timestampToTime(item1.createTime, 3);
          });
        }
      });
      return row;
    },
    /** 重写新增方法 */
    toAdd(row) {
      this.$refs.dialogform.add(row);
    },
    /** 重写编辑方法 */
    toEdit(row) {
      this.$refs.dialogform.edit(row);
    },
    /** 重写查看方法 */
    toView(row) {
      this.$refs.dialogform.view(row);
    },
    setdialog() {
      this.isdialog = true;
      this.setcolum = this.config.columns.filter(
        (item) => item.label && item.prop
      );
    },
    lookexportHis() {
      this.drawerhistory = true;
    },
    /** 导出Excel */
    doExport() {
      this.isExport = true;
      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;
      }
      this.$download(
        "/attendance/stat/exportExcelExt",
        {
          ...params,
        },
        { type: "excel" }
      )
        .then(() => (this.isExport = false))
        .catch((error) => {
          this.isExport = false;
          this.$message.error(error.message);
        });
    },
  },
  data() {
    return {
      config: {
        isshowTabPane: true,
        search: [
          {
            name: "deptId",
            type: "select",
            label: "全部部门",
            fuzzy: false,
          },
          // {
          //   name: "groupId",
          //   type: "select",
          //   label: "全部考勤组",
          //   fuzzy: false,
          // },
          // {
          //   name: "classId",
          //   type: "select",
          //   label: "全部班次",
          //   fuzzy: false,
          // },
          {
            name: "summaryTimeStart",
            type: "date",
            label: "考勤开始时间",
            fuzzy: false,
          },
          {
            name: "summaryTimeEnd",
            type: "date",
            label: "考勤结束时间",
            fuzzy: false,
          },
          {
            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: "windowCategory",
            fixed: "left",
            width: 100,
          },

          { label: "员工姓名", prop: "staffName", fixed: "left", width: 100 },
          { label: "部门", prop: "deptName" },
          { label: "出勤天数", prop: "goTimes", formatter: this.formatter },

          {
            label: "缺卡次数",
            prop: "morningTimes",
            formatter: this.formatter,
          },
          // {
          //   label: "上午缺卡次数",
          //   prop: "morningTimes",
          //   formatter: this.formatter,
          // },

          // {
          //   label: "下午缺卡次数",
          //   prop: "afternoonTimes",
          //   formatter: this.formatter,
          // },
          { label: "回单位（天）", prop: "backToUnit" },

          { label: "因公请假（天）", prop: "onDutyLeave" },

          { label: "外出勘验（天）", prop: "outOfOffice" },

          { label: "值班补班（天）", prop: "shiftCompensation" },

          { label: "体检（天）", prop: "physicalExamination" },

          { label: "隔离（天）", prop: "quarantine" },

          { label: "因公外出（与窗口工作无关/天）", prop: "businessTrip" },

          { label: "公休（天）", prop: "publicHoliday" },

          { label: "病假（天）", prop: "sickLeave" },

          { label: "丧假（天）", prop: "funeralLeave" },

          { label: "婚假（天）", prop: "marriageLeave" },

          { label: "育儿假（天）", prop: "childRearingLeave" },

          { label: "产假（陪护假/天）", prop: "maternityLeave" },

          { label: "调回单位（或离职/天）", prop: "transferBack" },

          { label: "探亲假（天）", prop: "homeLeave" },

          { label: "事假（天）", prop: "personalLeave" },

          { label: "旷工（天）", prop: "absenteeismDays" },

          { label: "其他（天）", prop: "otherDays" },

          {
            label: "出勤率%",
            prop: "attendanceRate",
            formatter: (row) => {
              console.log(row);
              return row.attendanceRate
                ? (Number(row.attendanceRate) * 100).toFixed(2) + "%"
                : "--";
            },
          },

          { label: "未按规定打卡（含忘记打卡）", prop: "nonCompliancePunch" },

          { label: "迟到（次）", prop: "lateTimes" },

          { label: "上网耍手机（次）", prop: "surfingMobileTimes" },

          { label: "溜班（次）", prop: "overtimeTimes" },

          { label: "空岗（次）", prop: "vacancy" },

          { label: "未规范着装（次）", prop: "nonStandardDressTimes" },

          { label: "无故缺席会议（次）", prop: "unexcusedMeetingAbsence" },

          { label: "会议早退", prop: "earlyLeaveMeeting" },
        ],
      },
      setcolum: [],
      isdialog: false,
      checkList: [],
      drawerhistory: false,
      // 动态新增列表
      addColumn: [],
      initalArr: [],
    };
  },
};
</script>
<style scoped lang="less">
.hisList {
  padding: 15px;
  .list {
    background-color: rgba(64, 158, 255, 0.1);
    font-size: 14px;
    border-radius: 10px;
    padding: 10px;
    .times {
      font-size: 12px;
      color: #999;
    }
  }
}
.tipsword {
  margin: 20px 0;
  color: #999;
}
</style>
