<template>
  <div class="body">
    <el-table v-loading="loading" tooltip-effect="dark" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column v-show="!hide" type="selection" width="55" />
      <el-table-column v-for="item in tableList" :key="item.id" :prop="item.prop" :label="item.label" :width="item.prop === 'uid' ? '60' : ''">
        <template v-if="item.flag" #default="scope">
          <slot name="type" :item="item.prop" :scope="scope.row" />
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination :page-sizes="[10, 20, 50, 100]" :page-size="4" :layout="layout" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Table',
  // eslint-disable-next-line
  props: ['data', 'list', 'total', 'judgment', 'display', 'loading'],

  data() {
    return {
      tableData: [],
      tableList: [],
      layout: 'total, sizes, prev, pager, next, jumper',
      hide: false
    }
  },

  watch: {
    data(newValue, oldValue) {
      this.tableData = newValue
    }
  },

  created() {
    this.tableData = this.data
    this.tableList = this.list
    if (this.judgment) {
      this.layout = 'total, sizes'
    }
    if (this.display) {
      this.hide = true
    }
  },

  methods: {
    handleCurrentChange(value) {
      this.$emit('currentChange', value)
    },
    handleSizeChange(value) {
      this.$emit('sizeChange', value)
    },
    handleSelectionChange(value) {
      this.$emit('selectionChange', value)
    }
  }
}

</script>

<style lang="scss" scoped>
.body {
  margin-top: 20px;

  .page {
    display: flex;
    align-items: center;
    height: 50px;
    background-color: #f0f0f0;
  }
}
::v-deep .cell {
  text-align: center
}
</style>
