ShowEasyFrontEnd/FrontEnd/components/service/content/quantitySelectOption.vue

<template>
  <div v-show="show" :class="[
    'optionItem',
    index <= 2
      ? 'tw-pb-[10px] tw-mb-[10px] tw-border-0 tw-border-b tw-border-solid tw-border-neutrals-100'
      : '',
    seeMore
      ? 'tw-pb-[10px] tw-mb-[10px] tw-border-0 tw-border-b tw-border-solid tw-border-neutrals-100'
      : '',
  ]">
    <div class="tw-flex tw-flex-col">
    <div :class="['tw-grid tw-grid-cols-1 md:tw-grid-cols-[auto_auto_168px] tw-gap-[10px] tw-flex tw-items-center']">
      <h4 class="t12 tw-mb-[4px] tw-text-neutrals-900 md:t16 tw-font-normal">
          {{ item.TruckName }} {{$t("Ton truck")}}
        </h4>
        <!-- <div
          class="t12 tw-mb-[4px] tw-text-neutrals-500 md:t16 md:tw-font-normal"
        >
          {{ $t("Notes : Inclusive Of oooooooooo") }}
        </div> -->
        <div class="t12 tw-mb-[4px] tw-text-neutrals-600 md:t14 tw-font-normal">
          {{$t("Maximum load")}}：{{item.MaxWeight}}、{{$t("Car size")}}：{{item.Size}}
        </div>
      <div class="tw-flex tw-justify-between tw-items-center">
        <!-- <div class="t12 tw-mr-[35px] tw-text-neutrals-900 tw-hidden md:tw-block md:t16 md:tw-font-normal">
          ${{ price.toLocaleString() }} {{ currency }}
        </div> -->
        <button :class="[
          'custom-button button-reduce tw-text-transparent tw-p-[6px] tw-rounded-[8px] tw-max-w-[24px] tw-max-h-[24px] tw-mr-[16px] md:tw-max-w-[30px] md:tw-max-h-[30px] md:tw-mr-[42px]',
          value == 0 ? 'tw-bg-neutrals-200' : 'tw-bg-primary-default',
        ]" @click="reduce()">
          reduce
        </button>
        <div class="tw-min-w-[24px] tw-text-center md:t18 md:tw-font-normal">
          {{ value }}
        </div>
        <button :class="[
          'custom-button button-add tw-text-transparent tw-p-[6px] tw-rounded-[8px] tw-max-w-[24px] tw-max-h-[24px] tw-ml-[16px] md:tw-max-w-[30px] md:tw-max-h-[30px] md:tw-text-medium md:tw-ml-[42px]',
        ]" @click="add()">
          add
        </button>
      </div>
    </div>
    <div class="tw-flex tw-justify-end tw-py-[20px]">
      <div class="element">
        <div class="tw-flex tw-justify-between tw-items-center">
          <label class="tw-font-normal t14 md:t16"><span>{{ $t("The number of lift tailgate trucks")}}：</span></label>
          <select :class="['tw-pr-[40px] tw-max-w-[200px]']" @change="inputVal" v-model="selectValue"
          >
          <option :value="0">{{ $t("Select option") }}</option>
          <option v-for="item in tailgates" :key="item" :value="item">{{ item }}</option>
        </select>
        </div>
      </div>
    </div>
    <div class="tw-border-0 tw-border-b tw-border-solid tw-border-neutrals-200 tw-mb-[20px]"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    index: {
      type: Number,
    },
    item: {
      type: Object,
    },
    hasValue: {
      type: Number,
    },
    seeMore: {
      type: Boolean,
    },
  },
  data() {
    return {
      value: 0,
      currentPirce: "US",
      selectValue: 0,
      tailgate: 10,
    };
  },
  computed: {
    currency() {
      return this.$store.getters.getCurrency;
    },
    show() {
      if (this.index + 1 <= 3) {
        return true;
      } else {
        if (this.seeMore == true) {
          return true;
        } else {
          return false;
        }
      }
    },
    tailgates(){
      if(this.value == 0){
        this.selectValue = 0;
        return 0; 
      }
      return this.tailgate;
    }
  },
  watch: {
    hasValue: {
      handler: function () {
        if (this.hasValue == null) {
          this.value = 0;
          this.selectValue = 0;
        }
      },
    },
    choicesIndex: {
      handler: function (newVal, oldVal) {
        if (newVal !== oldVal) {
          this.value = 0;
        }
      },
    },
    item: {
      handler: function () {
        let vm = this;
        vm.$nextTick(function () {
          vm.$emit("selected", {
            number: this.value,
            id: this.item.TruckID,
            name: this.item.TruckName,
            maxWeight: this.item.MaxWeight,
            size: this.item.Size,
          });
        })
      },
    }
  },
  methods: {
    add() {
      this.value += 1;
      if (this.value !== 0) {
        this.$emit("disabled", this.index);
      }
      this.$emit("selected", {
        number: this.value,
        id: this.item.TruckID,
        name: this.item.TruckName,
        maxWeight: this.item.MaxWeight,
        size: this.item.Size,
      });
    },
    reduce() {
      if (this.value !== 0) {
        this.value -= 1;
        this.$emit("selected", {
          number: this.value,
          id: this.item.TruckID,
          name: this.item.TruckName,
          maxWeight: this.item.MaxWeight,
          size: this.item.Size,
        });
      }
    },
    inputVal(){
      this.$emit("change", {
          number: this.selectValue,
          id: this.item.TruckID,
          name: this.item.TruckName,
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.custom-button {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
}

.button {
  &-reduce {
    background-image: url("~/assets/svg/reduce.svg");
    background-color: #e5e5e5;
  }

  &-add {
    background-image: url("~/assets/svg/add.svg");
    background-color: #f48800;
  }
}

.bounce-enter-active {
  animation: bounce-in 0.3s ease-out;
}

.bounce-leave-active {
  animation: bounce-in 0.3s reverse;
}

@keyframes bounce-in {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}
select {
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  appearance: none;
  background-image: url("~/assets/svg/down-arrow.svg");
  background-size: 9px 6px;
  background-position: right 20px center;
  background-repeat: no-repeat;
}
</style>