<template>
  <div class="pag-block no-sizes">
    <el-pagination
      layout="total, prev, pager, next"
      @current-change="data => $emit('current-change', data)"
      :current-page="currPage"
      :page-size="currSize"
      background
      :total="total"
    >
    </el-pagination>

    <div class="sizes-down" :style="{left: 40 + total.toString().length * 10 + 'px'}" v-if="!hideSizes">
      <span class="el-dropdown-link" @click.stop="show = !show">
        {{currSize}} 条/页
        <i :class="show ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
      </span>
      <ul @click.stop v-if="show">
        <li
          v-for="num in sizes"
          :key="num"
          :class="{selected: num === currSize}"
          @click="clickHandle(num)">
          {{num}}条/页
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
export default {
  props: ['currPage', 'size', 'total', 'hideSizes', 'csizes'],
  setup(props, content) {
    let sizes = props.csizes ? ref(props.csizes):ref([12, 24]) 
    let currSize = ref(props.size || sizes.value[0])
    let show = ref(false)

    watch(currSize, () => content.emit('size-change', currSize))
    
    return { sizes, currSize, show }
  },
  methods: {
    clickHandle(num) {
      this.currSize = num
      this.show = false
    }
  },
  mounted() {
    this.docClick = () => this.show = false
    document.documentElement.addEventListener('click', this.docClick, false)
  },
  unmounted() {
    document.documentElement.removeEventListener('click', this.docClick, false)
  }
}
</script>

<style lang="scss" scope>
.pag-block {
  position: relative;
  z-index: 88;
    
  .sizes-down {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    span {
      box-sizing: border-box;
      font-size: 13px;
      appearance: none;
      color: rgb(96, 98, 102);
      display: inline-block;
      height: 30px;
      line-height: 30px;
      min-width: 100px;
      border: 1px solid rgb(220, 223, 230);
      border-radius: 4px;
      outline: none;
      padding: 0px 35px 0 15px;
      cursor: pointer;

      i {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: inherit;
      }
    }

    ul {
      width: 100%;
      bottom: 100%;

      position: absolute;
      z-index: 1001;
      border: solid 1px #E4E7ED;
      border-radius: 4px;
      background-color: #FFFFFF;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      margin: 5px 0;
      list-style: none;
      padding: 6px 0;
      margin: 0;
      box-sizing: border-box;

      li {
        font-size: 14px;
        padding: 0 20px;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #606266;
        height: 34px;
        line-height: 34px;
        box-sizing: border-box;
        cursor: pointer;

        &:hover {
          background-color: #F5F7FA;
        }

        &.selected {
          color: #D6000F;
          font-weight: bold;
        }
      }
    }
  }
}
</style>