<!--事件月统计-->
<template>
  <app-container>
    <div>
      <search-area :need-clear="false" :need-search-more="false" :size="size" type="default" search-more-type="default" @search="search">
        <!--一般查询条件-->
        <search-item>
          <el-date-picker
            v-model="listQuery.year"
            :size="size"
            type="year"
            value-format="yyyy"
            placeholder="统计年份"/>
        </search-item>
      </search-area>
      <el-row>
        <el-col :span="12">
          <ve-histogram :data="chartData" :grid="grid" :extend="extend" :title="title" :settings="chartSettings"/>
        </el-col>
        <el-col :span="12">
          <normal-table
            :data="data"
            :head="tableOption.head"
            :size="size"
            :query="listQuery"
            :need-page="false"
            :total="total"
            :columns="columns"
            :list-loading="listLoading"
            :options="tableOption.options"
            :tools-option="tableOption.toolsOption"
            @change="changePage">
            <!--<template slot="columns">-->
              <!--<el-table-column label="操作" align="center" width="100">-->
                <!--<template slot-scope="scope">-->
                  <!--<el-button type="text" size="small" @click="showDetail">查看详情</el-button>-->
                <!--</template>-->
              <!--</el-table-column>-->
            <!--</template>-->
          </normal-table>
        </el-col>
      </el-row>
    </div>
  </app-container>
</template>

<script>
import NormalTable from '@/components/NomalTable/index'
import SearchArea from '../../../components/SearchArea/SearchArea'
import SearchItem from '../../../components/SearchArea/SearchItem'
import AppContainer from '../../../components/layout/AppContainer'
import { getCaseStatisticsByMonth } from '@/api/statistics'

export default {
  name: 'CaseStatisticMonth',
  components: { AppContainer, SearchItem, SearchArea, NormalTable },
  data() {
    return {
      listQuery: {
        year: new Date().getFullYear() + ''
      },
      columns: [
        {
          text: '月份',
          value: 'month'
        },
        {
          text: '受理事件总数',
          value: 'caseNum'
        },
        {
          text: '环比',
          value: 'monthErlier'
        },
        {
          text: '同比',
          value: 'yearErlier'
        }
      ], // 显示列
      data: [], // 列表数据
      total: 0, // 数据总数
      listLoading: true, // 列表加载动画
      tableOption: {
        head: {
          show: false, // 是否需要标题栏，
          text: '数据列表' // 标题名称
        },
        options: {
          needIndex: false // 是否需要序号列
        },
        toolsOption: {
          selectColumns: false, // 是否需要筛选列
          refresh: false // 是否需要刷新按钮
        }
      }, // 表格属性
      size: 'small',
      extend: {
        series: {
          label: { show: true, position: 'top' },
          barMaxWidth: 35 // 最大柱宽度
        },
        yAxis: {
          max: 10 // y轴最大值
        }
      },
      grid: { right: 60 },
      title: { text: '事件受理月统计图' },
      chartSettings: {
        itemStyle: {
          'barCategoryGap': 5
        },
        barWidth: 15,
        labelMap: {
          'month': '月份',
          'caseNum': '受理事件数'
        },
        dimension: ['month'],
        metrics: ['caseNum']
      },
      chartData: {
        columns: ['month', 'caseNum'],
        rows: []
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    search() {
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      getCaseStatisticsByMonth(this.listQuery).then(response => {
        if (response.code === 200) {
          this.listLoading = false
          this.data = response.data
          // this.data = [
          //   { 'caseNum': 5, 'month': '2020-01', 'monthErlier': '0%', 'yearErlier': '0%' },
          //   { 'caseNum': 10, 'month': '2020-02', 'monthErlier': '0%', 'yearErlier': '0%' },
          //   { 'caseNum': 15, 'month': '2020-03', 'monthErlier': '0%', 'yearErlier': '0%' },
          //   { 'caseNum': 10, 'month': '2020-04', 'monthErlier': '0%', 'yearErlier': '0%' }
          // ]
          this.chartData.rows = response.data
          const maxValue = Math.max.apply(Math, this.data.map(function(item) { return item.caseNum }))
          if (maxValue < 10) {
            this.extend.yAxis = { max: 10 }
          } else {
            this.extend.yAxis = {}
          }
        }
      })
    },
    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
    changePage(val) {
      if (val && val.size) {
        this.listQuery.limit = val.size
      }
      if (val && val.page) {
        this.listQuery.offset = val.page
      }
      this.fetchData()
    },
    showDetail() {

    }
  }
}
</script>

<style scoped>

</style>