<template>
  <app-container>
    <el-tabs v-model="listQuery.type" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="按日统计" name="day">
        <search-area :need-clear="false" :need-search-more="false" type="seperate" search-more-type="default" @search="search">
          <search-item>
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            />
          </search-item>
        </search-area>
      </el-tab-pane>
      <el-tab-pane label="按月统计" name="month">
        <search-area :need-clear="false" :need-search-more="false" type="seperate" search-more-type="default" @search="search">
          <search-item>
            <el-date-picker
              v-model="year"
              type="year"
              value-format="yyyy"
            />
          </search-item>
        </search-area>
      </el-tab-pane>
    </el-tabs>

    <ve-histogram :data="data" :settings="chartSettings" style="background-color: #FFFFFF;"/>

    <normal-table :data="list" :columns="columns" :pagination="false"
      :head="tableOption.head" :query="listQuery" :list-loading="false" :options="tableOption.options" :tools-option="tableOption.toolsOption"
    >

    </normal-table>
  </app-container>
</template>

<script>
import { jobCount } from '@/api/statistics'
import { getToday, getLastMonth } from '@/utils/dateutils'
import BarChart from './barChart'

export default {
  name: 'WorkStatistics',
  components: { BarChart },
  data() {
    return {
      year: '',
      listQuery: {
        type: 'day',
        startTime: '',
        endTime: ''
      },
      data: {
        columns: ['name', 'count'],
        rows: []
      },
      chartSettings: {
        labelMap: {
          'count': '清洁次数',
          'name': '时间'
        },
        metrics: ['count'],
        dimension: ['name']
      },
      columns: [
        { text: '时间', value: 'name', align: 'center' },
        { text: '作业次数', value: 'count', align: 'center' }
      ], // 显示列
      tableOption: {
        head: {
          show: true, // 是否需要标题栏，
          text: '统计结果' // 标题名称
        },
        options: {
          needIndex: false // 是否需要序号列
        },
        toolsOption: {
          selectColumns: false, // 是否需要筛选列
          refresh: false // 是否需要刷新按钮
        }
      }, // 表格属性
      list: [], // 列表数据
      dateRange: []
    }
  },
  watch: {},
  mounted() {
    this.listQuery.endTime = getToday("yyyy-MM-dd")
    this.listQuery.startTime = getLastMonth("yyyy-MM-dd")
    this.listQuery.type = "day"
    this.dateRange = [this.listQuery.startTime, this.listQuery.endTime]
    this.search()
  },
  methods: {
    search: function() {
      if (this.listQuery.type === "day") {
        if (this.dateRange === null || this.dateRange === undefined) {
          this.$message.error("时间范围不能为空，请选择")
          return
        }

        this.listQuery.startTime = this.dateRange[0]
        this.listQuery.endTime = this.dateRange[1]
      } else {
        if (this.year === "" || this.year === null || this.year === undefined) {
          this.$message.error("统计年份不能为空，请选择")
          return
        }
        this.listQuery.startTime = this.year + "-01-01"
        this.listQuery.endTime = this.year + "-12-31"
      }
      jobCount(this.listQuery).then(response => {
        if (response.code === 200) {
          this.list = response.data
          this.data.rows = response.data
        }
      })
    },
    handleClick(tab) {
        this.dateRange = []
        this.listQuery.startTime = ""
        this.listQuery.endTime = ""
        if (tab.name === "day") {
          this.listQuery.endTime = getToday("yyyy-MM-dd")
          this.listQuery.startTime = getLastMonth("yyyy-MM-dd")
          this.dateRange = [this.listQuery.startTime, this.listQuery.endTime]
        } else {
          this.year = getToday("yyyy")
          this.listQuery.startTime = this.year + "-01-01"
          this.listQuery.endTime = this.year + "-12-31"
        }

        this.search()
      }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>