<template>
  <div class="ks-Slider">
    <div
      class="ks-Slider-prev"
      @click="clickPrev"
    >

      <img
        v-if="pageNum === 1 || total === 0"
        src="@/assets/images/dashboard/up_down_grey.png"
      />
      <img
        v-else
        src="@/assets/images/dashboard/up_down_light.png"
      >
    </div>
    <div class="ks-Slider-inner"></div>
    <div
      class="ks-Slider-next"
      @click="clickNext"
    >
      <img
        v-if="pageNum === pages || total === 0"
        src="@/assets/images/dashboard/up_down_grey.png"
      />
      <img
        v-else
        src="@/assets/images/dashboard/up_down_light.png"
      >
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomerRechangeSlider',
  props: {
    data: {
      type: Array,
    },
    span: {
      type: Number,
      default: 4,
    },
    onChange: {
      type: Function,
    },
  },
  data() {
    return {
      pageNum: 1,
      pageSize: this.span,
      pages: 0,
      total: 0,
      startRadio: 0,
      endRadio: 1,
    };
  },
  watch: {
    data() {
      this.refreshSlider();
    },
  },
  mounted() {},
  methods: {
    refreshSlider() {
      let total = this.data.length;
      this.total = total;
      if (total) {
        this.pages = Math.ceil(total / this.pageSize);
        this.pageNum = 1;
        this.startRadio = 0;
        this.endRadio = this.pageSize / total;
      } else {
        this.pageNum = 1;
        this.pages = 0;
        this.startRadio = 0;
        this.endRadio = 1;
      }
    },
    clickPrev() {
      if (this.pageNum === 1) return;
      let nextNum = this.pageNum - 1;
      const pStartRadio = this.startRadio;
      let endRadio = pStartRadio;
      console.log(nextNum);

      let startRadio =
        nextNum === 1 ? 0 : ((nextNum - 1) * this.pageSize) / this.total;

      this.onChange &&
        this.onChange({
          startRadio,
          endRadio,
        });
      this.pageNum = nextNum;
      this.startRadio = startRadio;
      this.endRadio = endRadio;
    },
    clickNext() {
      if (this.pageNum === this.pages) return;
      let nextNum = this.pageNum + 1;
      const pEndRadio = this.endRadio;
      let startRadio = pEndRadio;
      let endRadio =
        nextNum === this.pages ? 1 : (nextNum * this.pageSize) / this.total;
      this.onChange &&
        this.onChange({
          startRadio,
          endRadio,
        });
      this.pageNum = nextNum;
      this.startRadio = startRadio;
      this.endRadio = endRadio;
    },
  },
};
</script>

<style lang="scss">
.ks-Slider {
  position: relative;
  .ks-Slider-prev,
  .ks-Slider-next {
    position: absolute;
    width: 28px;
    height: 18px;
    background-color: #666;
    &.disabled {
      background-color: #999;
    }
  }
  .ks-Slider-prev {
    top: 0;
  }
  .ks-Slider-next {
    transform: rotate(180deg);
    bottom: 0;
  }
  .ks-Slider-inner {
    width: 100%;

    background-color: #666;
  }
}
</style>