<!--事件年统计-->
<template>
  <app-container>
    <div>
      <!--<search-area :need-clear="false" :need-search-more="false" :size="size" type="default" search-more-type="default" @search="search">-->
        <!--&lt;!&ndash;一般查询条件&ndash;&gt;-->
        <!--<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 { getCaseStatisticsByYear } from '@/api/statistics'
export default {
  name: 'CaseStatisticYear',
  components: { AppContainer, SearchItem, SearchArea, NormalTable },
  data() {
    return {
      listQuery: {
        year: ''
      },
      columns: [
        {
          text: '年份',
          value: 'year'
        },
        {
          text: '受理事件总数',
          value: 'caseNum'
        },
        {
          text: '增长率',
          value: 'rate'
        }
      ], // 显示列
      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: {
          'year': '年份',
          'caseNum': '受理事件数'
        },
        dimension: ['year'],
        metrics: ['caseNum']
      },
      chartData: {
        columns: ['year', 'caseNum'],
        rows: []
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    search() {
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      getCaseStatisticsByYear().then(response => {
        if (response.code === 200) {
          this.listLoading = false
          this.data = response.data
          // this.data = [{
          //   'caseNum': 1,
          //   'year': '2020',
          //   'rate': '100%'
          // }]
          this.chartData.rows = this.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>