<template>
  <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
    <template slot="columns">
      <el-table-column v-if="commonShow.caseType" label="处理类型" align="center" min-width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.eorcName + '/' + scope.row.caseTypeName + '/' + scope.row.caseDetailTypeName }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="commonShow.createUserName" label="受理人" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createUserName }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="commonShow.limitedTime" label="限办日期" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.limitedTime }}</span>
        </template>
      </el-table-column>
      <!-- 自定义操作 -->
      <slot name="operations"/>
    </template>
  </normal-table>
</template>

<script>
import NormalTable from '@/components/NomalTable'

export default {
  name: 'CaseListTable',
  components: { NormalTable },
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }, // 案件列表
    listQuery: {
      type: Object,
      default() {
        return {
          caseId: '', // 事件编号
          title: '', // 事件标题
          description: '', // 事件内容
          reporterPhone: '', // 联系方式
          reporterName: '', // 联系人
          startTime: '', // 来电开始时间
          endTime: '', // 来电结束时间
          caseState: '', // 处理方式
          state: '', // 处理状态
          isDelay: '', // 事件状态
          source: '', // 事件来源
          caseLevel: '', // 紧急程度
          offset: 1,
          limit: 20,
          sort: 'createTime',
          order: 'desc'
        }
      }
    }, // 查询条件
    columns: {
      type: Array,
      default() {
        return [
          {
            text: '事件标题',
            value: 'title',
            align: 'center',
            showOverflow: true
          },
          {
            text: '联系人',
            value: 'reporterName',
            align: 'center'
          },
          {
            text: '来电时间',
            value: 'callTime',
            width: 160,
            align: 'center'
          },
          {
            text: '处理状态',
            value: 'stateName',
            align: 'center'
          },
          {
            text: '事件内容',
            value: 'description',
            align: 'center',
            showOverflow: true
          },
          {
            text: '处理方式',
            value: 'caseStateName',
            align: 'center'
          }
        // 为了手动处理“处理类型”字段，把后面两个字段也放进slot里了
        // {
        //   text: '处理类型',
        //   value: 'eorcName' + 'caseTypeName' + 'caseDetailTypeName',
        //   align: 'center'
        // },
        // {
        //   text: '受理人',
        //   value: 'createUserName',
        //   // width: 120,
        //   align: 'center'
        // },
        // {
        //   text: '限办日期',
        //   value: 'limitedTime',
        //   width: 160,
        //   align: 'center'
        // }
        ] // 显示列
      }
    },
    total: {
      type: Number,
      default: 0
    },
    commonColumns: {
      type: String,
      default: 'caseType,createUserName,limitedTime'
    },
    listLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // total: 0, // 数据总数
      tableOption: {
        head: {
          show: false, // 是否需要标题栏，
          text: '数据列表' // 标题名称
        },
        options: {
          needIndex: false // 是否需要序号列
        },
        toolsOption: {
          selectColumns: false, // 是否需要筛选列
          refresh: false // 是否需要刷新按钮
        }
      } // 表格属性
    }
  },
  computed: {
    commonShow() {
      const commonColumns = this.commonColumns.split(',')
      const commonShow = {
        caseType: false,
        crateUserName: false,
        limitedTime: false
      }
      for (const column of commonColumns) {
        commonShow[column] = true
      }
      return commonShow
    }
  },
  methods: {
    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
    changePage(val) {
      if (val && val.size) {
        this.listQuery.limit = val.size
      }
      if (val && val.page) {
        this.listQuery.offset = val.page
      }
      this.$emit('changePage', this.listQuery)
    }
  }
}
</script>