<template>
  <div>
    <div class="table-title">
      事件综合分析
    </div>
    <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"/>
  </div>
</template>

<script>
import NormalTable from '@/components/NomalTable/index'
import { getCaseStatisticsAll } from '@/api/statistics'
export default {
  name: 'CaseTable',
  components: { NormalTable },
  props: {
    listQuery: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      columns: [
        {
          text: '话务量',
          value: 'callNum'
        },
        {
          text: '受理事件数',
          value: 'caseNum'
        },
        {
          text: '催办数',
          value: 'urgeNum'
        },
        {
          text: '督办数',
          value: 'superviseNum'
        },
        {
          text: '监察数',
          value: 'monitorNum'
        },
        {
          text: '延期数',
          value: 'delayNum'
        },
        {
          text: '已办结数及占比',
          value: 'overCaseNum'
        },
        {
          text: '未办结数及占比',
          value: 'noOverCaseNum'
        }
      ], // 显示列
      data: [], // 列表数据
      total: 0, // 数据总数
      listLoading: true, // 列表加载动画
      tableOption: {
        head: {
          show: false, // 是否需要标题栏，
          text: '数据列表' // 标题名称
        },
        options: {
          needIndex: false // 是否需要序号列
        },
        toolsOption: {
          selectColumns: false, // 是否需要筛选列
          refresh: false // 是否需要刷新按钮
        }
      }, // 表格属性
      size: 'small'
    }
  },
  // watch: {
  //   listQuery(val) {
  //     this.search()
  //   }
  // },
  // created() {
  //   this.fetchData()
  // },
  methods: {
    search() {
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      getCaseStatisticsAll(this.listQuery).then(response => {
        if (response.code === 200) {
          this.listLoading = false
          this.data = [response.data]
          // this.data = [{
          //   'callNum': 1,
          //   'caseNum': 2,
          //   'urgeNum': 3,
          //   'superviseNum': 4,
          //   'monitorNum': 5,
          //   'delayNum': 6,
          //   'overCaseNum': '0/0%',
          //   'noOverCaseNum': '0/0%'
          // }]
        }
      })
    }
  }
}
</script>

<style scoped>
.table-title{
  text-align: center;
  line-height: 2;
  font-size:18px;
  font-weight: 700;
  background-color: #f0f0f0;

}
</style>