<template>
  <view class="menu">
    <view :class="['menu-item', { circle: isCircle }]">
      <view class="title">
        <text v-if="title">{{ title }}</text>
        <slot v-else name="title" />
      </view>
      <view
        class="stepper"
        :style="{
          '--k-color-primary-01': themeColor,
          '--k-color-primary-03': themeColor,
        }"
      >
        <view
          :class="[
            'icon',
            'minus',
            { disable: countShow + count <= min },
            { 'disable-opacity': countShow + count <= min && themeColor },
          ]"
          :hover-class="countShow ? 'hover' : 'none'"
          :hover-start-time="0"
          :hover-stay-time="50"
          @click="onMinus"
        />
        {{ countShow + count }}
        <view
          :class="[
            'icon',
            'plus',
            { disable: countShow + count >= max },
            { ' disable-opacity': countShow + count >= max && themeColor },
          ]"
          :hover-class="countShow + count < max ? 'hover' : 'none'"
          :hover-start-time="0"
          :hover-stay-time="50"
          @click="onPlus"
        />
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  name: 'k-stepper',
  data() {
    return {
      countShow: 0,
    };
  },
  props: {
    title: String,
    isCircle: Boolean,
    min: {
      type: Number,
      default: 0,
    },
    max: {
      type: Number,
      default: 20,
    },
    count: {
      type: Number,
      default: 0,
    },
    themeColor: {
      type: String,
      default: '',
    },
    multiple: {
      type: Number,
      default: 1,
    },
    reset: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    reset(val) {
      if (val) {
        this.countShow = 0;
      }
    },
  },
  methods: {
    onMinus() {
      if (this.countShow + this.count > this.min) {
        if (this.countShow + this.count - this.multiple < this.min) {
          this.countShow = -this.count;
        } else {
          this.countShow -= this.multiple;
        }
        this.$emit('change', { value: this.countShow + this.count });
      }
    },

    onPlus() {
      if (this.countShow + this.count < this.max) {
        if (this.countShow + this.count + this.multiple > this.max) {
          this.countShow = this.max - this.count;
        } else {
          this.countShow += this.multiple;
        }
        this.$emit('change', { value: this.countShow + this.count });
      }
    },
  },
});
</script>

<style scoped lang="scss">
.menu {
  margin-top: 5px;
  width: 100%;
}

.menu-item {
  padding: 0 18px;
  display: flex;
  align-items: center;
  min-height: 60px;
  border-top: 1px solid rgba(225, 226, 232, 0.4);
  width: calc(100% - 36px);
  position: relative;
}

.menu-last-item {
  border-bottom: 1px solid rgba(225, 226, 232, 0.4);
}

.icon {
  margin-right: 22px;
  height: 24px;
}

.title {
  font-size: 18px;
  color: #333;
}

.right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}

.circle {
  padding: 0 18px;
  display: flex;
  align-items: center;
  height: 50px;
  border-radius: 25px;
  background-color: #fbfcff;
  border: none;

  .right {
    margin-right: 20px;
  }

  &:nth-child(1) {
    margin-bottom: 20px;
  }

  .title {
    font-size: 16px;
  }
}

.stepper {
  width: 110px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #000;
  margin-right: -20px;
  position: absolute;
  right: 36px;
}

.icon {
  width: 36px;
  height: 24px;
  box-sizing: border-box;
  color: #fff;
  border: 1px solid var(--k-color-primary-01, #333);
  position: relative;
  border-radius: 12px;
  background: var(--k-color-primary-01, #333);
  margin-right: 0;
}

.icon.disable {
  background: var(--k-color-primary-03, #333);
  border: 1px solid var(--k-color-primary-03, #333);
}

.icon.disable-opacity {
  opacity: 0.3;
}

.icon.hover {
  background-color: rgba(86, 95, 243, 0.1);
}

.icon.minus::before,
.icon.plus::before {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 2px;
  background-color: currentcolor;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.icon.plus::after {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 10px;
  background-color: currentcolor;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
