<!--事件类型统计-->
<template>
  <app-container>
    <case-type-search :size="size" @search="search"/>
    <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"/>
  </app-container>

</template>

<script>
import AppContainer from '../../../components/layout/AppContainer'
import CaseTypeSearch from './components/caseTypeSearch'
import NormalTable from '../../../components/NomalTable/index'
import { getCaseStatisticsByType } from '@/api/statistics'
export default {
  name: 'CaseStatistic',
  components: { NormalTable, CaseTypeSearch, AppContainer },
  data() {
    return {
      listQuery: {},
      columns: [], // 显示列
      timeRange: [], // 时间范围
      data: [], // 列表数据
      total: 0, // 数据总数
      listLoading: true, // 列表加载动画
      tableOption: {
        head: {
          show: false, // 是否需要标题栏，
          text: '数据列表' // 标题名称
        },
        options: {
          needIndex: false // 是否需要序号列
        },
        toolsOption: {
          selectColumns: false, // 是否需要筛选列
          refresh: false // 是否需要刷新按钮
        }
      }, // 表格属性
      showAddCase: false,
      size: 'small'
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    search(listQuery) {
      this.listQuery = listQuery
      this.fetchData(false)
    },
    fetchData(isNowPage = true) {
      this.listLoading = true
      getCaseStatisticsByType(this.listQuery).then(response => {
        if (response.code === 200) {
          this.listLoading = false
          this.list = response.data.rows
          this.total = response.data.total
          const data = [
            { area: '潭口镇', data: [{ caseNum: 12, eorc: '咨询' }, { caseNum: 12, eorc: '建议' }, { caseNum: 12, eorc: '求助' }, { caseNum: 12, eorc: '投诉' }, { caseNum: 12, eorc: '感谢' }, { caseNum: 12, eorc: '其他' }] },
            { area: '谭东镇', data: [{ caseNum: 12, eorc: '咨询' }, { caseNum: 12, eorc: '建议' }, { caseNum: 12, eorc: '求助' }, { caseNum: 12, eorc: '投诉' }, { caseNum: 12, eorc: '感谢' }, { caseNum: 12, eorc: '其他' }] },
            { area: '高校园区管理处', data: [{ caseNum: 12, eorc: '咨询' }, { caseNum: 12, eorc: '建议' }, { caseNum: 12, eorc: '求助' }, { caseNum: 12, eorc: '投诉' }, { caseNum: 12, eorc: '感谢' }, { caseNum: 12, eorc: '其他' }] },
            { area: '新区管理处', data: [{ caseNum: 12, eorc: '咨询' }, { caseNum: 12, eorc: '建议' }, { caseNum: 12, eorc: '求助' }, { caseNum: 12, eorc: '投诉' }, { caseNum: 12, eorc: '感谢' }, { caseNum: 12, eorc: '其他' }] }
          ]
          const columns = [
            {
              text: '区域',
              value: 'area'
            }
          ]
          // 先动态构建出列
          if (data.length > 0) {
            const line = data[0]
            if (line.data.length > 0) {
              for (const item of line.data) {
                const column = { text: item.eorc, value: item.eorc }
                columns.push(column)
              }
            }
          }
          this.columns = columns
          // 处理数据格式
          this.data = []
          for (const line of data) {
            const linedata = line.data
            const newline = { area: line.area }
            for (const item of linedata) {
              newline[item.eorc] = item.caseNum
            }
            this.data.push(newline)
          }
        }
      })
    },
    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
    changePage(val) {
      if (val && val.size) {
        this.listQuery.limit = val.size
      }
      if (val && val.page) {
        this.listQuery.offset = val.page
      }
      this.fetchData()
    }
  }
}
</script>

<style scoped>

</style>
