<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"
      @change="changePage"/>
  </div>
</template>

<script>
import NormalTable from '@/components/NomalTable/index'
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'
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    search() {
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      // getSoundList(this.listQuery).then(response => {
      //   if (response.code === 200) {
      //     this.listLoading = false
      //     this.list = response.data.rows
      //     this.total = response.data.total
      //   }
      // })
      // const that = this
      this.data = [{
        'callNum': 1,
        'caseNum': 2,
        'urgeNum': 3,
        'superviseNum': 4,
        'monitorNum': 5,
        'delayNum': 6,
        'overCaseNum': '0/0%',
        'noOverCaseNum': '0/0%'
      }]
      this.listLoading = false
    },
    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
    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>
.table-title{
  text-align: center;
  line-height: 2;
  font-size:18px;
  font-weight: 700;
  background-color: #f0f0f0;

}
</style>