<template>
  <div class="page">
    <LayoutTable :data="tableData" :config="tableConfig" notDel notAdd>
      <el-button
        slot="table-head-left2"
        style="margin-left: 10px"
        icon="el-icon-tickets"
        size="mini"
        @click="handleImport"
        >导入</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
      >
      <el-button
        slot="table-head-left2"
        style="margin-left: 10px"
        icon="el-icon-tickets"
        size="mini"
        type="success"
        @click="lookexportHis"
        >导出记录</el-button
      >
       <el-button
        type="primary"
        size="mini"
        slot="table-head-left2"
        style="margin-left: 10px"
        @click="formatData"
        >生成打卡记录</el-button
      >
    </LayoutTable>
    <dialog-show ref="dialogform" @ok="getData" />
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的数据
          <el-link
            type="primary"
            style="font-size: 14px"
            @click="downloadTemplate"
            >下载模板</el-link
          >
        </div>
        <div class="el-upload__tip" style="color: red" slot="tip">
          提示：仅允许导入“xls”或“xlsx”格式文件！
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 导出记录查看 -->
    <el-drawer
      title="导出记录"
      :visible.sync="drawerhistory"
      :direction="direction"
    >
      <div class="hisList">
        <div
          class="list mt10"
          v-for="(item, index) in exportList"
          :key="index"
          @click="changeStatus(item)"
        >
          <div class="flex flex-align-center flex-pack-justify">
            <div>打卡记录汇总</div>
            <el-button type="text">导出成功</el-button>
          </div>
          <div class="details" v-if="item.islook">
            <div class="mt10" v-if="item.recordIdList">
              选择列表id： {{ item.recordIdList }}
            </div>
            <div class="mt10" v-if="item.deptName">
              选择部门：{{ item.deptName }}
            </div>
            <div class="mt10" v-if="item.groupName">
              选择考勤组：{{ item.groupName }}
            </div>
            <div class="mt10" v-if="item.className">
              选择班次：{{ item.className }}
            </div>

            <div class="mt10">
              <el-link :href="item.filePath" target="_blank" type="primary"
                >重新下载</el-link
              >
            </div>
          </div>
          <div class="times mt10">导出时间：{{ item.createTime }}</div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
/** 表单弹出框模式需引入 */
import dialogShow from "./dialogshow";
import table from "@/assets/mixins/table";
import { timestampToTime } from "@/assets/utils/dateFormat";
export default {
  name: "AttendanceRecordHikList",
  components: {
    dialogShow,
  },
  mixins: [table],
  created() {},
  methods: {
    // 生成打卡记录
    formatData() {
      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.$post("/attendance/record/hik/addAttendanceRecord", {
        ...params,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success("生成打卡记录成功！");
        }
      });
    },
    // 更改状态
    changeStatus(item) {
      this.$set(item, "islook", !item.islook);
    },
    // 导出记录
    lookexportHis() {
      this.$post("/attendance/export/record/list", {
        type: 1,
        page: 1,
        size: -1,
      }).then((res) => {
        if (res.code == 1) {
          let arr = res.data.data;
          this.exportList = arr.map((item) => {
            item.createTime = timestampToTime(item.createTime, 6);
            item.islook = false;
            return item;
          });
        }
      });
      // 导出记录
      this.drawerhistory = true;
    },
    /** 导入 */
    handleImport() {
      this.upload.title = "打卡记录导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    downloadTemplate() {
      this.isExport = true;
      this.$download(
        "/attendance/record/hik/downloadTemplate",
        {},
        { type: "excel" }
      )
        .then(() => (this.isExport = false))
        .catch((error) => {
          this.isExport = false;
          this.$message.error(error.message);
        });
    },
    /** 文件上传中处理 */
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    /** 文件上传成功处理 */
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getData();
    },
    /** 提交上传文件 */
    submitFileForm() {
      this.$refs.upload.submit();
    },
    /** 导出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/record/hik/exportExcel",
        {
          ...params,
        },
        { type: "excel" }
      )
        .then(() => (this.isExport = false))
        .catch((error) => {
          this.isExport = false;
          this.$message.error(error.message);
        });
    },
    /** 重写新增方法 */
    toAdd(row) {
      this.$refs.dialogform.add(row);
    },
    /** 重写编辑方法 */
    toEdit(row) {
      this.$refs.dialogform.edit(row);
    },
    /** 重写查看方法 */
    toView(row) {
      this.$refs.dialogform.view(row);
    },
    afterRender(data) {
      console.log(this.tableData.data);
    },
  },
  data() {
    return {
      upload: {
        headers: {
          Authorization: window.sessionStorage.getItem("token") || "",
        },
        // 是否显示弹出层（员工关怀信息导入）
        open: false,
        // 弹出层标题（员工关怀信息导入）
        title: "导入员工关怀信息数据",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的数据
        updateSupport: 0,
        // 上传的地址
        url:
          process.env.VUE_APP_API_BASE_URL +
          "/attendance/attendance/record/hik/importData",
      },
      config: {
        isshowTabPane: true,
        search: [
          {
            name: "staffName",
            type: "text",
            label: "员工姓名",
            fuzzy: false,
          },
          {
            name: "workNum",
            type: "text",
            label: "工号",
            fuzzy: false,
          },
          // {
          //     name: "deptId",
          //     type: "select",
          //     label: "所属部门",
          //     fuzzy: false
          // },
          // {
          //     name: "attendanceGroupId",
          //     type: "select",
          //     label: "所属考勤组",
          //     fuzzy: false
          // },
          // {
          //     name: "shiftsId",
          //     type: "select",
          //     label: "班次",
          //     fuzzy: false
          // },
          {
            name: "attendanceDateStart",
            type: "date",
            label: "考勤开始时间",
            fuzzy: false,
          },
          {
            name: "attendanceDateEnd",
            type: "date",
            label: "考勤结束时间",
            fuzzy: false,
          },
        ],
        columns: [
          { type: "selection", width: 60 },
          { type: "index", label: "序号", width: 50 },
          { label: "员工姓名", prop: "staffName" },
          { label: "工号", prop: "workNum" },
          { label: "部门", prop: "deptName" },
          // {label: "考勤组", prop: "attendanceGroupName"},
          // {label: "职位", prop: "positionName"},
          // {label: "班次", prop: "shiftsName"},
          {
            label: "考勤时间",
            prop: "attendanceDate",
            formatter: this.formatterDate,
          },
          { label: "考勤点名称", prop: "attendanceAddress" },
          { label: "事件源", prop: "eventSource" },
          // {
          //     label: "操作",
          //     width: 240,
          //     formatter: row => {
          //         return (
          //             <table-buttons noAdd noDel noEdit noView  row={row}
          //             onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
          //         )
          //     }
          // }
        ],
      },
      drawerhistory: false,
      exportList: [],
      baseUrl: process.env.VUE_APP_API_BASE_URL + "/",
    };
  },
};
</script>
<style scoped lang="scss">
.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;
    }
    cursor: pointer;
  }
}
.details {
  cursor: pointer;
}
</style>
