<template>
    <div class="mypagination">
        <i class="el-icon-arrow-left istyle" @click="minuspage" v-show="pgae != 1"></i>
        <div>
            <span style="color: #42d885;">
                {{ pgae }}
            </span> / {{ totals }}
        </div>
        <i class="el-icon-arrow-right istyle" @click="gopage" v-if="pgae != totals"></i>
        <div style="width: 26px;" v-else></div>
        <el-input v-model='pagego' class="inputStyle" @input="oninputEvent" />
        <el-button type="text" @click="gopages">跳转</el-button>

    </div>
</template>
<script>

export default {
    props: ['total'],

    watch: {
        totals() {
            this.pgae = 1
            this.pagego = 1
        }
    },
    computed: {
        totals() {
            let pagedata = this.total / 18
            return pagedata < 0 ? 1 : Math.ceil(pagedata)
        }
    },
    data() {
        return { pgae: 1, pagego: 1 }
    },
    methods: {
        oninputEvent(d) {
            let a = d.replace(/[^\d]/g, '')
            if (a < (this.totals + 1)) {
                this.pagego = a
            } else {
                this.pagego = this.totals
            }
        },
        gopage() {
            this.$emit('gopageEvent', ++this.pgae)
            this.pagego = this.pgae
        },
        minuspage() {
            this.$emit('gopageEvent', --this.pgae)
            this.pagego = this.pgae
        },
        gopages() {
            this.pgae = this.pagego
            this.$emit('gopageEvent', this.pagego)
        }
    }
}
</script>
<style scoped>
.mypagination {
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.istyle {
    background-color: #f6f7f8;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
}

.inputStyle {
    width: 50px;
    margin-right: 10px;
}
</style>