<template lang="pug">
.main
  .main-top
    h2 {{ $route.meta.title }}
  .main-oper
    span 考勤时间:
    el-date-picker(
      v-model="filterData.dateRange",
      size="small",
      type="daterange",
      align="left",
      start-placeholder="开始日期",
      end-placeholder="结束日期",
      range-separator="-",
      :picker-options="dateOptions",
      value-format="yyyy-MM-dd"
    )
    span 员工姓名:
    el-input(placeholder="请输入", size="small", v-model="filterData.staffName", clearable, @keyup.enter.native="queryTable")
    //- mc-department(:deptIds.sync="filterData.deptId")
    .main-oper-button
      el-button(type="primary", size="small", icon="el-icon-search", @click.stop="queryTable") 查 询
      el-button(type="warning", size="small", icon="el-icon-download", @click.stop="exportTable") 导 出
  mc-table.table(:props="tableHeader", :data="tableData", :paging.sync="paginationInitial", @paginationChanged="paginationChanged")
    template(v-slot:num="{ scope }")
      span {{ scope.row[scope.col.field] ? scope.row[scope.col.field] : '' }}
</template>

<script>
import { queryReport, exportReport } from "opay/service/api";
import date from "@/utils/date";

import mixin from "./index.mixin";

export default {
  name: "opay-over-time",
  mixins: [mixin],
  components: {
    McTable: () => import("@/components/table/element-ui/Universal"),
    McDepartment: () => import("@/components/common/element-ui/department")
  },
  data () {
    return {
      // 表数据
      tableData: [],
      // 分页初始值
      paginationInitial: {
        page: 1,
        size: 10,
        total: 0
      },
      // 查询条件
      filterData: {
        // 过滤部门
        deptId: [],
        // 人员姓名
        staffName: "",
        // 查询时间
        dateRange: []
      },
      // 日期组件选项
      dateOptions: {
        shortcuts: [
          {
            text: "最近 7 天",
            onClick (picker) {
              picker.$emit("pick", [date.rangeDays(-7), date.rangeDays(-1)]);
            }
          },
          {
            text: "最近 15 天",
            onClick (picker) {
              picker.$emit("pick", [date.rangeDays(-15), date.rangeDays(-1)]);
            }
          },
          {
            text: "最近 30 天",
            onClick (picker) {
              picker.$emit("pick", [date.rangeDays(-30), date.rangeDays(-1)]);
            }
          }
        ]
      }
    };
  },
  filters: {
    fmtDate (val) {
      return date.format(date.parse(val, "YYYYMMDD"), "YYYY-MM-DD");
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 查询列表
    async queryTable (isRest) {
      const rsp = await queryReport(this._fmtParams(isRest));
      this.tableData = rsp.data.list;
      this.paginationInitial.total = rsp.data.total;
    },
    // 格式化请求数据
    _fmtParams (isRest) {
      const params = {
        page: this.paginationInitial.page,
        size: this.paginationInitial.size,
        name: this.filterData.staffName,
        deptIds: this.filterData.deptId,
      };
      if (this.filterData.dateRange) {
        params.startTime = this.filterData.dateRange[0] + " 00:00:00"
        params.endTime = this.filterData.dateRange[1] + " 23:59:59";
      }
      if (isRest) {
        this.tableData = [];
        this.paginationInitial.total = 0; // 查询前重置数据: 总数为0, page会置为1
        this.paginationInitial.page = 1; // 重置页数
      }
      return params;
    },
    // 分页变动
    paginationChanged ({ page, size }) {
      this.paginationInitial.page = page;
      this.paginationInitial.size = size;
      this.queryTable();
    },
    // 报表导出
    exportTable () {
      const params = this._fmtParams();
      exportReport(params);
    }
  },
  async created () {
    this.filterData.dateRange = [
      date.fmtDate(date.getFirstDateFromYM()),
      date.fmtDate(date.getLastDateFromYM())
      // "2023-06-26", "2023-07-25"
    ];
    // this.queryTable();
  },
  async mounted () { }
};
</script>

<style scoped lang="stylus">
.main
  position: relative
  background-color: #fff
  padding: 15px
  overflow: scroll
  &-top
    margin-bottom: 15px
    display: flex
    align-items: flex-start
    h2
      border-left: 5px solid #0089ff
      padding-left: 10px
      font-size: 18px
    .el-link
      margin-left: 20px
      font-size: 14px
  &-oper
    padding-bottom: 15px
    display: flex
    align-items: center
    flex-wrap: wrap
    > span
      color: $-color-theme-second
      margin: 0 10px
      &:first-child
        margin-left: 0
    &-button
      margin-left: 40px
    .el-input
      width: 200px
</style>
