ShowEasyFrontEnd/FrontEnd/pages/exhibition/_id.vue

<template>
  <div
    class="exhibition-content tw-grid tw-grid-cols-1 tw-gap-[30px] tw-mt-[20px] tw-mb-[60px] md:tw-px-[30px] md:tw-mt-[30px] xl:tw-px-[60px] xl:tw-max-w-screen-xl xl:tw-mx-auto xl:tw-grid-cols-[auto_364px]">
    <!-- {{ relatedservicelist.category }} 有問題-->
    <mobileFixTopBar ref="stickySwiper" :fixBar="fixBar" :currStep="currStep" :list="fixBarList"></mobileFixTopBar>

    <section class="section1 tw-px-[30px] md:tw-px-0 xl:tw-w-full xl:tw-col-span-2">
      <ExhibitionBannerArea :exhibition="exhibition"></ExhibitionBannerArea>
    </section>
    <section class="section2 tw-px-[30px] md:tw-px-0 xl:tw-pr-[30px] xl:tw-col-start-1 xl:tw-row-start-2">
      <!-- <Breadcrumbs class="tw-px-0 md:tw-mb-[22px]"></Breadcrumbs> 有問題-->
      <div class="tw-hidden md:tw-block">
        <div class="md:tw-h-[48px] md:tw-grid md:tw-grid-cols-3 md:tw-gap-[12px]">
          <a :href="exhibition.website" :target="exhibition.website == '#' ? '_self' : '_blank'">
            <div
              class="tw-bg-[#F6F6F6] tw-w-full tw-text-neutrals-800 elevation-0 tw-px-[34px] tw-py-[12px] tw-float-left tw-text-[16px]">
              <unicon name="globe" class="float-left mr-3" />
              <span>{{ $t("Official Website") }}</span>
            </div>
          </a>
          <a :href="
            'https://www.facebook.com/share.php?u=' +
            this.currentDomain +
            this.$route.fullPath
          " target="_blank">
            <div
              class="tw-bg-[#F6F6F6] tw-w-full tw-text-neutrals-800 elevation-0 tw-px-[34px] tw-py-[12px] tw-float-left tw-text-[16px]">
              <unicon name="facebook-f" class="float-left mr-3" />
              <span class="mt-n2">{{ $t("Share with friends") }}</span>
            </div>
          </a>
          <div @click="toggleFavorite"
            class="tw-bg-[#F6F6F6] tw-w-full tw-text-neutrals-800 elevation-0 tw-px-[34px] tw-py-[12px] tw-float-left tw-text-[16px]">
            <v-icon class="mr-2" color="neutrals darken-5">{{ saved? "mdi-heart": "mdi-heart-outline" }}
            </v-icon>
            <span>{{ $t("Follow Event") }}</span>
          </div>

        </div>
      </div>
    </section>
    <section class="step section3 tw-px-[30px] md:tw-px-0 xl:tw-pr-[30px] xl:tw-col-start-1 xl:tw-row-start-3">
      <ExhibitionIntro class="d-block" :exhibition="exhibition"></ExhibitionIntro>
    </section>
    <section >

      <div ref="about" id="about" data-step="about" class="step section3 tw-px-[30px] md:tw-px-0 xl:tw-pr-[30px] xl:tw-col-start-1 xl:tw-row-start-3">
        <ExhibitionIntro class="d-block" :exhibition="exhibition"></ExhibitionIntro>
      </div>

    </section>

    <section class="section4 tw-ml-[12px] md:tw-ml-0 md:tw-px-0 xl:tw-col-start-1 xl:tw-row-start-4">
      <ExhibitionAD v-if="ads" :items="ads"></ExhibitionAD>
    </section>
    <section class="section5 tw-px-[30px] md:tw-px-0 xl:tw-col-start-1 xl:tw-row-start-5">
      <div v-if="relatedserviceShow">
        <h3 ref="relatedServices" id="relatedServices" data-step="relatedServices" class="step md:tw-text-[20px]">
          <two-dots class="tw-mr-7" />{{ $t("Related Services") }}
        </h3>
        <RelatedServicesSwiper :getCategory="getCategory" class="tw-mb-[30px] xl:tw-max-w-[822px]"
          @categoryid="getCategoryId" @getAllServiceList="getAllService" @test="testtest"></RelatedServicesSwiper>
        <template v-for="(item, index) in relatedservicelist">
          <RelatedServices v-if="index <= 2" :key="index" :relatedservice="item"
            :relatedservicelist="relatedservicelist" class="tw-mb-[20px] md:tw-mb-[30px]">
          </RelatedServices>
        </template>
        <button
          class="tw-body-3 tw-text-primary-1 tw-w-full tw-py-[10px] tw-justify-center tw-flex tw-flex-row tw-items-center">
          <nuxt-link v-if="getcategoryid" :to="localePath(getcategoryid)" target="_blank"
            class="tw-mr-[16px] hover:tw-text-primary-1">
            {{ $t('See more') }}
          </nuxt-link>
          <nuxt-link v-else :to="localePath('/service')" target="_blank" class="tw-mr-[16px] hover:tw-text-primary-1">
            {{ $t('See more') }}
          </nuxt-link>

          <img src="~/assets/svg/seeMore.svg" alt="" />
        </button>
      </div>

      <div ref="photoGallery" id="photoGallery" data-step="photoGallery"
        v-show="exhibition.gallery.length > 0 || exhibition.videos.length > 0" :class="['tw-mb-10 step']">
        <h3 class="md:tw-text-[20px]">
          <two-dots class="mr-7" />{{ $t("Photo & Video Gallery") }}
        </h3>
        <ExhibitionPhotoVideoGallery class="mt-lg-13 px-n7 mt-7"
          v-if="exhibition.gallery.length > 0 || exhibition.videos.length > 0" :exhibition="exhibition" />
      </div>
      <div ref="venue" id="venue" data-step="venue" v-show="exhibition.venues && exhibition.venues.length > 0"
        :class="['tw-mb-10 step']">
        <h3 class="md:tw-text-[20px]">
          <two-dots class="mr-7" />{{ $t("Venue") }}
        </h3>
        <ExhibitionVenue class="mt-lg-13 mt-7" v-if="exhibition.venues && exhibition.venues.length > 0"
          :exhibition="exhibition" />
      </div>
      <div ref="exhibitProfile" id="exhibitProfile" data-step="exhibitProfile" v-show="exhibition.profile != ''"
        :class="['tw-mb-10 step']">
        <h3 class="md:tw-text-[20px]">
          <two-dots class="mr-7" />{{ $t("Exhibit Profile") }}
        </h3>
        <ExhibitionExhibitProfile class="mt-lg-13 mt-7" :exhibition="exhibition" />
      </div>
      <div ref="detailedDescription" id="detailedDescription" data-step="detailedDescription" :class="['step']"
        v-show="exhibition.description != ''">
        <h3 class="md:tw-text-[20px]">
          <two-dots class="mr-7" />{{ $t("Detailed Description") }}
        </h3>

        <ExhibitionDetailDescription class="mt-lg-13 mt-7" :exhibition="exhibition" />
      </div>
    </section>
    <!-- <section class="section6 tw-px-[30px] md:tw-px-0 xl:tw-col-span-2 xl:tw-row-start-6">
      <h3>
        <two-dots class="step tw-mr-7" />{{ $t("You might like ...") }}
      </h3>
      <v-slide-group>
        <template v-for="(item, i) in exhibition.recommended">
          <v-slide-item v-if="exhibition.recommended" :key="i">
            <nuxt-link :to="localePath('/exhibition/' + item.id)">
              <ExhibitionYouMightLike class="float-left" :item="item" />
            </nuxt-link>
          </v-slide-item>
        </template>
      </v-slide-group>
    </section> -->
    <section class="section7 tw-hidden xl:tw-block xl:tw-row-start-2 xl:tw-row-end-6">
      <sideBarMenu :fixBarList="fixBarList" :currStep="currStep"></sideBarMenu>
    </section>
  </div>
</template>

<script>
import ExhibitionBannerArea from "@/components/exhibition/ExhibitionBannerArea";
import ExhibitionIntro from "@/components/exhibition/ExhibitionIntro";
import ExhibitionReviews from "@/components/exhibition/ExhibitionReviews";
import ExhibitionPhotoVideoGallery from "@/components/exhibition/ExhibitionPhotoVideoGallery";
import Breadcrumbs from "@/components/Breadcrumbs";
import TwoDots from "@/components/TwoDots";
import ExhibitionAD from "@/components/exhibition/ExhibitionAD";
import ExhibitionYouMightLike from "@/components/exhibition/ExhibitionYouMightLike";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import { scrollama } from "scrollama";
import SeeMoreDetailDescription from "@/components/exhibition/SeeMoreDetailDescription.vue";
import RelatedServices from "@/components/service/RelatedServicesCard.vue";
import RelatedServicesSwiper from "@/components/swiper/relatedService.vue";
import mobileFixTopBar from "@/components/swiper/mobileFixTopBar.vue";
import sideBarMenu from "@/components/service/content/sideBarMenu.vue";
import { CornerDownLeftIcon } from "vue-feather-icons";
export default {
  auth: false,
  name: "ExhibitionContent",
  components: {
    Breadcrumbs,
    ExhibitionAD,
    ExhibitionBannerArea,
    ExhibitionIntro,
    ExhibitionReviews,
    ExhibitionPhotoVideoGallery,
    ExhibitionYouMightLike,
    Swiper,
    SwiperSlide,
    scrollama,
    TwoDots,
    SeeMoreDetailDescription,
    RelatedServices,
    RelatedServicesSwiper,
    mobileFixTopBar,
    sideBarMenu,
  },
  meta: {
    pageName: "Exhibition content",
  },
  head() {
    return {
      title: this.exhibition.ExhibitionName,
      meta: [
        {
          name: this.exhibition.ExhibitionName,
          content: this.exhibition.description,
        },
        { hid: "og:title", name: "og:title", content: this.exhibition.name },
        { hid: "og:image", name: "og:image", content: this.exhibition.logo },
        {
          hid: "og:url",
          name: "og:url",
          content: this.currentDomain + this.$route.fullPath,
        },
        {
          hid: "og:description",
          name: "og:description",
          content: this.exhibition.description,
        },
        { hid: "og:type", name: "og:type", content: "website" },
        // other meta
      ],
    };
  },
  data() {
    return {
      windowHeight: 0,
      currentDomain: "https://www.showeasy.com",
      apiUrl: process.env.SERVICE_CONSOLE,
      list: [],
      navControl: {
        ad: true,
        nav: false,
        mobnav: false,
      },
      ads: [],
      exhibitionID: "",
      tab: "0",
      saved: false,
      Favorite: {},
      favoriteSet: new Set(),
      exhibition: {
        id: null,
        name: "",
        enname: "",
        subtitle: null,
        region: {},
        country: {},
        city: {},
        logo: "",
        banner: null,
        startdate: "",
        enddate: "",
        status: "",
        website: "",
        isRecommend: null,
        isLiked: null,
        rating: 0,
        reviewCount: null,
        exhibitors: "",
        visitors: "",
        internalexhibitors: null,
        intVisitors: 0,
        area: null,
        showstatusid: 100,
        about: "",
        profile: "",
        description: "",
        shortName: null,
        frequency: {},
        online: {},
        organizers: [],
        videos: [],
        gallery: {},
        venues: [],
        categories: [],
        subcategories: [],
      },
      relatedserviceShow: false,
      relatedservicelist: [],
      getservicecategory: [],
      seemore: false,
      getCategory: [],
      getcategoryid: "",
      testcategory: "",
      currStep: null,
      fixBar: false,
      fixBarList: [],

    };
  },
  async created() {
    this.getExhibitionCard();
    this.getAdList();
    this.getFavorite();
    // await this.getServiceCategory();
    // await this.getCategorySwiperList();
    // await this.getRelatedServiceList();
    // await this.checkRelatedService();
  },
  async beforeCreate() {

  },
  mounted() {
    let vm = this;
    vm.$nextTick(function () {
      vm.list = [
        /*  {
            url: "#ExhibitionHighlightReview",
            name: "Highlight Review",
            isShow:false,
          },
          {
            url: "#ExhibitionRelatedServices",
            name: "Related Services",
            isShow:false,
          },*/
        {
          url: "#ExhibitionIntro",
          name: "Intro",
          isShow:
            this.exhibition.about.length > 0 
              ? true
              : false,
        },
        {
          url: "#ExhibitionPhotoVideoGallery",
          name: "Photo & Video Gallery",
          isShow:
            this.exhibition.gallery.length > 0 ||
              this.exhibition.videos.length > 0
              ? true
              : false,
        },
        {
          url: "#ExhibitionVenue",
          name: "Venue",
          isShow:
            this.exhibition.venues && this.exhibition.venues.length > 0
              ? true
              : false,
        },
        {
          url: "#ExhibitionExhibitProfile",
          name: "Exhibit Profile",
          isShow: this.exhibition.profile ? true : false,
        },
        {
          url: "#ExhibitionDetailDescription",
          name: "Detailed Description",
          isShow: this.exhibition.description ? true : false,
        },
        /*{
            url: "#ExhibitionReviews",
            name: "Reviews",
            isShow:false,
          },*/
      ];
      // instantiate the scrollama
      const scrollama = require("scrollama");
      const scroller = scrollama();
      // setup the instance, pass callback functions
      scroller
        .setup({
          step: ".exhibition-content .step",
          offset: 0.6,
        })
        .onStepEnter((response) => {
          // { element, index, direction }
          vm.currStep = response.element.id;
          if (response.index > 3) {
            vm.$refs.stickySwiper.slideTo(4);
          } else {
            vm.$refs.stickySwiper.slideTo(0);
          }
          if (response.index >= 1) {
            vm.fixBar = true;
          } else {
            vm.fixBar = false;
          }
        })
        .onStepExit((response) => {
          // { element, index, direction }
          vm.currStep = response.element.id;
          if (response.index >= 1) {
            vm.fixBar = true;
          } else {
            vm.fixBar = false;
          }
        });
    });
  },
  watch: {
    relatedservicelist: {
      handler: function () {
        if (this.relatedservicelist) {
          this.relatedservicelist.forEach((item) => {
            this.serviceListCategory = item.category;

            if (this.getservicecategory) {
              this.getservicecategory.forEach((category) => {
                if (item.category == category.ids[0]) {
                  item.category = category.lang_text;
                }
              });
            }
          });
        }
      },
    },
  },

  methods: {
    getExhibitionCard() {

      this.exhibitionID = this.$route.params.id;

      this.$axios
        .get(
          `/trending/api/Exhibition/Exhibition?Lang=${this.$i18n.localeProperties["langQuery"]}` +
          `&ExhibitionID=${this.exhibitionID}`
        )
        .then((result) => {

          if (result && result.data && result.data.DATA && result.data.DATA.rel) { 

            let exhib = result.data.DATA.rel;
            this.exhibition.id = exhib.ExhibitionID;
            this.exhibition.name = exhib.ExhibitionName;
            this.exhibition.enname = exhib.ExhibitionENName;
            this.exhibition.subtitle = "";
            this.exhibition.region.name = exhib.Region.RegionName;
            this.exhibition.country.name = exhib.Country.CountryName;
            this.exhibition.city.name = exhib.City.CityName;
            this.exhibition.logo = exhib.Logo;
            this.exhibition.banner = "";
            this.exhibition.startdate = exhib.StartDate;
            this.exhibition.enddate = exhib.EndDate;
            this.exhibition.status = exhib.Status;
            this.exhibition.website = exhib.Website;
            this.exhibition.isRecommend = exhib.IsRecommend;
            this.exhibition.isLiked = "";
            this.exhibition.rating = "";
            this.exhibition.reviewCount = "";
            this.exhibition.exhibitors = exhib.ExhibitorCount;
            this.exhibition.visitors = exhib.VisitorCount;
            this.exhibition.internalexhibitors = exhib.IntVisitorCount;
            this.exhibition.intVisitors = exhib.IntVisitorCount;
            this.exhibition.area = exhib.ExhibSize;
            this.exhibition.showstatusid = "";
            this.exhibition.about = exhib.Intro;
            this.exhibition.profile = exhib.Profile;
            this.exhibition.description = exhib.Detail;
            this.exhibition.shortName = exhib.AbbreviatedName;
            this.exhibition.frequency = exhib.Frequency;
            this.exhibition.online = exhib.IsVirtualEvent;
            this.exhibition.organizers = exhib.Organizers;
            this.exhibition.videos = exhib.Videos;
            this.exhibition.gallery = exhib.Images;
            this.exhibition.venues = exhib.Venues;
            this.exhibition.categories = exhib.MainCategories;
            this.exhibition.subcategories = exhib.SubCategories;

            this.setSideBarList();
            this.setFavorite();

          }

        })
        .catch((err) => {
          console.log(err);
        });

    },
    getAdList() {

      this.ads = [{
        image: require('/assets/img/thems/Frame33.png')
      }, {
        image: require('/assets/img/thems/Frame33.png')
      }, {
        image: require('/assets/img/thems/Frame33.png')
      }]

    },
    setSideBarList() {

      if (this.relatedservicelist.length > 0) {
        this.fixBarList.push({ id: "relatedServices", title: "Related Services", show: true });
      }

      if (this.exhibition.about.length > 0 ) {
        this.fixBarList.push({ id: "about", title: "Intro", show: true });
      }

      if (this.exhibition.videos.length > 0 || this.exhibition.gallery.length > 0) {
        this.fixBarList.push({ id: "photoGallery", title: "Photo & Video Gallery", show: true });
      }

      if (this.exhibition.venues.length > 0) {
        this.fixBarList.push({ id: "venue", title: "Venue", show: true });
      }

      if (this.exhibition.profile) {
        this.fixBarList.push({ id: "exhibitProfile", title: "Exhibit Profile", show: true });
      }

      if (this.exhibition.description) {
        this.fixBarList.push({ id: "detailedDescription", title: "Detailed Description", show: true });
      }



    },
    introCheck(entries, observer, isIntersecting) {
      this.navControl.mobnav = !isIntersecting;
    },
    checkNavBlock(entries, observer, isIntersecting) {
      this.navControl.ad = isIntersecting;
    },
    navfix(entries, observer, isIntersecting) {
      this.navControl.nav = isIntersecting;
    },
    getFavorite() {

      this.favoriteSet.clear();

      if (this.$auth.loggedIn) {
        this.$axios.get(`/trending/api/Favorite/Favorites?Type=Exhibition`)
          .then((result) => {

            if(result && result.data && result.data.DATA && result.data.DATA.rel){
              
              let favoriteList = [];
              favoriteList = result.data.DATA.rel;

              favoriteList.forEach(item => {

                this.favoriteSet.add(item.ParentID);

              })

            }

          })
          .catch((err) => {
            console.log("getFavorite"+err);
          });

      }

    },
    setFavorite() {

      if (this.favoriteSet.size > 0 && this.$auth.loggedIn) {

        if (this.favoriteSet.has(this.exhibition.id)) {

          this.saved = true;

        }

      }

    },
    toggleFavorite() {
      if (this.saved) {
        this.saved = false;
        this.Favorite.IsFavorite = 'N';
      } else {
        this.saved = true;
        this.Favorite.IsFavorite = 'Y';
      }

      this.Favorite.Type = 'Exhibition';
      this.Favorite.ParentID = this.exhibition.id;

      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"));
      }
    },
    async getCategorySwiperList() {
      let langCode = this.$i18n.localeProperties["langQuery"];
      await this.$axios
        .get(
          `/service/category?lang_code=${langCode}`
        )
        .then((res) => {
          let categoryArray = [];
          let result = res.data;
          for (let i in result) {
            let obj = {
              ids: [result[i].id, result[i].service_category_id],
              lang_text: result[i].language_text[0].text
            }
            categoryArray.push(obj);
          }
          this.getCategory = categoryArray;
        })
        .catch((error) => console.log(error));
    },

    async getRelatedServiceList() {
      // &expo_id={this.$route.params.id}
      let vm = this;
      await this.$axios
        .get(
          `${this.apiUrl}/user-services/relative-services?counts=3&country=${this.exhibition.country.id}&city=${this.exhibition.city.id}&lang_code=${this.$i18n.localeProperties["langQuery"]}&expo_id=${this.$route.params.id}`
        )
        .then((res) => {
          this.relatedservicelist = res.data;
        })
        .catch((error) => console.log(error));
    },
    async getServiceCategory() {
      let langCode = this.$i18n.localeProperties["langQuery"];
      await this.$axios
        .get(
          `/service/category?lang_code=${langCode}`
        )
        .then((res) => {
          let categoryArray = [];
          let result = res.data;
          for (let i in result) {
            let obj = {
              ids: [result[i].id, result[i].service_category_id],
              lang_text: result[i].language_text[0].text
            }
            categoryArray.push(obj);
          }
          this.getservicecategory = categoryArray;
        })
        .catch((error) => console.log(error));
    },

    getAllService() {
      let vm = this;
      this.$axios
        .get(
          `${this.apiUrl}/user-services/relative-services?counts=3&country=${this.exhibition.country.id}&city=${this.exhibition.city.id}&lang_code=${this.$i18n.localeProperties["langQuery"]}&expo_id=${this.$route.params.id}`
        )
        .then((res) => {
          this.relatedservicelist = res.data;
        })
        .catch((error) => console.log(error));
    },

    getCategoryId(data) {
      this.getcategoryid = data;
    },

    testtest(data) {
      this.testcategory = data;
      this.serviceList();
    },

    serviceList() {
      this.$axios
        .get(
          `${this.apiUrl}/user-services/relative-services?counts=3&country=${this.exhibition.country.id}&city=${this.exhibition.city.id}&lang_code=${this.$i18n.localeProperties["langQuery"]}&service_category=${this.testcategory}&expo_id=${this.$route.params.id}`
        )
        .then((res) => {
          this.relatedservicelist = res.data;
        })
        .catch((error) => console.log(error));
    },
    checkRelatedService() {
      this.fixBarList = [
        { id: "highlightReview", title: "Highlight Review", show: false },
        { id: "relatedServices", title: "Related Services", show: false },
        {
          id: "photoGallery",
          title: "Photo & Video Gallery",
          show:
            this.exhibition.gallery.length > 0 ||
              this.exhibition.videos.length > 0
              ? true
              : false,
        },
        {
          id: "venue",
          title: "Venue",
          show: this.exhibition.venues.length > 0 ? true : false,
        },
        {
          id: "exhibitProfile",
          title: "Exhibit Profile",
          show: this.exhibition.profile ? true : false,
        },
        {
          id: "detailedDescription",
          title: "Detailed Description",
          show: this.exhibition.description ? true : false,
        },
        { id: "reviews", title: "Reviews", show: false },
      ];
      if (this.relatedservicelist.length > 0) {
        this.relatedserviceShow = true;
        this.fixBarList = [
          { id: "highlightReview", title: "Highlight Review", show: false },
          { id: "relatedServices", title: "Related Services", show: true },
          {
            id: "photoGallery",
            title: "Photo & Video Gallery",
            show:
              this.exhibition.gallery.length > 0 ||
                this.exhibition.videos.length > 0
                ? true
                : false,
          },
          {
            id: "venue",
            title: "Venue",
            show: this.exhibition.venues.length > 0 ? true : false,
          },
          {
            id: "exhibitProfile",
            title: "Exhibit Profile",
            show: this.exhibition.profile ? true : false,
          },
          {
            id: "detailedDescription",
            title: "Detailed Description",
            show: this.exhibition.description ? true : false,
          },
          { id: "reviews", title: "Reviews", show: false },
        ];
      }
    }
  },
};
</script>

<style lang="scss" scoped>

</style>