<script>
import './index.scss'

export default {
  name: 'TablePaging',
  props: {
    tableList: { // table 数据
      type: Array,
      default: () => ([])
    },
    tableColumn: { // table 的 column
      type: Array,
      default: () => ([])
    },
    tableButtons: { // table 按钮
      type: Array,
      default: () => ([])
    },
    tableBtnWidth: { // 按钮宽度
      type: Number,
      default: 200
    },
    tablePaging: { // table 分页配置
      type: Object || Boolean,
      default: false
    },
    tableTotal: { // table 总页数
      type: Number,
      default: 0
    },
    pagingChange: { // 分页信息改变
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      defaultAttars: { // 按钮默认配置
        type: 'text',
        size: 'small'
      }
    }
  },
  methods: {
    handleClick(e, id, click) { // 表单按钮点击
      e && e.stopPropagation && e.stopPropagation()
      click && click(id)
    },
    handleSizeChange(size) { // 分页一页显示条数改变回调
      this.$emit('pagingChange', {
        ...this.tablePaging,
        pagesize: size
      })
    },
    handleCurrentChange(page) { // 分页当前页数改变回调
      this.$emit('pagingChange', {
        ...this.tablePaging,
        page
      })
    },
    indexMethod(index) { // 序号格式化
      const { page, pagesize } = this.tablePaging
      return (page - 1) * pagesize + index + 1
    },
    createslotScope(list) {
      return {
        scopedSlots: {
          default: scope => {
            return list.map(btn => {
              if (btn.confirm) {
                return (
                  <el-popconfirm class='pop-confirm' title={btn.confirm} { ...{ on: { onConfirm: (e) => this.handleClick(e, scope.row.id, btn.click) }} }>
                    <el-button
                      slot='reference'
                      class={{ 'gray': btn.isGray }}
                      {...{ props: { ...this.defaultAttars, ...btn.attrs }}}
                      {...btn.otherAttrs}
                    >
                      { btn.name }
                    </el-button>
                  </el-popconfirm>
                )
              }
              return (
                <el-button
                  class={{ 'gray': btn.isGray }}
                  {...{ on: { click: (e) => this.handleClick(e, scope.row.id, btn.click) }}}
                  {...{ props: { ...this.defaultAttars, ...btn.attrs }}}
                  {...btn.otherAttrs}
                >
                  {btn.name}
                </el-button>
              )
            })
          }
        }
      }
    }
  },
  render(h) {
    const { tableList, tablePaging, tableTotal, handleSizeChange, handleCurrentChange } = this

    return (
      <div class='tablePaging'>
        <el-table data={this.tableList} { ...{ props: this.$attrs, on: this.$listeners } }>
          <el-table-column
            type='index'
            label='序号'
            min-width={100}
            index={this.indexMethod}
          />
          {
            this.tableColumn.map(item => {
              if (item.type === 'button') {
                return (
                  <el-table-column label={item.label || '操作'} width={this.tableBtnWidth}
                    {...this.createslotScope(item.list)}
                  >
                  </el-table-column>
                )
              }
              return (
                <el-table-column
                  key={item.key}
                  type={item.type}
                  prop={item.key}
                  label={item.label}
                  width={item.width}
                  min-width={item.minWidth}

                  {...{
                    scopedSlots: {
                      default: scope => {
                        return item.render ? item.render(h, scope) : scope.row[item.key]
                      }
                    }
                  }}
                />
              )
            })
          }
          {
            this.tableButtons.length ? (
              <el-table-column label='操作' width={this.tableBtnWidth}
                {...this.createslotScope(this.tableButtons)}
              >
              </el-table-column>
            ) : null
          }
        </el-table>

        {
          (tablePaging && tableList.length) ? (
            <el-pagination
              background
              current-page={tablePaging.page || 1}
              page-sizes={tablePaging.pageSizes || [10, 20, 30, 40]}
              page-size={tablePaging.pagesize || 10}
              layout='prev, pager, next, sizes, jumper, total'
              total={tableTotal}
              onSize-change={handleSizeChange}
              onCurrent-change={handleCurrentChange}
            />
          ) : null
        }
      </div>
    )
  }
}
</script>

// import './index.scss'

.tablePaging {
  margin: 10px 0;

  .pop-confirm {
    margin-left: 10px;
  }

  .gray {
    color: #acacac;
  }
}

tableColumn 配置

const tableColumn = [
  {
    key: 'qualityType',
    label: '质量类型',
    minWidth: 180
  },
  {
    key: 'status',
    label: '当前状态',
    minWidth: 180,
    render: (_, rocord) => eventStatus.find(e => e.key === rocord.row.status).value
  },
  {
    key: 'eventResponsibleAccountName',
    label: '负责人',
    minWidth: 180
  },
  {
    key: 'componentName',
    label: '部件名称',
    minWidth: 180
  },
  {
    key: 'reporterType',
    label: '上报来源',
    minWidth: 180,
    render: (_, rocord) => reporterType.find(e => e.key === rocord.row.reporterType).value
  },
  {
    key: 'reporterName',
    label: '上报人',
    minWidth: 180
  },
  {
    key: 'reportTime',
    label: '上报时间',
    minWidth: 180,
    render: (_, rocord) => parseTime(rocord.row.createTime)
  },
{ // 按钮
      type: 'button',
      label: '操作',
      list: [
      {
          name: '编辑',
          click: this.handleEdit
        },
        {
          name: '删除',
          confirm: '确定删除吗?',
          click: handleDelete
        }
      ]
    }
]

// 另一种写按钮的方式
tableButtons: [
   {
      name: '编辑',
      click: this.handleEdit
    },
    {
       name: '删除',
       click: this.handleDelete
    }
]