ShowEasyFrontEnd/FrontEnd/components/exhibition/ExhibitionListCard.vue

<template>
  <div
    class="exhibitionListCard tw-border tw-border-solid tw-border-neutrals-200 tw-rounded-[20px] tw-p-[10px] tw-mb-[20px] md:tw-px-[20px] md:tw-py-[15px] md:tw-grid md:tw-grid-cols-[auto_28px]"
  >
    <!-- 手機版save exhibition -->
    <div
      class="tw-absolute tw-cursor-pointer md:tw-hidden"
      @click="onToggleFavorite"
    >
      <div v-if="item.saved">
        <nuxt-link :to="localePath('/exhibition/' + item.id)"
          ><img
            src="~/assets/svg/bookmark.svg"
            class="tw-w-[24px] md:tw-w-[28px]"
            alt=""
        /></nuxt-link>
      </div>
      <div v-else>
        <nuxt-link :to="localePath('/exhibition/' + item.id)"
          ><img
            src="~/assets/svg/bookmark_outline.svg"
            class="tw-w-[24px] md:tw-w-[28px]"
            alt=""
        /></nuxt-link>
      </div>
    </div>
    <!-- 電腦版exhibition status -->
    <!-- <div
      class="tw-hidden md:tw-block md:tw-absolute 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]"
    >
      Ongoing
    </div> -->

    <div
      class="tw-grid tw-grid-cols-[102px_auto] tw-gap-[10px] tw-items-center md:tw-grid-cols-[160px_auto]"
    >
      <div v-if="item.logo == null">
        <img src="~/assets/svg/noLogo.svg" alt="" />
      </div>
      <nuxt-link v-else :to="localePath('/exhibition/' + item.id)"
        ><img :src="item.logo" class="tw-py-[35px]" alt=""
      /></nuxt-link>

      <div>
        <div class="tw-flex tw-flex-row tw-mb-[8px]">
          <div
            v-if="item.isRecommend != null"
            class="tw-grid tw-grid-cols-[12px_auto] tw-gap-[4px] tw-items-center tw-w-fit tw-border tw-border-solid tw-border-primary-2 tw-bg-primary-1 tw-rounded-[8px] tw-px-[10px] tw-py-[4px] tw-mr-[8px] md:tw-grid-cols-[14px_auto]"
          >
            <img
              src="~/assets/svg/recommend.svg"
              class="tw-w-[12px] md:tw-w-[14px]"
              alt=""
            />
            <div class="tw-text-white tw-text-[12px] md:tw-text-[16px]">
              Recommend
            </div>
          </div>
          <!-- <div
            class="md:tw-hidden 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]"
          >
            Ongoing
          </div> -->
          <!-- exhibition status -->
          <!-- <div v-if="item.status != null && item.status.name != null">
          <div
            v-if="item.status.name == '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]"
          >
            {{ item.status ? item.status.name : "" }}
          </div>
          <div
            v-else-if="item.status.name == '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]"
          >
            {{ item.status ? item.status.name : "" }}
          </div>
          <div
            v-else-if="item.status.name == '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]"
          >
            {{ item.status ? item.status.name : "" }}
          </div>
          <div
            v-else-if="item.status.name == '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]"
          >
            {{ item.status ? item.status.name : "" }}
          </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]"
          >
            {{ item.status ? item.status.name : "" }}
          </div>
        </div> -->
        </div>

        <div class="tw-mb-[8px] xl:tw-mb-[10px]">
          <nuxt-link :to="localePath('/exhibition/' + item.id)">
            <div
              class="tw-line-clamp-3 md:tw-line-clamp-2 xl:tw-line-clamp-1 tw-text-base-primary tw-text-[14px] tw-font-medium md:tw-font-bold md:tw-text-[18px]"
            >
              {{ item.name }}
            </div>
          </nuxt-link>
        </div>
        <div
          v-if="$i18n.locale == 'zh-tw'"
          v-show="item.short_name != null"
          class="tw-mb-[8px] xl:tw-mb-[10px]"
        >
          <nuxt-link :to="localePath('/exhibition/' + item.id)">
            <div
              class="tw-line-clamp-3 md:tw-line-clamp-2 xl:tw-line-clamp-1 tw-text-base-primary tw-text-[14px] tw-font-medium md:tw-font-bold md:tw-text-[18px]"
            >
              {{ item.short_name }}
            </div>
          </nuxt-link>
        </div>
        <div
          class="tw-text-[14px] tw-font-normal tw-mb-[8px] md:tw-text-[16px] xl:tw-mb-[4px]"
        >
          <nuxt-link
            class="tw-text-neutrals-800"
            :to="localePath(`/exhibition?region=${item.region.id}`)"
            >{{
              item.region.name == null ? "" : item.region.name + "．"
            }}</nuxt-link
          >
          <nuxt-link
            class="tw-text-neutrals-800"
            :to="localePath(`/exhibition?country=${item.country.id}`)"
            >{{
              item.country.name == null ? "" : item.country.name + "．"
            }}</nuxt-link
          >
          <nuxt-link
            class="tw-text-neutrals-800"
            :to="localePath(`/exhibition?city=${item.city.id}`)"
            >{{ item.city.name == null ? "" : item.city.name }}</nuxt-link
          >
        </div>
        <div class="tw-hidden md:tw-block md:tw-mb-[8px] xl:tw-mb-[10px]">
          <div class="tw-flex tw-flex-row tw-items-center">
            <div class="tw-text-[14px] tw-text-primary-1 tw-mr-[4px]">
              {{ item.rating }}
            </div>
            <img src="~/assets/svg/start.svg" class="tw-w-[14px]" alt="" />
            <div class="tw-text-[14px] tw-text-neutral-600 tw-ml-[8px]">
              ({{ item.reviewCount ? item.reviewCount : "0" }} reviews)
            </div>
          </div>
        </div>
        <div>
          <div
            v-if="item.categories != null"
            class="md:tw-flex md:tw-flex-row md:tw-items-center tw-mb-[8px]"
          >
            <div
              v-for="(item, index) in item.categories"
              v-show="index < 1"
              :key="index"
              class="tw-bg-[#f6f6f6] tw-w-fit tw-rounded-[10px] tw-px-[10px] tw-py-[5px] tw-text-[14px] tw-mr-[10px]"
            >
              <nuxt-link
                class="tw-text-neutrals-800"
                :to="localePath('/exhibition?category=' + item.id)"
                >{{ item.name }}</nuxt-link
              >
            </div>
            <div
              class="tw-text-[12px] tw-text-complementary-1"
              v-if="item.categories.length > 1"
            >
              More ＋
            </div>
          </div>
        </div>
        <div
          class="tw-hidden xl:tw-block xl:tw-line-clamp-2 tw-text-neutrals-600 tw-text-[14px] xl:tw-mb-[14px]"
          v-if="!!item.about"
        >
          <div v-html="item.about"></div>
        </div>
        <div class="tw-text-[16px] tw-text-base-primary md:tw-text-[18px]">
          {{ formatDate(item.startdate) + " - " + formatDate(item.enddate) }}
        </div>
      </div>
    </div>
    <!-- 電腦版save exhibition -->
    <div
      class="tw-hidden md:tw-cursor-pointer md:tw-block"
      @click="onToggleFavorite"
    >
      <div v-if="item.saved">
        <img
          src="~/assets/svg/bookmark.svg"
          class="tw-w-[24px] md:tw-w-[28px]"
          alt=""
        />
      </div>
      <div v-else>
        <img
          src="~/assets/svg/bookmark_outline.svg"
          class="tw-w-[24px] md:tw-w-[28px]"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
import CardStatus from "~/components/exhibition/CardStatus.vue";
import { formatDate, dateCountDown } from "~/utils/assist";
import { ExhibitCardStatus, needLeftTagStatus } from "~/utils/constant";

export default {
  name: "ExhibitionListCard",
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  components: {
    CardStatus,
  },
  data: () => ({
    StatusMap: ExhibitCardStatus,
  }),
  methods: {
    formatDate,
    dateCountDown,
    needLeftTagStatus,
    onToggleFavorite(id) {
      if (this.$auth.loggedIn) {
        // this.$axios
        //   .put(
        //     `/member/exhibitions?jwt=${
        //       this.$auth.$storage.getUniversal("jwt")
        //         ? this.$auth.$storage.getUniversal("jwt").token
        //         : ""
        //     }&exhibition_id=${this.item.id}&delete=${
        //       this.item.saved ? this.item.saved : false
        //     }`
        //   )
        //   .then((result) => {
        //     if (result.data.message == "successfully unsaved exhibition") {
        //       this.item.saved = false;
        //     } else if (result.data.message == "successfully saved exhibition") {
        //       this.item.saved = true;
        //     }
        //     this.$emit("toggle-favorite", {
        //       id: this.item.id,
        //       saved: this.item.saved,
        //     });
        //   })
        //   .catch((err) => {
        //     console.log(err);
        //   });
        // this.$nextTick(() => {
        //   this.$forceUpdate();
        // });
      } else {
        this.$router.push(this.localePath("/user"));
      }
    },
  },
};
</script>

<style scoped lang="scss">
.exhibit-card {
  max-width: 836px;
  &.disabled .card__right {
    opacity: 0.5;
  }
}

.exhibit-title {
  position: relative;
  font-weight: bold;
  color: #232323;
  word-break: break-word;

  .bookmark-tag {
    position: absolute;
    color: $primary-light-orange;
    right: 0;
    top: 0.5em;
  }
}

.status-tag {
  position: absolute;
  top: 16px;
  left: 20px;
}

.recommend-tag {
  border: 1px solid $primary-light-orange;
  max-width: 108px !important;

  img {
    width: 11px;
    height: 12px;
  }
}

.category-tag {
  border: 1px solid #f7ede4;
  height: 16px;
}

.last-dates {
  color: #ef5a5a;
}

a {
  text-decoration: none;
}
</style>