<template>
  <div
    v-if="innerTotalPages > 1"
    class="d-flex flex-column flex-md-row align-md-center justify-end align-end gap-2 py-4">
    <v-pagination
      v-model="innerValue"
      :length="innerTotalPages"
      :total-visible="innerTotalVisible"
      class="pagination__list" />
    <div
      v-if="showGoToPage"
      class="d-flex align-center justify-center gap-3 mx-3">
      <div>{{ $t('app.gotopage') }}</div>
      <div class="pagination__page-input">
        <snt-number-field
          :value="innerValue"
          :max="innerTotalPages"
          :min="1"
          height="38px"
          hide-details
          rounded
          center
          @blur="setPage($event.target.value)"
          @change="setPage($event)" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: [Number, String],
      required: true
    },
    totalPages: {
      type: [Number, String],
      default: 0
    },
    totalVisible: {
      type: [Number, String],
      default: 7
    },
    showGoToPage: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      inputNumber: null
    }
  },
  computed: {
    innerValue: {
      get () {
        return Number(this.value)
      },
      set (val) {
        this.$emit('input', Number(val))
      }
    },
    innerTotalPages () {
      return Number(this.totalPages)
    },
    innerTotalVisible () {
      return Number(this.totalVisible)
    }
  },
  methods: {
    setPage (page = 1) {
      this.innerValue = page
    }
  }
}
</script>

<style lang="scss" scoped>
  .pagination {
    &__list {
      ::v-deep {
        .v-pagination__item,
        .v-pagination__more,
        .v-pagination__navigation {
          font-size: 0.875rem;
          min-width: 36px;
          min-height: 36px;
          align-items: center;
        }
        .v-pagination__item,
        .v-pagination__navigation {
          border: 1px solid #ddd;
          box-sizing: border-box;
          box-shadow: none;
          border-radius: 2px;
        }
      }
    }
    &__page-input {
      width: 80px;
      ::v-deep {
        .snt-number-input--rounded {
          border-radius: 2px;
          > input {
            border-radius: 2px;
          }
        }
      }
    }
    @media (max-width: 425px) {
      &__list {
        ::v-deep {
          .v-pagination__item,
          .v-pagination__more,
          .v-pagination__navigation {
            font-size: 0.8rem;
            min-width: 32px;
            min-height: 32px;
            align-items: center;
          }
          .v-pagination__item {
            margin: 4px;
          }
        }
      }
    }
  }
</style>
