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

<template>
  <div class="group tw-mb-[20px]">
    <div class="tw-flex tw-justify-between tw-items-center tw-mb-[20px]">
      <h3 class="t14 tw-font-bold tw-mb-0 md:t16">{{ $t(label) }}</h3>
      <button class="'seeMore tw-transition tw-btn-md tw-body-4 tw-text-secondary-default tw-px-[16px] tw-py-[9px]"
        @click="clearAll()">
        {{ $t("Clear all") }}
      </button>
    </div>
    <div>
      <div class="optionGroup tw-border tw-rounded-[10px] tw-bg-white tw-p-[15px]">
        <additionalOption v-for="(item, index) in packages" :key="index" :index="index + 1" :item="item"
          :hasValue="hasValue" :seeMore="seeMore" @disabled="disabled($event)" @selected="total($event)">
        </additionalOption>
      </div>
      <button v-show="length !== undefined && length > 3" :class="[
        'seeMore tw-transition tw-btn-md tw-text-primary-1 tw-border tw-border-solid tw-border-primary-1 tw-px-[30px] tw-py-[8.5px] tw-mt-[20px] tw-w-full tw-rounded-xl hover:tw-bg-primary-3 xl:hover:tw-bg-transparent xl:tw-border-none',
        seeMore ? 'open' : '',
      ]" @click="seeMore = !seeMore">
        {{ $t(seeMoreText) }}
      </button>
    </div>
  </div>
</template>
<script>
import additionalOption from "./additionalOption.vue";
export default {
  components: {
    additionalOption,
  },
  props: {
    label: {
      type: String,
    },
    packages: {
      type: Array,
    },
  },
  data() {
    return {
      hasValue: null,
      totalPrice: [],
      seeMore: false,
    };
  },
  computed: {
    seeMoreText() {
      if (this.seeMore == false) {
        return "See more";
      } else {
        return "See less";
      }
    },
    length() {
      if (this.packages) {
        return this.packages.length;
      } else {
        return 0;
      }
    },
  },
  methods: {
    disabled(i) {
      this.hasValue = i;
    },
    total(obj) {
      let hasObj = this.totalPrice.some(
        (item) => item.addon_service_id == obj.addon_service_id
      );
      if (!hasObj) {
        this.totalPrice.push(obj);
      } else {
        let oldObj = this.totalPrice.find(
          (f) => f.addon_service_id == obj.addon_service_id
        );
        if (oldObj) {
          oldObj.addon_service_name = obj.addon_service_name;
          oldObj.number = obj.number;
          oldObj.total = obj.total;
        }
      }
      this.$emit("totalPrice", this.totalPrice);
    },
    clearAll() {
      this.hasValue = null;
      this.totalPrice = [];
      this.$emit("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;
  }
}

:deep() {
  .optionGroup {
    .optionItem:last-child {
      border: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  }

}

.seeMore {
  &-hide {
    position: relative;
    max-height: 295px;
    overflow: hidden;

    &::after {
      content: "";
      display: block;
      position: absolute;
      background: url("~/assets/img/gradient_white.png") repeat-x left bottom;
      width: 100%;
      height: 130px;
      left: 0;
      bottom: 0;
      z-index: 1;
      transition: bottom 0.5s;
    }
  }

  &-show {
    position: relative;
    max-height: 100%;
    overflow: initial;

    &::after {
      display: none;
    }
  }

  @media screen and (min-width: 1366px) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
      content: "";
      display: inline-block;
      position: relative;
      background-image: url("~/assets/svg/arrow-down-primary.svg");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100%;
      width: 9px;
      height: 6px;
      margin-left: 16px;
      transition: all 0.2s linear;
    }

    &.open {
      &::after {
        transform: rotate(180deg);
      }
    }
  }
}
</style>