<template>
  <pagination class="fbg-page" :layout="showLayout" :currentPage.sync="page" :page-size="pageSize" :page-sizes="pageSizes" v-bind="$attrs"  background v-on="listeners" @size-change="handleChangeSize"  @current-change="handlePageChange">
    <fbg-select v-if="showSizes&&pageSizes.length" :value="size" :clearable="false" style="width:80px;" class="fbg-page-pages" @change="handleChangeSize">
      <fbg-option v-for="(item, index) in pageSizes" :key="index" :label="item"  :value="item" />
    </fbg-select>
    <span v-if="showJumper" class="fbg-page-text" >跳至&nbsp;</span>
      <fbg-input v-if="showJumper" :value="page" class="fbg-page-jump" :clearable="false" style="width: 50px;"  @enter="handlePageChange"/>
    <span v-if="showJumper" class="fbg-page-text">页</span>
  </pagination>
</template>
<script>
import {Pagination} from 'element-ui';
import Select from  '../select';
import Option from  '../select/option';
import Input from  '../input';
import util from '../../utils';
export default {
  props: {
    pageSizes: {
      type: Array,
      default() {
        return [];
      }
    },
    pageSize: {
      type: Number,
      default: 10
    },
    layout: {
      type: String,
      default: 'total,prev,pager,next,->,sizes,jumper'
    },
    currentPage: {
      type: Number
    }
  },
  components: {
    Pagination,
    'fbg-select': Select,
    'fbg-option': Option,
    'fbg-input': Input
  },
  watch: {
    pageSize: {
      immediate: true,
      handler(value) {
        this.size = value;
      }
    },
    currentPage: {
      immediate: true,
      handler(value) {
        this.page = value;
      }
    },
    page(value) {
      this.$emit('update:currentPage', value);
    }
  },
  computed: {
    showSizes() {
      return this.layout.indexOf('sizes') > -1
    },
    showJumper() {
      return this.layout.indexOf('jumper') > -1;
    },
    showLayout() {
      const list = this.layout.split(',');
      
      const data = [ 'total', 'prev', 'pager', 'next'].filter(item => {
        return list.indexOf(item) > -1;
      });
      data.push('slot');
      return data.join(',');
    }
  },
  data() {
    return {
      size: 0,
      page: '',
      listeners: {}
    };
  },
  created() {
    this.listeners = util.filterEvent(this.$listeners, ['size-change', 'current-change']);
    if (this.pageSizes.length && !this.pageSize) {
      this.size = this.pageSizes[0];
    }
  },
  methods: {
    handleChangeSize(value) {
      const v = parseInt(value);
      this.size = v;
      this.$emit('size-change', v);
    },
    handlePageChange(value) {
      const v = parseInt(value);
      this.page = v;
      this.$emit('current-change', v);
    }
  }
}
</script>
<style lang="scss" >
.fbg {
  &-page {
    &-text {
      vertical-align: middle;
      color: #666;
      padding-left: 5px;
    }
    &-jump {
      width: 50px;
      vertical-align: middle;
    }
  }
}
.el-pagination{
  font-size: 12px;
  font-weight: 400!important;
  span.el-pagination__total {
    font-size: 12px!important;
  }
  button.btn-prev, button.btn-next {
    background-color: #fff!important;
  }
  ul.el-pager{
    li.number, li.more {
      color: #666;
      border: 1px solid #ccc;
      background-color: #fff;
      font-weight: 400;
      border-radius: 3px;
    }
    li.active {
      background-color: $themeColor!important;
      border: 1px solid $themeColor!important;
    }
  }
}

</style>