<template>
  <div class="mypagination">
    <el-icon class="istyle" @click="minuspage" v-show="pgae != 1">
      <ArrowLeft />
    </el-icon>
    <div>
      <span style="color: #42d885;">
        {{ pgae }}
      </span> / {{ totals }}
    </div>
    <el-icon class="istyle" @click="gopage" v-if="pgae != totals">
      <ArrowRight />
    </el-icon>
    <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>