<template>
    <div class="comp-pagination standard"  v-show="total > 1">
        <ul class="page clearfix" ref="page">
            <li
                @click="goPrev"
                class="page-left"
                :class="{ disabled: prevDisabled }"
            >
                <span class="lofty_iconfont lofty-icon-arrow-down" />
            </li>
            <li
                v-for="num in numsToShow"
                :key="'key-' + num || num.join('_')"
                :class="{
                    active: num === curNum,
                    'page-num': true,
                }"
            >
                <template v-if="!Array.isArray(num)">
                    <a @click.prevent="selectPage(num)" :href="getPageLink(num)">{{ num }}</a>
                </template>
                <im-popper
                    v-else
                    :disabled="!num.length"
                    :hover="true"
                    :offset="[-6, 6]"
                >
                    <template #reference><div>...</div></template>
                    <template #default>
                        <ul class="pagination-popper standard">
                            <li
                                v-for="moreN in num"
                                :key="moreN"
                                @click="selectPage(moreN)"
                            >
                                <span @click.prevent="">{{ moreN }}</span>
                            </li>
                        </ul>
                    </template>
                </im-popper>
            </li>
            <li
                @click="goNext"
                class="page-right"
                :class="{ disabled: nextDisabled }"
            >
                <span class="lofty_iconfont lofty-icon-arrow-down" />
            </li>
        </ul>
    </div>
</template>
<script>
import index from './index.js'
export default {
    mixins:[index]
}
</script>
<style lang="scss">
@use 'index.scss' as *;
.comp-pagination.standard {
     ul {
      list-style: none;
      li {
        cursor: pointer;
        min-width: 30px;
        height: 30px;
        background: rgba(0, 0, 0, .03);
        color: #505050;
        margin-right: 10px;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        line-height: 30px;
        border-radius: 5px;
        &:hover {
          background-color: #111;
          color: #fff !important;
        }
        a {
          display: block;
          text-decoration: none;
          color: inherit;
          background: transparent!important;
        }
      }
    }
    .page-left {
      width: 30px;
      height: 30px;
      border-radius: 5px;
      .lofty-icon-arrow-down {
          display: inline-block;
          transform: rotate(90deg);
      }
    }
    .page-right {
      width: 30px;
      height: 30px;
      border-radius: 5px;
      .lofty-icon-arrow-down {
          display: inline-block;
          transform: rotate(-90deg);
      }
    }
    .active {
      background-color: #111;
      color: #fff !important;
    }
    .disabled {
      cursor: not-allowed;
    }
}
</style>
