<template>
  <app-container>
    <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
      <el-tab-pane label="按日统计" name="byDay">
        <search-area @search="searchByDay">
          <search-item>
            <el-input v-model.trim="listQuery.toiletCode" size="small" placeholder="公厕编号" clearable/>
          </search-item>
          <search-item>
            <el-date-picker
              v-model="timeRange"
              :clearable="false"
              :picker-options="pickerOptions"
              size="small"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"/>
          </search-item>
        </search-area>
      </el-tab-pane>
      <el-tab-pane label="按月统计" name="byMonth">
        <search-area @search="searchByMonth">
          <search-item>
            <el-input v-model.trim="listQuery.toiletCode" size="small" placeholder="公厕编号" clearable/>
          </search-item>
          <search-item>
            <el-date-picker
              v-model="year"
              :clearable="false"
              size="small"
              type="year"
              value-format="yyyy"
              placeholder="请选择年份"
            />
          </search-item>
        </search-area>
      </el-tab-pane>
    </el-tabs>
    <work-chart :rawdata="list"/>
    <normal-table
      id="dataTable"
      :data="list"
      :head="tableOption.head"
      :pagination="false"
      :query="listQuery"
      :total="total"
      :columns="columns"
      :list-loading="listLoading"
      :options="tableOption.options"
      :tools-option="tableOption.toolsOption"
      @change="changePage">
      <template slot="btns">
        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
      </template>
    </normal-table>
  </app-container>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import { getToiletJobCount } from '@/api/sanitation/statistics'
import { getToday, getLastWeek } from '@/utils/dateutils'
import WorkChart from './components/workChart'
export default {
  name: 'ToiletAssessment',
  components: { WorkChart },
  data() {
    return {
      activeName: 'byDay', // 当前激活tab:byDay按日统计或byMonth按月统计
      year: '2021', // 按月统计面板中的查询年份
      timeRange: [getLastWeek('yyyy-MM-dd'), getToday('yyyy-MM-dd')], // 按日统计面板中的日期范围
      listQuery: {
        type: '', // 统计方式，day按天，month按月
        toiletCode: '', // 公厕编号
        startTime: '', // 开始时间
        endTime: '' // 结束时间
      }, // 筛选条件
      columns: [
        { text: '时间', value: 'name', align: 'center' },
        { text: '作业次数', value: 'count', align: 'center' }
      ], // 显示列
      list: [], // 列表数据
      total: 0, // 数据总数
      listLoading: true, // 列表加载动画
      typeList: [], // 人员类别
      tableOption: {
        head: {
          show: true, // 是否需要标题栏，
          text: '统计结果' // 标题名称
        },
        options: {
          needIndex: false // 是否需要序号列
        },
        toolsOption: {
          selectColumns: false, // 是否需要筛选列
          refresh: false // 是否需要刷新按钮
        }
      }, // 表格属性
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }// 日期快捷选项
    }
  },
  created() {
    this.searchByDay()
  },
  methods: {
    // 切换面板
    tabClick(tab, event) {
      if (tab.name === 'byDay') {
        this.searchByDay()
      } else {
        this.searchByMonth()
      }
    },
    // 按月统计
    searchByMonth() {
      const startTime = this.year + '-01-01'
      const endTime = this.year + '-12-31'
      this.listQuery.type = 'month'
      this.listQuery.startTime = startTime
      this.listQuery.endTime = endTime
      this.fetchData()
      // this.listLoading = true
      // this.list = [
      //   { name: '1月', count: 15, real: 5, percent: '32.23%' },
      //   { name: '2月', count: 15, real: 5, percent: '32.23%' },
      //   { name: '3月', count: 15, real: 5, percent: '32.23%' },
      //   { name: '4月', count: 15, real: 5, percent: '32.23%' },
      //   { name: '5月', count: 15, real: 5, percent: '32.23%' },
      //   { name: '6月', count: 15, real: 5, percent: '32.23%' },
      //   { name: '7月', count: 15, real: 5, percent: '32.23%' },
      //   { name: '8月', count: 15, real: 5, percent: '32.23%' },
      //   { name: '9月', count: 15, real: 5, percent: '32.23%' },
      //   { name: '10月', count: 15, real: 5, percent: '32.23%' },
      //   { name: '11月', count: 15, real: 5, percent: '32.23%' },
      //   { name: '12月', count: 15, real: 5, percent: '32.23%' }
      // ]
      // this.listLoading = false
    },
    // 按日统计
    searchByDay() {
      this.listQuery.type = 'day'
      if (this.timeRange && this.timeRange.length > 0) {
        this.listQuery.startTime = this.timeRange[0]
        this.listQuery.endTime = this.timeRange[1]
      } else {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      }
      this.fetchData()
      // this.listLoading = true
      // this.list = [
      //   { name: '1.1', count: 15, real: 5, percent: '32.23%' },
      //   { name: '1.2', count: 15, real: 5, percent: '32.23%' },
      //   { name: '1.3', count: 15, real: 5, percent: '32.23%' },
      //   { name: '1.4', count: 15, real: 5, percent: '32.23%' },
      //   { name: '1.5', count: 15, real: 5, percent: '32.23%' },
      //   { name: '1.6', count: 15, real: 5, percent: '32.23%' },
      //   { name: '1.7', count: 15, real: 5, percent: '32.23%' },
      //   { name: '1.8', count: 15, real: 5, percent: '32.23%' },
      //   { name: '1.9', count: 15, real: 5, percent: '32.23%' },
      //   { name: '1.10', count: 15, real: 5, percent: '32.23%' },
      //   { name: '1.11', count: 15, real: 5, percent: '32.23%' },
      //   { name: '1.12', count: 15, real: 5, percent: '32.23%' }
      // ]
      // this.listLoading = false
    },
    fetchData() {
      this.listLoading = true
      getToiletJobCount(this.listQuery).then(response => {
        this.list = response.data
        this.total = response.data.length
        this.listLoading = false
      })
    },
    // 批量导出
    batchExport() {
      let tableName = '公厕保洁作业统计.xlsx'
      if (this.listQuery.type === 'day') {
        tableName = this.timeRange[0] + '至' + this.timeRange[1] + '按日公厕保洁作业统计.xlsx'
      } else if (this.listQuery.type === 'month') {
        tableName = this.year + '年按月公厕保洁作业统计.xlsx'
      }
      /* generate workbook object from table */
      var wb = XLSX.utils.table_to_book(document.querySelector('#dataTable'))
      /* get binary string as output */
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), tableName)
      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
      return wbout
    },
    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
    changePage(val) {
      if (val && val.size) {
        this.listQuery.limit = val.size
      }
      if (val && val.page) {
        this.listQuery.offset = val.page
      }
      this.fetchData()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .edit_btns{
    .edit_btn{
      float:right;
      margin-left:5px;
    }
  }
</style>