<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <el-select v-model="searchParam._mineIndex" placeholder="所属矿山" clearable size="small" class="filter-item" style="width: 200px;">
          <el-option v-for="mine in mineList" :key="mine.index" :label="mine.name" :value="mine.index" />
        </el-select>
        <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="mineName" label="所属矿山" align="center" />
      <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 mineApi from '@/api/kd/mine'
import { downloadFile } from '@/utils'

const searchParam = { // 默认搜索条件
  _month: new Date()
}
export default {
  name: 'CLeaderLog', // 本页面名
  components: { },
  data() {
    return {
      mineList: [],
      searching: false,
      exporting: false,
      searchParam: {},
      searchParamSelection: {},
      searchResult: {
        results: [] // 搜索结果
      }
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'baseApi'
    ]),
    tableData() {
      // 此处对返回值进行算法重组
      return this.searchResult.results
    }
  },
  mounted() {
    // 矿山选项卡
    mineApi.getEnableMine().then(response => {
      let i = 1
      response.results.forEach(x => { x.index = i++ })
      this.mineList = response.results
    })
    this.searchParamReset()
    this.searchSubmit()
  },
  methods: {
    searchParamDepartmentSearch(queryString) {
      if (this.searchParam._mineIndex) {
        const mine = this.mineList[this.searchParam._mineIndex - 1]
        staffDepartmentApi.getPage({
          nameLike: queryString,
          mineType: mine.mineType,
          mineId: mine.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
      if (this.searchParam._mineIndex) {
        const mine = this.mineList[this.searchParam._mineIndex - 1]
        this.searchParam.mineType = mine.mineType
        this.searchParam.mineId = mine.id
      } else {
        this.searchParam.mineType = null
        this.searchParam.mineId = null
      }
      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
      if (this.searchParam._mineIndex) {
        const mine = this.mineList[this.searchParam._mineIndex - 1]
        this.searchParam.mineType = mine.mineType
        this.searchParam.mineId = mine.id
      } else {
        this.searchParam.mineType = null
        this.searchParam.mineId = null
      }
      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.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>
