<template>
  <div class="stepper">
    <button type="button" class="stepper-btn decrease" @click="optionClick('decrease')">
      <slot name="decrease">
        <svg-icon icon-class="less" />
      </slot>
    </button>
    <div class="stepper-lebel">{{ currentLabel }}</div>
    <button type="button" class="stepper-btn increase" @click="optionClick('increase')">
      <slot name="increase">
        <svg-icon icon-class="plus" />
      </slot>
    </button>
  </div>
</template>

<script>
/**
 * @description: 面板组件
 * @param {type}
 * @return:
 */
const OPTION_CLICK_EVENT = "click";
const CHANGE_EVENT = "input";
export default {
  name: "Stepper",
  props: {
    value: {
      type: String,
      default: ""
    },
    option: {
      type: Array,
      default() {
        return [];
      }
    }
    // increase: {
    //   txt: "",
    //   icon: ""
    // },
    // decrease: {
    //   txt: "",
    //   icon: ""
    // }
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.current = val ? this.option.findIndex(item => item.value === val) : 0;
      }
    },
    current(val) {
      this.$emit(CHANGE_EVENT, this.option[val].value);
    }
  },
  computed: {
    currentLabel() {
      return this.option[this.current].label;
    }
  },
  data() {
    return {
      current: ""
    };
  },
  methods: {
    optionClick(type, index) {
      const { option, current } = this;
      if (type === "increase" && current < option.length - 1) {
        this.current = current + 1;
      }
      if (type === "decrease" && current > 0) {
        this.current = current - 1;
      }
      this.$emit(OPTION_CLICK_EVENT, { type, index, value: option[current] });
    }
  }
};
</script>

<style lang="less" scoped>
@import "../style/var.less";
.stepper {
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid #ccc;
  &-btn {
    background-color: #f4f5ff;
    color: #787eff;
    text-align: center;
    border: 0;
    outline: none;
    height: 24px;
    .svg-icon {
      vertical-align: -1px;
      width: 10px;
      height: 10px;
    }
    &.decrease {
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }
    &.increase {
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }
  }
  &-lebel {
    color: #aaa;
    font-size: 14px;
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
  }
}
</style>
