<script>
export default {
  name: "PageTurning",
  props: {
    value: {
      type: [String, Number],
      required: true,
    },
    idList: {
      type: Array,
      default: () => [],
    },
    size: {
      type: String,
      default: "mini",
    },
  },
  data() {
    return {};
  },
  computed: {
    currentIndex: {
      get() {
        let { value, idList } = this.$props;
        let cIndex = idList.findIndex((item) => item == value);
        return cIndex;
      },
      set() {},
    },
    innerList: {
      get() {
        return this.$props.idList;
      },
      set() {},
    },
  },
  watch: {},
  methods: {
    // 上一页
    Previous() {
      let { currentIndex } = this;
      if (currentIndex !== -1) {
        if (!(currentIndex - 1 < 0)) {
          // 超出
        } else {
          let id = innerList[currentIndex - 1];
          this.$emit("change", id);
          this.$emit("input", id);
          //  this.$emit("update:source", id);
        }
      }
    },
    // 下一页
    Down() {
      let { currentIndex, innerList } = this;
      if (currentIndex !== -1) {
        if (currentIndex + 1 === innerList.length) {
          // 超出
        } else {
          //
          let id = innerList[currentIndex + 1];
          this.$emit("change", id);
          this.$emit("input", id);
        }
      }
    },
  },
  created() {},
};
</script>

<template>
  <el-button-group>
    <el-button icon="el-icon-arrow-left" :size="size" @click="Previous"
      >上一页</el-button
    >
    <el-button icon="el-icon-arrow-right" :size="size" @click="Down"
      >下一页</el-button
    >
  </el-button-group>
</template>
