<template>
  <div id="customTable">
    <Table
      :columns="tableHeader"
      :height="600"
      :data="tableData"
      :loading="loading"
    ></Table>
    <div style="margin: 10px">
      <Page
        :total="page.total"
        :current="page.current"
        show-elevator
        :page-size="page.size"
        show-sizer
        show-total
        class="fr"
        @on-change="changePage"
        @on-page-size-change="changePageSize"
      ></Page>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex"
export default {
  props: {
    tableHeader: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    page: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      loading: false,
      fontSize: ["12px", "14px", "16px"],
    }
  },
  computed: {
    ...mapGetters({
      fontIndex: "table/fontIndex",
    }),
  },
  watch: {
    fontIndex: {
      handler(v) {
        this.$nextTick(() => {
          document.querySelector(".ivu-table").style.fontSize = this.fontSize[
            this.fontIndex
          ]
        })
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {},
  methods: {
    changePage(v) {
      this.loading = true
      // this.current = v
      let obj = {
        type: "current",
        value: v,
      }
      this.$emit("changePage", obj)
    },
    changePageSize(v) {
      let obj = {
        type: "size",
        value: v,
      }
      this.$emit("changePage", obj)
    },
  },
}
</script>
<style lang="scss" scoped>
#customTable {
  margin-top: 20px;
  width: 100%;
  // background: pink;
  flex: 1;
}
::v-deep {
  th .ivu-table-cell {
    white-space: nowrap;
  }
  .ivu-table-wrapper {
    border-color: #eff0f3;
    .ivu-table-header,
    .ivu-table-fixed-header {
      thead {
        height: 60px;
        background: #f6f6f6;
      }
    }
  }
  .ivu-page-item-active {
    background: #1890ff;
    a {
      color: #fff;
    }
  }
  .ivu-page-options {
    // display: flex;
    .ivu-select-selection {
      border-radius: 6px;
      border: 1px solid #d9d9d9;
    }
  }
  .ivu-page-options-elevator {
    // display: flex;
    input {
      width: 50px;
    }
  }
}
</style>
