ShowEasyFrontEnd/FrontEnd/components/exhibition/ExhibitionBannerArea.vue

<template>
  <div class="exhibitionBannerArea">
    <div class="banner">
      <div class="bannerfilter md:tw-px-[30px] md:tw-py-[40px] xl:tw-px-[40px] xl:tw-py-[60px]">
        <div
          class="tw-grid tw-grid-cols-[102px_auto] tw-gap-[8px] tw-mb-[12px] md:tw-grid-cols-[160px_528px] xl:tw-grid-cols-[160px_976px] md:tw-gap-[20px] xl:tw-gap-[30px]">
          <div>
            <div v-if="exhibition.logo == null">
              <img src="~/assets/svg/noLogo.svg"
                class="tw-border-solid tw-border tw-rounded-[16px] tw-border-neutrals-200" alt="" />
            </div>
            <div v-else>
              <img :src="exhibition.logo" class="tw-border-solid tw-border tw-rounded-[16px] tw-border-neutrals-200"
                alt="" />
            </div>

            <!-- <div class="tw-hidden md:tw-block md:tw-ml-[10px]">
              <div class="tw-head-body tw-flex tw-flex-row tw-items-center tw-mt-[10px]">
                <div class="tw-text-warning-default tw-mr-[11px] md:tw-text-[18px]">
                  {{ exhibition.rating }}
                </div>
                <div>
                  <img src="~/assets/svg/star_border.svg" class="tw-mr-[6px]" alt="" />
                  <img src="~/assets/svg/star_border.svg" class="tw-mr-[6px]" alt="" />
                  <img src="~/assets/svg/star_border.svg" class="tw-mr-[6px]" alt="" />
                  <img src="~/assets/svg/star_border.svg" class="tw-mr-[6px]" alt="" />
                  <img src="~/assets/svg/star_border.svg" alt="" />
                </div>
              </div>
              <div class="tw-text-warning-default tw-mt-[8px]">
                ({{
                  exhibition.reviewCount == null ? "0" : exhibition.reviewCount
                }}
                reviews)
              </div>
            </div> -->
          </div>
          <div class="tw-justify-start md:tw-max-w-[528px] xl:tw-max-w-[976px]">
            <div class="tw-flex tw-flex-row tw-mb-[8px] md:tw-mb-[12px]">
              <div v-if="exhibition.isRecommend != null && exhibition.isRecommend == 'Y' "
                class="tw-grid tw-grid-cols-[12px_auto] tw-gap-[4px] tw-items-center tw-border-solid tw-border tw-border-primary-2 tw-bg-primary-1 tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-mr-[8px]">
                <img src="~/assets/svg/recommend.svg" alt="" />
                <div class="tw-text-white tw-text-[12px] md:tw-text-[14px]">
                  {{ $t("exhibition.Recommended") }}
                </div>
              </div>
              <div v-if="exhibition.status != null && exhibition.status != ''">
                <div v-if="exhibition.status == 'Upcoming'"
                  class="tw-border-solid tw-border tw-border-primary-1 tw-text-primary-1 tw-bg-white tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-text-[12px] md:tw-text-[14px]">
                  {{ $t("exhibition.Upcoming") }}
                </div>
                <div v-else-if="exhibition.status == 'Ongoing'"
                  class="tw-border-solid tw-border tw-border-complementary-1 tw-text-complementary-1 tw-bg-white tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-text-[12px] md:tw-text-[14px]">
                  {{ exhibition.status }}
                </div>
                <div v-else-if="exhibition.status == 'Finished'"
                  class="tw-border-solid tw-border tw-border-neutrals-500 tw-text-neutrals-500 tw-bg-white tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-text-[12px] md:tw-text-[14px]">
                  {{ exhibition.status }}
                </div>
                <div v-else-if="exhibition.status == 'Cancelled'"
                  class="tw-border-solid tw-border tw-border-error-default tw-text-error-default tw-bg-white tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-text-[12px] md:tw-text-[14px]">
                  {{ exhibition.status }}
                </div>
                <div v-else
                  class="tw-border-solid tw-border tw-bg-error-default tw-text-white tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-text-[12px] md:tw-text-[14px]">
                  {{ exhibition.status }}
                </div>
              </div>
            </div>
            <div class="tw-hidden md:tw-block">
              <div v-if="exhibition.categories != null" class="md:tw-flex md:tw-flex-row md:tw-items-center">
                <div v-for="(item, index) in exhibition.categories" :key="index"
                  class="tw-bg-[#f6f6f6] tw-w-fit tw-border-solid tw-border tw-border-neutrals-400 tw-text-neutrals-800 tw-rounded-[10px] tw-mb-[4px] tw-whitespace-nowrap tw-px-[10px] tw-py-[5px] tw-text-[12px] md:tw-text-[14px] md:tw-mr-[12px] md:tw-text-white md:tw-bg-neutrals-400 md:tw-bg-opacity-50">
                  {{ item.CategoryName }}
                </div>
              </div>
            </div>
            <div class="md:tw-hidden">
              <div v-if="exhibition.categories != null" class="md:tw-flex md:tw-flex-row md:tw-items-center">
                <template v-for="(item, index) in exhibition.categories">
                  <div :key="index" v-if="
                    show ? (index = exhibition.categories.length) : index <= 1
                  "
                    class="tw-bg-[#f6f6f6] tw-w-full tw-flex tw-justify-center tw-px-[10px] tw-py-[5px] tw-text-neutrals-800 tw-rounded-[10px] tw-mb-[4px] tw-whitespace-nowrap tw-text-[12px] md:tw-text-[14px] md:tw-mr-[12px] md:tw-text-white md:tw-bg-neutrals-400 md:tw-bg-opacity-50">
                    {{ item.CategoryName }}
                  </div>
                </template>
                <div v-if="exhibition.categories.length > 2">
                  <button v-if="showCategoryNum"
                    class="tw-text-warning-default tw-text-[16px] tw-hidden md:tw-block md:tw-mr[12px]"
                    @click="openCategoryList()">
                    {{
                      show
                      ? exhibition.categories.length - 2 + "+"
                                        : exhibition.categories.length - 2 + "-"
                    }}
                  </button>
                </div>

                <button v-if="exhibition.categories.length > 2"
                  class="tw-grid tw-w-full tw-grid-cols-[auto_16px] tw-gap-[8px] tw-bg-white tw-items-center tw-justify-center tw-py-[4px]"
                  @click="openCategoryList()">
                  <div :class="[
                    'tw-text-primary-1 tw-text-[12px]',
                    'primary_arrow',
                  
                    show ? 'show' : '',
                  ]">
                    {{ openCategoryText }}
                  </div>
                </button>
              </div>
            </div>

            <div class="tw-hidden md:tw-block">

              <div v-if="`${this.$i18n.localeProperties['langQuery']}` != 'en-US'">

                <div
                  class="tw-body-3 tw-break-all tw-text-base-primary tw-w-full md:t24 md:tw-text-white md:tw-mt-[12px] xl:tw-text-[28px] xl:tw-font-bold">
                  {{ exhibition.name }}
                </div>

              </div>

              <div
                class="tw-body-3 tw-break-all tw-text-base-primary tw-w-full md:t24 md:tw-text-white md:tw-mt-[12px] xl:tw-text-[28px] xl:tw-font-bold">
                {{ exhibition.shortName }}, {{ exhibition.enname }}
              </div>

              <div
                class="tw-head-body tw-text-neutrals-500 tw-w-full md:tw-text-[20px] md:tw-font-medium md:tw-text-neutrals-0 md:tw-mt-[12px]">
                {{ exhibition.region.name == null ? "" : exhibition.region.name + "．" }}
                {{ exhibition.country.name == null ? "" : exhibition.country.name + "．" }}
                {{ exhibition.city.name == null ? "" : exhibition.city.name }}
              </div>
              <div
                class="tw-head-body tw-text-primary-1 tw-w-full md:tw-text-[20px] md:tw-font-medium md:tw-text-white md:tw-mt-[12px]">
                <!-- {{ exhibition.startdate }} - {{ exhibition.enddate }} -->
                {{ formatDate(exhibition.startdate) + " - " + formatDate(exhibition.enddate) }}
              </div>
            </div>
          </div>
        </div>
        <!-- phone -->
        <div class="tw-flex tw-flex-col tw-max-w-[354px] tw-gap-[12px] md:tw-hidden">
          <div class="tw-body-3 tw-break-all">
            {{ exhibition.name }}
          </div>

          <div class="tw-head-body tw-text-neutrals-500 tw-w-full">
            {{ exhibition.region.name == null ? "" : exhibition.region.name + "．" }}
            {{ exhibition.country.name == null ? "" : exhibition.country.name + "．" }}
            {{ exhibition.city.name == null ? "" : exhibition.city.name }}
          </div>
          <div class="tw-head-body tw-text-primary-1 tw-w-full">
            <!-- {{ exhibition.startdate }} - {{ exhibition.enddate }} -->
            {{ formatDate(exhibition.startdate) + " - " + formatDate(exhibition.enddate) }}
          </div>
          <!-- <div class="tw-head-body tw-flex tw-flex-row tw-items-center">
            <div class="tw-text-primary-1 tw-mr-[6px]">
              {{ exhibition.rating }}
            </div>
            <img src="~/assets/svg/star.svg" class="tw-mr-[12px]" alt="" />
            <div class="tw-text-neutrals-500">
              ({{
                exhibition.reviewCount == null ? "0" : exhibition.reviewCount
              }}
              reviews)
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VClamp from "vue-clamp";
import { formatDate, dateCountDown } from "~/utils/assist";
export default {
  name: "ExhibitionBannerArea",
  data() {
    return {
      show: false,
      showCategoryNum: true,
    };
  },

  props: {
    exhibition: {
      type: Object,
      default: () => ({
        banner: "",
        logo: "",
        rating: "",
        reviewCount: 0,
        name: "",
        region: {},
        country: {},
        city: {},
        startdate: "",
        enddate: "",
        categories: [],
      }),
    },
  },

  computed: {
    openCategoryText() {
      if (this.show == false) {
        return "Expand";
      } else {
        return "Collapse";
      }
    },
  },
  methods: {
    formatDate,
    dateCountDown,
    openCategoryList() {
      this.show = !this.show;
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  @media screen and (min-width: 768px) {
    background-image: url("~/assets/img/ExhibitionBanner.jpeg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
}

.bannerfilter {
  @media screen and (min-width: 768px) {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

.primary_arrow {
  position: relative;

  &::after {
    content: "";
    display: inline-block;
    position: absolute;
    right: -21px;
    top: 6px;
    margin-top: auto;
    margin-bottom: auto;
    background-image: url("~/assets/svg/arrow-down-primary.svg");
    background-size: 100%;
    background-position: right center;
    background-repeat: no-repeat;
    width: 7px;
    height: 4px;
  }

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