<!-- 考勤月度统计 -->
<template>
  <div>
    <Row justify="space-between" type="flex">
      <Col>
        <DatePicker
          :clearable="false"
          :disabled="loading || exportLoading"
          :editable="false"
          :options="startControl"
          placeholder="起始日期"
          placement="bottom-start"
          type="month"
          v-model="loginstartdate"
        ></DatePicker>
        <span style="padding: 0 6px;">-</span>
        <DatePicker
          :clearable="false"
          :disabled="loading || exportLoading"
          :editable="false"
          :options="endControl"
          placeholder="截止日期"
          placement="bottom-start"
          type="month"
          v-model="loginenddate"
        ></DatePicker>
        <Button
          :disabled="exportLoading"
          :loading="loading"
          @click="doInitSearch"
          style="margin-left: 6px;"
          type="primary"
        >查询</Button>
        <advancedSearch
          :autoLoad="isAdvanLoad"
          :clearable="isNoAgent"
          :disabled="loading || exportLoading"
          :orgType="otype"
          @invokeDoSearch="exeDosearch"
          @on-confirm="handleAdvanSearch"
          @on-select-admin-group="AdvanSearchGroup"
          @on-select-special-line="AdvanSearchCenter"
          @on-select-sub-center="AdvanSearchCenter"
        ></advancedSearch>
      </Col>
      <Col>
        <Poptip @on-ok="handleExport" confirm title="确定导出表格信息？">
          <Button :disabled="loading" :loading="exportLoading" v-permission:export>导出</Button>
        </Poptip>
      </Col>
    </Row>
    <br />
    <Table :columns="columnsDaily" :data="dataMonth" :loading="loading" border></Table>
    <Page
      :current.sync="searchForm.pageNum"
      :page-size="searchForm.pageSize"
      :total="total"
      @on-change="pageChange"
      class="mt-set16"
      show-total
    />
  </div>
</template>

<script>
import advancedSearch from '@/views/components/advanced-search'
import TimeSheetMonthAPI from '@api/common/timeSheetMonth'
import { format, differenceInMonths, subMonths } from 'date-fns'
import commonadvSearch from '@/mixin/commonadvSearch'
import advanceSearchClear from '@/mixin/advanceSearchClear'
import { downloadExcel } from '@lib/download'
import cloneDeep from 'lodash/cloneDeep'
import store from '@/store'
export default {
  name: 'monthly-statistics',
  mixins: [commonadvSearch, advanceSearchClear],
  components: {
    advancedSearch
  },
  data () {
    return {
      loading: false,
      exportLoading: false,
      loginstartdate: '',
      loginenddate: '',
      total: 0,
      searchForm: {
        pageNum: 1,
        pageSize: 10
      },
      exportInfo: {},
      startControl: {
        disabledDate: date => {
          if (typeof this.loginenddate.valueOf() === 'number') {
            return date && date.valueOf() > this.loginenddate.valueOf()
          }
        }
      },
      endControl: {
        disabledDate: date => {
          return date && date.valueOf() <= this.loginstartdate - 2592000000
        }
      },
      columnsDaily: [
        {
          title: '月份',
          key: 'loginmonth',
          width: 100,
          fixed: 'left'
        },
        {
          title: '中心',
          key: 'usercenter',
          width: 100,
          fixed: 'left'
        },
        {
          title: '专线',
          key: 'userline',
          width: 100,
          tooltip: true,
          fixed: 'left'
        },
        {
          title: '业务小组',
          key: 'usergroupname',
          minWidth: 120,
          tooltip: true,
          fixed: 'left'
        },
        {
          title: '员工姓名',
          key: 'userName',
          width: 100,
          fixed: 'left'
        },
        {
          title: '员工编号',
          key: 'userref',
          tooltip: true,
          width: 100
        },
        {
          title: '平台工号',
          key: 'agentId',
          tooltip: true,
          width: 100
        },
        {
          title: '身份证号码',
          key: 'docnumber',
          width: 155
        },
        {
          title: '员工层级',
          key: 'userLevel',
          width: 100
        },
        {
          title: '全勤情况',
          key: 'fullAttendance',
          width: 100,
          render: (h, params) => {
            return h(
              'span',
              params.row.fullAttendance ? params.row.fullAttendance : '-'
            )
          }
        },
        {
          title: '病假时数(累计全年30天以内)',
          key: 'sicklevelTimein30',
          width: 90,
          render: (h, params) => {
            return h(
              'span',
              params.row.sicklevelTimein30 ? params.row.sicklevelTimein30 : '-'
            )
          }
        },
        {
          title: '病假时数(累计全年30天以外)',
          key: 'sicklevelTimeOut30',
          width: 90,
          render: (h, params) => {
            return h(
              'span',
              params.row.sicklevelTimeOut30
                ? params.row.sicklevelTimeOut30
                : '-'
            )
          }
        },
        {
          title: '病假天数(累计全年30天以内)',
          key: 'sicklevelDayin30',
          width: 90,
          render: (h, params) => {
            return h(
              'span',
              params.row.sicklevelDayin30 ? params.row.sicklevelDayin30 : '-'
            )
          }
        },
        {
          title: '病假天数(累计全年30天以外)',
          key: 'sicklevelDayout30',
          width: 90,
          render: (h, params) => {
            return h(
              'span',
              params.row.sicklevelDayout30 ? params.row.sicklevelDayout30 : '-'
            )
          }
        },
        {
          title: '事假时数',
          key: 'thingelevelTime',
          width: 100,
          render: (h, params) => {
            return h(
              'span',
              params.row.thingelevelTime ? params.row.thingelevelTime : '-'
            )
          }
        },
        {
          title: '事假天数',
          key: 'thinglevelDay',
          width: 100,
          render: (h, params) => {
            return h(
              'span',
              params.row.thinglevelDay ? params.row.thinglevelDay : '-'
            )
          }
        },
        {
          title: '年假时数',
          key: 'Day',
          width: 100,
          render: (h, params) => {
            return h(
              'span',
              params.row.yearlevelTime ? params.row.yearlevelTime : '-'
            )
          }
        },
        {
          title: '年假天数',
          key: 'yearlevelDay',
          width: 100,
          render: (h, params) => {
            return h(
              'span',
              params.row.yearlevelDay ? params.row.yearlevelDay : '-'
            )
          }
        },
        {
          title: '旷工时数',
          key: 'neglectlevelTime',
          width: 100,
          render: (h, params) => {
            return h(
              'span',
              params.row.neglectlevelTime ? params.row.neglectlevelTime : '-'
            )
          }
        },
        {
          title: '旷工天数',
          key: 'neglectlevelDay',
          width: 100,
          render: (h, params) => {
            return h(
              'span',
              params.row.neglectlevelDay ? params.row.neglectlevelDay : '-'
            )
          }
        },
        {
          title: '公益假时数',
          key: 'welfarelevelTime',
          width: 100,
          render: (h, params) => {
            return h(
              'span',
              params.row.welfarelevelTime ? params.row.welfarelevelTime : '-'
            )
          }
        },
        {
          title: '公益假天数',
          key: 'welfarelevelDay',
          width: 100,
          render: (h, params) => {
            return h(
              'span',
              params.row.welfarelevelDay ? params.row.welfarelevelDay : '-'
            )
          }
        },
        {
          title: '迟到次数(15分钟以内3次含以下)',
          key: 'lateIn15In3',
          width: 95,
          render: (h, params) => {
            return h(
              'span',
              params.row.lateIn15In3 ? params.row.lateIn15In3 : '-'
            )
          }
        },
        {
          title: '迟到次数(15分钟以内3次以上)',
          key: 'lateIn15Out3',
          width: 95,
          render: (h, params) => {
            return h(
              'span',
              params.row.lateIn15Out3 ? params.row.lateIn15Out3 : '-'
            )
          }
        },
        {
          title: '迟到次数(超15分钟)',
          key: 'lateOut15',
          width: 95,
          render: (h, params) => {
            return h('span', params.row.lateOut15 ? params.row.lateOut15 : '-')
          }
        },
        {
          title: '早退次数',
          key: 'earlylevelNum',
          width: 85,
          render: (h, params) => {
            return h(
              'span',
              params.row.earlylevelNum ? params.row.earlylevelNum : '-'
            )
          }
        },
        {
          title: '婚假天数',
          key: 'marriagelevelDay',
          width: 85,
          render: (h, params) => {
            return h(
              'span',
              params.row.marriagelevelDay
                ? params.row.marriagelevelDay.toFixed(1)
                : '-'
            )
          }
        },
        {
          title: '产假天数',
          key: 'maternitylevelDay',
          width: 85,
          render: (h, params) => {
            return h(
              'span',
              params.row.maternitylevelDay
                ? params.row.maternitylevelDay.toFixed(1)
                : '-'
            )
          }
        },
        {
          title: '产假明细',
          key: 'maternitylevelDays',
          width: 85,
          render: (h, params) => {
            return h(
              'span',
              params.row.maternitylevelDays
                ? params.row.maternitylevelDays
                : '-'
            )
          }
        },
        {
          title: '计划生育假(天)',
          key: 'planbirthlevelDay',
          width: 100,
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              params.row.planbirthlevelDay
                ? params.row.planbirthlevelDay.toFixed(1)
                : '-'
            )
          }
        },
        {
          title: '陪产假(天)',
          key: 'paternitylevelDay',
          width: 95,
          render: (h, params) => {
            return h(
              'span',
              params.row.paternitylevelDay
                ? params.row.paternitylevelDay.toFixed(1)
                : '-'
            )
          }
        }
      ],
      dataMonth: []
    }
  },
  watch: {
    loginstartdate () {
      if (this.loginstartdate) {
        this.searchForm.loginstartdate = format(
          new Date(this.loginstartdate),
          this.$config.MONTH_FORMAT
        )
      } else {
        this.searchForm.loginstartdate = ''
      }
    },
    loginenddate () {
      if (this.loginenddate) {
        this.searchForm.loginenddate = format(
          new Date(this.loginenddate),
          this.$config.MONTH_FORMAT
        )
      } else {
        this.searchForm.loginenddate = ''
      }
    }
  },
  mounted () {
    this.loginstartdate = subMonths(new Date(store.state.app.systemTime), 1)
    this.loginenddate = subMonths(new Date(store.state.app.systemTime), 1)
  },
  methods: {
    // 分页
    pageChange (pageNum) {
      this.searchForm.pageNum = pageNum
      this.doSearch()
    },
    // 导出
    handleExport () {
      if (this.dataMonth.length === 0) {
        this.exportLoading = false
        this.$Message.destroy()
        this.$Message.warning('请先查询数据')
      } else {
        this.exportLoading = true
        TimeSheetMonthAPI.exportexcel({ ...this.exportInfo })
          .then(({ data, headers }) => {
            this.exportLoading = false
            let fileName = decodeURIComponent(
              headers['content-disposition'].split(';')[1].split('filename=')[1]
            )
            downloadExcel(data, fileName)
          })
          .catch(err => {
            console.error('err: ', err)
            this.exportLoading = false
          })
      }
    },
    doInitSearch () {
      this.searchForm.pageNum = 1
      this.doSearch()
    },
    // 查询
    doSearch () {
      if (this.stopSearch()) {
        this.dataMonth = []
        return
      }
      this.loading = true
      this.$nextTick(() => {
        const dateRange = differenceInMonths(
          new Date(this.searchForm.loginenddate),
          new Date(this.searchForm.loginstartdate)
        )
        if (dateRange > this.$config.DATE_RANGE_SIX_MONTH) {
          this.loading = false
          this.$Message.destroy()
          this.$Message.warning(
            `日期范围不能超过${this.$config.DATE_RANGE_SIX_MONTH}个月`
          )
          this.dataMonth = []
        } else {
          TimeSheetMonthAPI.viewList({ ...this.searchForm })
            .then(({ data }) => {
              this.loading = false
              if (data.status === 'success') {
                this.exportInfo.loginstartdate = format(
                  new Date(this.loginstartdate),
                  this.$config.MONTH_FORMAT
                )
                this.exportInfo.loginenddate = format(
                  new Date(this.loginenddate),
                  this.$config.MONTH_FORMAT
                )
                if (this.paramsAdvance) {
                  this.exportInfo.usercenter = this.removeAnnotation(
                    this.paramsAdvance.sc.id
                  )
                  if (this.paramsAdvance.sl) {
                    this.exportInfo.userline = this.removeAnnotation(
                      this.paramsAdvance.sl.id
                    )
                  }
                  if (this.paramsAdvance.ag) {
                    this.exportInfo.usergroupname = this.removeAnnotation(
                      this.paramsAdvance.ag.id
                    )
                  }
                }
                const formData = cloneDeep(data.data.list)
                for (let i = 0, len = formData.length; i < len; i++) {
                  formData[i].usercenter = formData[i].map.usercenter
                  formData[i].userline = formData[i].map.userline
                  formData[i].usergroupname = formData[i].map.userteam
                }
                this.total = data.data.total
                this.dataMonth = formData
              }
            })
            .catch(err => {
              console.error('err:', err)
              this.loading = false
            })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.align-left {
  text-align: left;
}
</style>
