<template>
  <div :class="{'hidden': config.hidden}" class="pagination-container">

    <div class="mu-pagi-container" v-if="config.size==='large'">
      <button class="btn-start" :disabled="firstPageBtnDisabled" @click="toFirstPage">
        <i class="icon-to-start icon-end-start"></i>
      </button>
      <el-pagination
        class="mu-pagination"
        popper-class="mu-select-option"
        :current-page.sync="currentPage"
        :page-size.sync="currentPageSize"
        layout="prev, pager, next"
        :page-sizes="config.pageSizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
      <button class="btn-end" :disabled="lastPageBtnDisabled" @click="toLastPage">
        <i class="icon-to-end icon-end-start"></i>
      </button>
    </div>

    <div class="mu-pagi-container" v-if="config.size==='small'">
      <button class="btn-start" :disabled="firstPageBtnDisabled" @click="toFirstPage">
        <i class="icon-to-start icon-end-start"></i>
      </button>
      <el-pagination
        class="mu-pagination"
        popper-class="mu-select-option"
        :current-page.sync="currentPage"
        :page-size.sync="currentPageSize"
        layout="prev, slot, next"
        :page-sizes="config.pageSizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
        <input type="number"
               autocomplete="off"
               class="inner-input"
               v-model.number="currentPage"
               @keydown.enter="handleCurrentChange(currentPage)"
               @blur="handleCurrentChange(currentPage)"
        >
      </el-pagination>
      <button class="btn-end" :disabled="lastPageBtnDisabled" @click="toLastPage">
        <i class="icon-to-end icon-end-start"></i>
      </button>
    </div>

    <el-pagination
      v-if="config.size==='large' && config.isJumper"
      class="mu-pagination mu-jumper"
      popper-class="mu-select-option"
      :current-page.sync="currentPage"
      :page-size.sync="currentPageSize"
      layout="jumper"
      :page-sizes="config.pageSizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>

    <el-pagination
      v-if="config.isSizes"
      class="mu-pagination"
      popper-class="mu-select-option"
      :current-page.sync="currentPage"
      :page-size.sync="currentPageSize"
      layout="sizes"
      :page-sizes="config.pageSizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>

    <el-pagination
      v-if="config.isPageNum"
      class="mu-pagination third-part"
      popper-class="mu-select-option"
      :current-page.sync="currentPage"
      :page-size.sync="currentPageSize"
      layout="slot"
      :page-sizes="config.pageSizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
      <span class="page-span">共{{lastPageNum}}页,{{total}}条数据</span>
    </el-pagination>
  </div>
</template>

<script lang="ts">
  import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
  import { scrollTo } from '../../common/utils/scroll-to';

  interface PaginationConfig {
    pageSizes?: Array<number>,
    background?: boolean,
    autoScroll?: boolean,
    hidden?: boolean,
    size?: string,
    isJumper?: boolean,
    isSizes?: boolean,
    isPageNum?: boolean
  }

  @Component({
    name: 'mcPagination'
  })
  export default class extends Vue {
    @Prop({ default: () => [] }) private config: PaginationConfig;
    @Prop({ required: true }) private total!: number;
    @Prop({ default: 1 }) private page!: number;
    @Prop({ default: 5 }) private pageSize!: number;
    // @Prop({ default: () => [5, 10, 20, 50, 100] }) private pageSizes!: number[];
    // @Prop({ default: true }) private background!: boolean;
    // @Prop({ default: true }) private autoScroll!: boolean;
    // @Prop({ default: false }) private hidden!: boolean;
    // @Prop({ default: 'large' }) private size!: string;
    // @Prop({ default: true }) private isJumper!: boolean;
    // @Prop({ default: true }) private isSizes!: boolean;
    // @Prop({ default: true }) private isPageNum!: boolean;
    defaultConfig: PaginationConfig = {
      pageSizes: [5, 10, 20, 50, 100],
      background: true,
      autoScroll: true,
      hidden: false,
      size: 'large',
      isJumper: true,
      isSizes: true,
      isPageNum: true
    };

    created() {
      this.initPaginatinConfig();
    }

    // 检测值
    @Watch("config")
    onConfigChanged(val: PaginationConfig) {
      this.initPaginatinConfig();
    }

    get lastPageNum() {
      return Math.ceil(this.total / this.pageSize)
    }

    get firstPageBtnDisabled() {
      return this.currentPage === 1;
    }

    get lastPageBtnDisabled() {
      return this.currentPage === this.lastPageNum;
    }

    toFirstPage() {
      this.currentPage = 1;
      this.handleCurrentChange(this.currentPage);
    }

    toLastPage() {
      this.currentPage = this.lastPageNum;
      this.handleCurrentChange(this.lastPageNum);
    }

    get currentPage() {

      return this.page;
    }

    set currentPage(value: any) {
      this.$emit('update:page', parseInt(value || 1));
    }

    get currentPageSize() {
      return this.pageSize;
    }

    set currentPageSize(value) {
      this.$emit('update:pageSize', value);
    }

    handleSizeChange(value: number) {
      setTimeout(() => {
        this.$emit('on-change', { page: this.currentPage, pageSize: value });
        if (this.config.autoScroll) {
          scrollTo(0, 800);
        }
      })
    }

    handleCurrentChange(value: number) {
      if (value <= 1) {
        this.currentPage = 1
      } else if (this.lastPageNum < value) {
        this.currentPage = this.lastPageNum
      }
      this.$emit('on-change', { page: value, pageSize: this.pageSize });
      if (this.config.autoScroll) {
        scrollTo(0, 800);
      }
    }

    initPaginatinConfig() {
      Object.keys(this.defaultConfig).forEach((key: string) => {
        if (this.config[key] === undefined) this.config[key] = this.defaultConfig[key];
      });
    }
  }
</script>

<style lang="scss" scoped>
  .mu-pagi-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .btn-start {
      margin-right: -8px;
    }

    .btn-end {
      margin-left: -8px;
    }
  }

  .pagination-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #fff;
    padding: 16px 0;

    .mu-jumper {
      margin-right: -8px;
    }
  }

  .icon-end-start {
    color: #999;
  }

  .pagination-container.hidden {
    display: none;
  }
</style>
