<template>
  <div class="ps-table">
    <el-table :data="data"  @row-click="handleRowClick" v-loading="loading" :header-cell-style="headerRowStyle" :cell-style="cellStyle" :border='border'>
      <slot></slot>
    </el-table>
    <el-pagination
      class="ps-pagination"
      v-if="isPagination"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNumber"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageObj.total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "PsTable",
  props: {
    border: {
      type: Boolean,
      default: false,
    },
    cellColor: {
      type: Boolean,
      default: false,
    },
    headerRowColor: {
      type: Boolean,
      default: false,
    },
    loading:{
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      default: () => [],
    },
    height: {
      type: String,
      default: "",
    },
    isPagination: {
      type: Boolean,
      default: true,
    },
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30, 40, 50, 60, 70, 80, 100, 200],
    },
    pageObj: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    "pageObj.pageSize": {
      handler(val) {
        this.pageSize = val;
      },
      immediate: true,
    },
    "pageObj.pageNumber": {
      handler(val) {
        this.pageNumber = val;
      },
      immediate: true,
    },
  },
  data() {
    return {
      pageSize: 10,
      total: 0,
      pageNumber: 1,
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleSizeChange(val) {
     this.pageSize = val;
      this.pageNumber = 1;
      this.pageObj.changeSize(this.pageNumber,this.pageSize);
    },
    handleCurrentChange(val) {
      this.pageNumber = val;
      this.pageObj.changePage(this.pageNumber,this.pageSize);
    },
    handleRowClick(row, column, event){
      console.log(row, column, event)
      this.$emit("rowClick", {row, column, event})
    },
    headerRowStyle () {
      if (this.headerRowColor) {
        return `background-color: #F8FAFC`;
      } else {
        return '';
      }
    },
    cellStyle (row) {
      console.log(row);
      var str = '';
      if (row.columnIndex == 0) {
        if (this.cellColor) {
          str += `background-color: #F8FAFC;`;
        }
      }
      return str;
    }
  },
};
</script>

<style>
</style>
