ShowEasyFrontEnd/FrontEnd/components/service/content/additionalOption.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-justify-between tw-items-center']">
      <div>
        <h4 class="t12 tw-mb-[4px] tw-text-neutrals-900 md:t16 md:tw-font-normal">
          {{ $t(item.name) }}
        </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-900 md:tw-hidden">
          ${{ price.toLocaleString() }} {{ currency }}
        </div>
      </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>
</template>
<script>
export default {
  props: {
    index: {
      type: Number,
    },
    item: {
      type: Object,
    },
    hasValue: {
      type: Number,
    },
    seeMore: {
      type: Boolean,
    },
  },
  data() {
    return {
      value: 0,
      langQuery: this.$i18n.localeProperties["langQuery"],
      currentPirce: "US",
    };
  },
  computed: {
    currency() {
      return this.$store.getters.getCurrency;
    },
    show() {
      if (this.index <= 3) {
        return true;
      } else {
        if (this.seeMore == true) {
          return true;
        } else {
          return false;
        }
      }
    },
    price() {
      return Number(this.item.price);
    },
    totalPrice() {
      return Math.round(this.price * this.value * 100) / 100;
    },

  },
  watch: {
    hasValue: {
      handler: function () {
        if (this.hasValue == null) {
          this.value = 0;
        }
      },
    },
    item: {
      handler: function () {
        let vm = this;
        vm.$nextTick(function () {
          vm.$emit("selected", {
            addon_service_id: vm.item.addon_service_id,
            addon_service_name: vm.item.name,
            number: vm.value,
            total: vm.totalPrice,
          });
        })
      },
    }
  },
  methods: {
    add() {
      this.value += 1;

      if (this.value !== 0) {
        this.$emit("disabled", this.index);
      }
      this.$emit("selected", {
        addon_service_id: this.item.addon_service_id,
        addon_service_name: this.item.name,
        number: this.value,
        total: this.totalPrice,
      });
    },
    reduce() {
      if (this.value !== 0) {
        this.value -= 1;
        this.$emit("selected", {
          addon_service_id: this.item.addon_service_id,
          addon_service_name: this.item.name,
          number: this.value,
          total: this.totalPrice,
        });
      }
    },
  },
};
</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;
  }
}
</style>