<template>
  <div class="page-contain">
    <div class="total-text">
      共{{ totalCount }}条
    </div>
    <el-select
      v-model="seletSize"
      size="mini"
      @change="seletSizeChange"
    >
      <el-option
        v-for="item in pageSizeList"
        :key="item.value" 
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>

    <div class="page-per-num">
      {{ currentPageText }}
    </div>
    <el-button-group>
      <el-button
        size="mini"
        :disabled="prevDisabled"
        @click="prevClick"
      >
        <i
          class="el-icon-arrow-left button-icon"
          :style="prevDisabled ?'color:#C3CDDA;':''"
        ></i>
      </el-button>
      <el-button
        size="mini"
        :disabled="nextDisabled"
        @click="nextClick"
      >
        <i
          class="el-icon-arrow-right button-icon"
          :style="nextDisabled ?'color:#C3CDDA;':''"
        ></i>
      </el-button>
    </el-button-group>
  </div>
</template>

<script>
export default {
  name: "TablePage",
  props: {
    totalCount: {
      type: Number,
      default: 500
    },
    seletSize: {
      type: Number,
      default: 0
    },
    pageSizes: {
      type: Array,
      default: function() {
        return [
          10,
          50,
          100
        ];
      }
    }
  },
  data() {
    return {
      pageSizeList: [],
      currentPage: 1,
      currentPageText: "1/1",
      totalPage: 1,
      prevDisabled: false,
      nextDisabled: false
    };
  },
  watch: {
    currentPage() {
      this.reloadCurrentPageText();
    },
    totalPage() {
      this.reloadCurrentPageText();
    }
  },
  mounted() {
    if (this.seletSize <= 0) {
      this.seletSize = this.pageSizes[0];
    }

    const pageSizeList = [];
    this.pageSizes.forEach(item => {
      pageSizeList.push({
        value: item,
        label: "每页" + item + "条"
      });
    });
    this.pageSizeList = [...pageSizeList];

    this.totalPage = Math.ceil(this.totalCount / this.seletSize);
  },
  methods: {
    reloadCurrentPageText() {
      this.currentPageText = this.currentPage + "/" + this.totalPage;
      this.prevDisabled = this.currentPage <= 1;
      this.nextDisabled = this.currentPage >= this.totalPage;
    },
    seletSizeChange() {
      this.totalPage = Math.ceil(this.totalCount / this.seletSize);
      if (this.currentPage > this.totalPage) {
        this.currentPage = this.totalPage;
      }
      this.tablePageValueChange();
    },
    prevClick() {
      if (this.currentPage > 1) {
        this.currentPage -= 1;
      }
      this.tablePageValueChange();
    },
    nextClick() {
      if (this.currentPage < this.totalPage) {
        this.currentPage += 1;
      }
      this.tablePageValueChange();
    },
    tablePageValueChange() {
      this.$emit("getTablePageValueChange", this.currentPage, this.seletSize, this.totalCount, this.totalPage);
    }
  }
};
</script>

<style lang="scss" scoped>
.page-contain {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .total-text {
    display: inline-block;
    margin-right: 12px;
    height: 32px;
    font-size: 12px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(99, 108, 120, 1);
    line-height: 32px;
  }
  .page-per-num {
    display: inline-block;
    margin: 0px 6px;
    height: 32px;
    font-size: 12px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(99, 108, 120, 1);
    line-height: 32px;
  }
  .button-icon {
    color: #a9b5c6;
  }
}

.page-contain /deep/ .el-button {
  border-color: #e8ecf2 !important;
  background-color: #fff !important;
  width: 51px;
  height: 32px;
}

.page-contain /deep/ .el-select .el-input__inner {
  width: 100px;
  padding: 0px 12px;
  border-color: #e8ecf2;
}
</style>

<style lang="css" scoped>
.el-select-dropdown__item {
  line-height: 30px;
  font-size: 12px;
  height: 30px;
  font-weight: normal;
  color: #333;
}
.el-select-dropdown__item.selected {
  font-weight: normal;
}
</style>
