<template>
  <view class="s-flex s-flex-center">
    <view v-if="total" class="s-flex s-flex-between s-flex-wrap fulled">
      <s-button
        class="button-shadown"
        style="width: 60rpx; height: 60rpx"
        icon="arrow-left"
        type="primary"
        :disabled="nowIndex == 1 || disabled"
        @click="tv_pre"
      ></s-button>
      <block v-for="(item, index) in items" :key="index">
        <s-button
          class="button-shadown"
          :type="nowIndex === item ? 'success' : 'primary '"
          style="width: 60rpx; height: 60rpx"
          :text="item"
          @click="clicPages(item)"
        ></s-button>
      </block>
      <s-button
        class="button-shadown"
        style="width: 60rpx; height: 60rpx"
        icon="arrow-right"
        :disabled="nowIndex == tal || disabled ? true : false"
        @click="tv_next"
        type="primary"
      ></s-button>
    </view>
  </view>
</template>

<script>
import sButton from "../s-button/s-button.vue";
export default {
  components: { sButton },
  name: "s-pagination",
  props: {
    total: {
      type: Number,
      default: 0,
    },
    // 最大可见按钮数量。
    totalVisible: {
      type: Number,
      default: 5,
    },
    // 当前页码。需要page.sync同步。
    page: {
      type: Number,
      default: 1,
    },
    // 每页的数量 。
    size: {
      type: Number,
      default: 10,
    },
    // 是否圆形按钮。
    round: {
      type: Boolean,
      default: false,
    },
    // 是否暗黑模式
    black: {
      type: Boolean | String,
      default: null,
    },
    // 主题色
    color: {
      type: String,
      default: "primary",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    // 跟随主题色的改变而改变。
    fllowTheme: {
      type: Boolean | String,
      default: true,
    },
  },
  data() {
    return {
      //   nowIndex: 1,
      maxButtons: 0,
    };
  },
  computed: {
    //总共的页码。
    tal: function () {
      if (this.total <= this.size) return 1;
      let isInt = this.total % this.size;
      let ds = this.total / this.size;

      return isInt == 0 ? Math.floor(ds) : Math.floor(ds) + 1;
    },
    nowIndex: {
      get: function () {
        return this.page;
      },
      set: function () {},
    },
    items: function () {
      const totalVisible =
        parseInt(this.totalVisible, 10) <= 5
          ? 5
          : parseInt(this.totalVisible, 10);
      if (this.tal <= totalVisible) {
        return this.range(1, this.tal);
      }
      if (totalVisible === 0) {
        return [];
      }

      const maxLength = Math.min(
        Math.max(0, totalVisible) || this.tal,
        Math.max(0, this.maxButtons) || this.tal,
        this.tal
      );

      if (this.tal <= maxLength) {
        return this.range(1, this.tal);
      }

      const even = maxLength % 2 === 0 ? 1 : 0;
      const left = Math.floor(maxLength / 2);
      const right = this.tal - left + 1 + even;

      if (this.page > left && this.page < right) {
        const firstItem = 1;
        const lastItem = this.tal;
        const start = this.page - left + 2;
        const end = this.page + left - 2 - even;
        const secondItem = start - 1 === firstItem + 1 ? 2 : "...";
        const beforeLastItem = end + 1 === lastItem - 1 ? end + 1 : "...";

        return [
          1,
          secondItem,
          ...this.range(start, end),
          beforeLastItem,
          this.tal,
        ];
      } else if (this.page === left) {
        const end = this.page + left - 1 - even;
        return [...this.range(1, end), "...", this.tal];
      } else if (this.page === right) {
        const start = this.page - left + 1;
        return [1, "...", ...this.range(start, this.tal)];
      } else {
        return [...this.range(1, left), "...", ...this.range(right, this.tal)];
      }
    },
  },
  watch: {
    page: function (val) {
      this.init();
    },
  },
  mounted() {
  },
  methods: {
    clicPages(index) {
      if (index == "...") return;
      this.$emit("input", index);
      this.$emit("update:page", index);
      // this.$emit("prev");
      this.$emit("change", index);
    },
    tv_pre() {
      this.$emit("input", this.page - 1);
      this.$emit("update:page", this.page - 1);
      this.$emit("prev");
      this.$emit("change", this.page - 1);
    },
    tv_next() {
      this.$emit("input", this.page + 1);
      this.$emit("update:page", this.page + 1);
      this.$emit("next");
      this.$emit("change", this.page + 1);
    },
    range(from = 1, to) {
      const range = [];

      from = from > 0 ? from : 1;

      for (let i = from; i <= to; i++) {
        range.push(i);
      }

      return range;
    },
    init() {
      this.nowIndex = null;
      uni.$s.sleep(100).then(() => (this.nowIndex = this.page));
    },
  },
};
</script>

<style lang="scss" scoped>
.s-flex {
  display: flex;
  &-center {
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  &-between {
    justify-content: space-between;
    align-items: center;
    align-content: center;
  }
  &-wrap {
    // flex-flow: row wrap;
  }
}
.fulled {
  width: 100%;
}
.button-shadown {
  box-shadow: 0 3px 8px rgba(204,122,0,.2);
}
</style>
