<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <el-input v-model="searchParam.staffNameLike" clearable placeholder="姓名（模糊查询）" style="width: 200px;" class="filter-item" />
        <el-select v-model="searchParam.staffDepartmentId" clearable size="small" filterable remote placeholder="所属部门" :remote-method="searchParamDepartmentSearch" style="width: 200px;" class="filter-item">
          <el-option v-for="item in searchParamSelection._departmentSelections" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-date-picker v-model="searchParam._month" value-format="yyyy-MM-dd" type="month" clearable size="small" style="width: 200px;" class="filter-item" placeholder="选择月" />
        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="searchSubmit">搜索</el-button>
        <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="searchParamReset">重置</el-button>
        <el-tooltip class="item" effect="dark" content="按当前查询条件导出" placement="top">
          <el-button :loading="exporting" class="filter-item" size="mini" type="info" plain icon="el-icon-download" @click="exportSubmit">导出</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="打印当前页面内容" placement="top">
          <el-button class="filter-item" size="mini" type="info" plain icon="el-icon-printer" @click="print">打印</el-button>
        </el-tooltip>
      </div>
    </div>
    <!--表格-->
    <el-table ref="table" v-loading="searching" :data="tableData" row-key="id">
      <el-table-column prop="staffName" label="姓名" align="center" />
      <el-table-column prop="staffJobName" label="职务" align="center" />
      <el-table-column prop="count" label="合计" align="center" />
      <el-table-column v-for="day in 31" :key="day" :prop="'D'+day" :label="day" align="center" />
    </el-table>
  </div>
</template>

<script>
import leaderLogApi from '@/api/kd/leaderLog'
import staffDepartmentApi from '@/api/kd/staffDepartment'
import { getMonthFrist, getMonthLast, parseTime } from '@/utils/index'
import { mapGetters } from 'vuex'
import { downloadFile } from '@/utils'

const searchParam = { // 默认搜索条件
  _month: new Date()
}
export default {
  name: 'ELeaderLog', // 本页面名
  components: { },
  data() {
    return {
      selectedMine: {},
      searching: false,
      exporting: false,
      searchParam: {},
      searchParamSelection: {},
      searchResult: {
        results: [] // 搜索结果
      }
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'baseApi'
    ]),
    tableData() {
      // 此处对返回值进行算法重组
      return this.searchResult.results
    }
  },
  mounted() {
    const selectedMineJson = window.localStorage.getItem('kd.selected.mine')
    let noMine = false
    if (!selectedMineJson) {
      noMine = true
    } else {
      const selectedMine = JSON.parse(selectedMineJson)
      if (!selectedMine || selectedMine.enterpriseId !== this.user.enterpriseId) {
        noMine = true
      } else {
        this.selectedMine = selectedMine
      }
    }
    // if (noMine) {
    //   this.$message.error('当前未选择矿山')
    //   this.$router.replace('/dashboard')
    // }
    this.searchParamReset()
    this.searchSubmit()
  },
  methods: {
    searchParamDepartmentSearch(queryString) {
      staffDepartmentApi.getPage({
        nameLike: queryString,
        mineType: this.selectedMine.mineType,
        mineId: this.selectedMine.id
      }).then(response => {
        this.$delete(this.searchParamSelection, '_departmentSelections') // 解决$set不更新DOM
        this.$set(this.searchParamSelection, '_departmentSelections', response.results)
      }).catch(() => {
        this.$message.error('出错啦，请重试')
      })
    },
    searchParamReset() {
      this.searchParam = JSON.parse(JSON.stringify(searchParam))
    },
    searchSubmit() {
      this.searching = true
      this.searchParam.mineType = this.selectedMine.mineType
      this.searchParam.mineId = this.selectedMine.id
      if (!this.searchParam._month) {
        this.$message.error('请选择查询月份')
        return
      }
      let calendarDate = this.searchParam._month // 查询成功后将要赋值给日历，先缓存下来，防止查询过程中this.data发生改变
      if (typeof calendarDate === 'string') {
        calendarDate = new Date(calendarDate)
      }
      this.searching = true
      this.searchParam.beginDatetimeGe = parseTime(getMonthFrist(calendarDate), '{y}-{m}-{d}')
      this.searchParam.beginDatetimeLe = parseTime(getMonthLast(calendarDate), '{y}-{m}-{d}')
      leaderLogApi.getList(this.searchParam).then(response => {
        this.searching = false
        this.searchResult = response
      }).catch(() => {
        this.searching = false
      })
    },
    exportSubmit() {
      this.exporting = true
      this.searchParam.mineType = this.selectedMine.mineType
      this.searchParam.mineId = this.selectedMine.id
      if (!this.searchParam._month) {
        this.$message.error('请选择查询月份')
        return
      }
      let calendarDate = this.searchParam._month // 查询成功后将要赋值给日历，先缓存下来，防止查询过程中this.data发生改变
      if (typeof calendarDate === 'string') {
        calendarDate = new Date(calendarDate)
      }
      this.searchParam.beginDatetimeGe = parseTime(getMonthFrist(calendarDate), '{y}-{m}-{d}')
      this.searchParam.beginDatetimeLe = parseTime(getMonthLast(calendarDate), '{y}-{m}-{d}')
      leaderLogApi.export(this.searchParam).then(response => {
        downloadFile(response, '带班台账', 'xlsx')
        this.exporting = false
      }).catch(() => {
        this.exporting = false
      })
    },
    print() {
      // TODO！
      window.localStorage.setItem('kd.print.model', 'c/leader/log')
      window.localStorage.setItem('kd.print.data', JSON.stringify(this.tableData))
      window.open(location.protocol + '//' + window.location.host + '/#/print')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  ::v-deep .el-input-number .el-input__inner {
    text-align: left;
  }
  ::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
    height: 30px;
    line-height: 30px;
  }
</style>
