ShowEasyFrontEnd/FrontEnd/components/exhibition/ExhibitionListCard.vue

<template>
  <div class="tw-mb-[20px]">
    <div
      class="tw-grid xl:tw-grid-cols-[auto_28px] tw-bg-white tw-border-solid tw-border tw-border-neutrals-200 tw-rounded-[20px] md:tw-p-[20px]">
      <div class="tw-grid tw-grid-cols-[102px_auto] tw-gap-[10px] tw-p-[10px] md:tw-grid-cols-[160px_auto]">
        <div class="tw-bg-primary-brigh">
          <img src="~/assets/svg/bookmark_outline.svg" class="tw-mb-[30px] md:tw-hidden" alt="" />

          <!-- exhibition status -->
          <div v-if="item.ExhibStatus != null && item.ExhibStatus != ''">
            <div v-if="item.ExhibStatus == 'Upcoming'"
              class="tw-hidden tw-w-fit tw-body-5 tw-bg-white tw-border tw-border-solid tw-border-primary-1 tw-text-primary-1 tw-rounded-[8px] tw-px-[10px] tw-py-[4px] md:tw-block md:tw-mb-[10px] md:tw-text-[14px]">
              {{ $t(item.ExhibStatus) }}
            </div>
            <div v-else-if="item.ExhibStatus == 'Ongoing'"
              class="tw-hidden tw-w-fit tw-body-5 tw-bg-white tw-border tw-border-solid tw-border-complementary-1 tw-text-complementary-1 tw-rounded-[8px] tw-px-[10px] tw-py-[4px] md:tw-block md:tw-mb-[10px] md:tw-text-[14px]">
              {{ $t(item.ExhibStatus) }}
            </div>
            <div v-else-if="item.ExhibStatus == 'Finished'"
              class="tw-hidden tw-w-fit tw-body-5 tw-bg-white tw-border tw-border-solid tw-border-neutrals-500 tw-text-neutrals-500 tw-rounded-[8px] tw-px-[10px] tw-py-[4px] md:tw-block md:tw-mb-[10px] md:tw-text-[14px]">
              {{ $t(item.ExhibStatus) }}
            </div>
            <div v-else-if="item.ExhibStatus == 'Cancelled'"
              class="tw-hidden tw-w-fit tw-body-5 tw-bg-white tw-border tw-border-solid tw-border-error-default tw-text-error-default tw-rounded-[8px] tw-px-[10px] tw-py-[4px] md:tw-block md:tw-mb-[10px] md:tw-text-[14px]">
              {{ $t(item.ExhibStatus) }}
            </div>
            <div v-else-if="item.ExhibStatus == 'Postponed'"
              class="tw-hidden tw-w-fit tw-body-5 tw-bg-error-default tw-border tw-border-solid tw-border-error-default tw-text-white tw-rounded-[8px] tw-px-[10px] tw-py-[4px] md:tw-block md:tw-mb-[10px] md:tw-text-[14px]">
              {{ $t(item.ExhibStatus) }}
            </div>
            <div v-else
              class="tw-hidden tw-w-fit tw-body-5 tw-bg-white tw-border tw-border-solid tw-text-white tw-rounded-[8px] tw-px-[10px] tw-py-[4px] md:tw-block md:tw-mb-[10px] md:tw-text-[14px]">
              {{ $t(item.ExhibStatus) }}
            </div>
          </div>

          <!-- exhibition logo -->
          <div v-if="item.Logo === ''">
            <img src="~/assets/svg/noLogo.svg" class="md:tw-w-[160px] md:tw-p-[10px]" alt="" />
          </div>
          <nuxt-link v-else :to="localePath('/exhibition/' + item.ExhibitionID)"><img :src="item.Logo"
              class="tw-py-[35px]" alt="" />
          </nuxt-link>

        </div>
        <div>
          <div>
            <div class="tw-flex tw-mb-[10px]">
              <div v-if="item.IsRecommend === 'Y'"
                class="tw-w-fit tw-mr-[5px] tw-grid tw-grid-cols-[12px_auto] tw-gap-[5px] tw-rounded-[8px] tw-items-center tw-border tw-border-solid tw-border-primary-light tw-bg-primary-1 tw-py-[4px] tw-px-[10px]">
                <img src="~/assets/svg/recommend.svg" alt="" />
                <div class="tw-body-5 tw-text-white md:tw-text-[14px] tw-whitespace-nowrap">{{ $t("exhibition.Recommended") }}</div>
              </div>
              <div
                class="tw-w-fit tw-body-5 tw-bg-white tw-whitespace-nowrap tw-border tw-border-solid tw-justify-between tw-border-complementary-1 tw-rounded-[8px] tw-text-complementary-1 tw-py-[4px] tw-px-[10px] md:tw-hidden">
                {{ $t(item.ExhibStatus) }}
              </div>
              <!-- <img src="~/assets/svg/bookmark_outline.svg" class="tw-hidden md:tw-block" alt="" /> -->
            </div>
          </div>

          <div>
            <div class="tw-body-4 tw-font-bold tw-mb-[8px] md:tw-text-[18px]">
              {{ item.ExhibitionName }}
            </div>

            <nuxt-link class="tw-text-neutrals-800" :to="localePath(`/exhibition?region=${item.RegionID}`)">{{
              item.RegionName == null ? "" : item.RegionName + "．"
            }}</nuxt-link>
            <nuxt-link class="tw-text-neutrals-800" :to="localePath(`/exhibition?country=${item.CountryID}`)">{{
              item.CountryName == null ? "" : item.CountryName + "．"
            }}</nuxt-link>
            <nuxt-link class="tw-text-neutrals-800" :to="localePath(`/exhibition?city=${item.CityID}`)">{{
              item.CityName
                == null ? "" : item.CityName
            }}</nuxt-link>

            <!-- star and review-->
            <!-- <div class="tw-hidden md:tw-block md:tw-mb-[8px]">
              <div class="tw-flex">
                <div class="tw-flex tw-items-center tw-mr-[10px]">
                  <div class="tw-text-primary-1 tw-text-[14px] tw-mr-[5px]">4.6</div>
                  <img src="~/assets/svg/star.svg" class="tw-w-[15px]" alt="">
                </div>
                <div class="tw-text-neutrals-600 tw-text-[14px]">
                  (344 reviews)
                </div>
              </div>
            </div> -->

            <div v-if="item.MainCategoryList.length > 0"
              class="tw-w-fit tw-p-[5px] tw-body-5 tw-rounded-[10px] tw-bg-[#f6f6f6] tw-text-hint tw-mb-[8px] md:tw-text-[14px] md:tw-px-[10px] md:tw-py-[6px]">

              <div v-for="(Category, index) in item.MainCategoryList">
                {{ Category.CategoryName }}
              </div>

            </div>
            <div class="tw-hidden xl:tw-block tw-h-[62px]">
              {{ item.Intro }}
            </div>
            <div class="tw-body-3 tw-text-black md:tw-text-[18px]">
              {{ formatDate(item.StartDate) + " - " + formatDate(item.EndDate) }}
            </div>
          </div>
        </div>

      </div>
      
      <!-- 電腦版save exhibition -->
      <div class="tw-hidden md:tw-cursor-pointer md:tw-block" @click="onToggleFavorite(item)">
        <div v-if="item.IsFavorite ==='Y' ">
          <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>

  </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,
    Favorite: {
      Type: "",
      ParentID: "",
      IsFavorite: "",
      Memo: ""
    }
  }),
  methods: {
    formatDate,
    dateCountDown,
    needLeftTagStatus,
    onToggleFavorite(item) {

      if (item.IsFavorite === 'Y') {
        item.IsFavorite = 'N';
      } else {
        item.IsFavorite = 'Y';
      }
      
      this.Favorite.IsFavorite = item.IsFavorite;
      this.Favorite.Type = 'Exhibition';
      this.Favorite.ParentID = item.ExhibitionID;

      if (this.$auth.loggedIn) {
        this.$axios
          .post(
            `/trending/api/Favorite/Favorite`, this.Favorite
          )
          .then((result) => {
            
          })
          .catch((err) => {
            console.log(err);
          });
      } 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>