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"
                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.name }}
                </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
                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
                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>