<template>
  <normal-table :data="list" :head="tableOption.head" :cell-style="cellStyle" :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"> -->
      <el-table-column label="处理状态" align="center">
        <template slot-scope="scope">
          <div
            style="width: 100%;height: 100%;">{{ scope.row.stateName }}</div>
          <!--<span>{{ scope.row.eorcName + '/' + scope.row.caseTypeName }}</span>-->
          <!--<span>{{ scope.row.eorcName + '/' + scope.row.caseTypeName + '/' + scope.row.caseDetailTypeName }}</span>-->
        </template>
      </el-table-column>
      <el-table-column label="处理方式" align="center">
        <template slot-scope="scope">
          <span style="font-weight: 700;">{{ scope.row.caseStateName }}</span>
          <!--<span>{{ scope.row.eorcName + '/' + scope.row.caseTypeName }}</span>-->
          <!--<span>{{ scope.row.eorcName + '/' + scope.row.caseTypeName + '/' + scope.row.caseDetailTypeName }}</span>-->
        </template>
      </el-table-column>
      <el-table-column v-if="commonShow.caseType" label="事件分类" align="center" min-width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.eorcName }}</span>
          <!--<span>{{ scope.row.eorcName + '/' + scope.row.caseTypeName }}</span>-->
          <!--<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: 'caseId',
            align: 'center',
            showOverflow: true
          },
          {
            text: '事件标题',
            value: 'title',
            align: 'center',
            showOverflow: true
          },
          {
            text: '事件内容',
            value: 'description',
            align: 'center',
            showOverflow: true
          },
          {
            text: '联系人',
            value: 'reporterName',
            align: 'center'
          },
          {
            text: '联系电话',
            value: 'reporterPhone',
            align: 'center'
          },
          {
            text: '来电时间',
            value: 'callTime',
            width: 160,
            align: 'center'
          },
          // {
          //   text: '处理状态',
          //   value: 'stateName',
          //   align: 'center'
          // },
          // {
          //   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)
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.label === '处理状态') {
        const bg = row.stateName === '处理中' ? 'background-color: #45B076;' : row.stateName === '待处理' ? 'background-color: rgb(230, 250, 12);' : ''
        return bg
      } else {
        return ''
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.yellow {
  background-color: rgb(230, 250, 12);
}

.green {
  background-color: rgb(3, 105, 13);
}

.status {
  padding: 0;

  .cell {
    padding: 0;
  }
}</style>