<template>
  <div class="layout_table">
    <div class="header_wrap">
      <h3>{{title}}</h3>
      <div class="header_right_wrap">
        <slot name="btn" />
      </div>
    </div>
    <el-table :data="dataSource" row-key="id">
      <el-table-column v-for="(col, cI) in cColumns" :key="col.prop" v-bind="col">
        <template slot-scope="scope">
          {{col.customRender ? '' : scope.row[col.prop]}}
          <template v-if="col.customRender">
            <OptComponent v-for="(comp, i) in col.customRender.comps" :key="scope.$index + i.toString()" v-bind="comp" :scope="scope"/>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="pagination"
      :current-page.sync="pagination.current"
      @size-change="(size) => $emit('handleSizeChange', size)"
      @current-change="(current) => $emit('paginationChange', current)"
      background
      :page-sizes="[10, 20, 40, 100, 200]"
      :page-size="20"
      layout="total, prev, pager, next, sizes, jumper"
      :total="pagination.total">
    </el-pagination>
  </div>
</template>
<script>
import OptComponent from './OptComponent'
export default {
  name: 'LayoutTable',
  components: {
    OptComponent
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    columns: {
      type: Array,
      default: () => ([])
    },
    dataSource: {
      type: Array,
      default: () => ([])
    },
    pagination: {
      type: Object,
      default: () => ({
        current: 1,
        total: 0,
        pageSize: 10
      })
    }
  },
  computed: {
    cColumns() {
      return this.columns.reduce((acc, cur) => {
        cur.prop = cur.dataIndex
        cur.label = cur.title
        delete cur.dataIndex
        delete cur.title
        acc.push(cur)
        return acc
      }, [])
    }
  }
}
</script>
<style lang="scss" scoped>
.layout_table {
  .header_wrap {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    h3 {
      flex-grow: 1;
      margin: 0;
      font-size: 20px;
      line-height: 28px;
    }
  }
  .pagination {
    position: relative;
    right: -5px;
    margin-top: 16px;
    padding: 0;
    text-align: right;
  }
}
</style>