<template>
  <div class="home-view">
    <Hero :slogan="slogan" :subslogan="subslogan" :populars="populars" :servicesSearchs="servicesSearchs"
      :servicesLocations="servicesLocations" :exhibitionsSearchs="exhibitionsSearchs"
      :exhibitionsLocations="exhibitionsLocations" :exhibitionsCategories="exhibitionsCategories" :banner="banner"
      :serviceKeywords="serviceKeywords" :exhibitionsKeywords="exhibitionsKeywords" />
    <centerMode :list="ads" v-if="ads.length"></centerMode>
    <!-- <AdBanner :item="apiData.ads" /> -->
    <section class="tw-px-[30px] xl:tw-px-[60px] tw-mt-[50px] md:tw-mt-[70px] xl:tw-max-w-[1366px] xl:tw-mx-auto">
      <h2 class="t18 tw-font-medium tw-text-primary-default tw-mb-[28px] md:tw-float-left md:t24 xl:t28">
        {{ $t("Highlight Exhibitions") }}
      </h2>
      <newHighlightExhibitions></newHighlightExhibitions>
    </section>
    <section class="tw-pl-[30px] xl:tw-px-[60px] tw-mt-[50px] md:tw-mt-[70px] xl:tw-max-w-[1366px] xl:tw-mx-auto"
      v-show="services.length > 0">
      <h2 class="t18 tw-font-medium tw-text-primary-default tw-mb-[8px] md:t24 xl:tw-float-left xl:t28">
        {{ $t("Trending Services") }}
      </h2>
      <TrendingService :services="services" />
    </section>
    <section class="tw-px-[30px] xl:tw-px-[60px] tw-mt-[50px] md:tw-mt-[70px] xl:tw-max-w-[1366px] xl:tw-mx-auto">
      <h2 class="t18 tw-font-medium tw-text-primary-default tw-mb-[24px] md:t24  xl:t28" v-show="themes.length > 0">
        {{ $t("Featured Exhibition Themes") }}
      </h2>
      <FeaturedExhibitonThemes :themes="themes" :title="themesTitle" />
    </section>

    <section class="tw-pl-[30px] xl:tw-px-[60px] tw-mt-[50px] md:tw-mt-[70px] xl:tw-max-w-[1366px] xl:tw-mx-auto">
      <h2 class="t18 tw-font-medium tw-text-primary-default tw-mb-[24px] md:t24  xl:t28">
        {{ $t("Trending Destination Services") }}
      </h2>
      <TrendingDestinationServices :themes="serviceThemes" :title="serviceThemesTitle">
      </TrendingDestinationServices>
    </section>
    <OtherInfo />
    <section class="tw-px-[30px] tw-mt-[50px] md:tw-mt-[95px] xl:tw-px-[60px] xl:tw-max-w-[1366px] xl:tw-mx-auto">
      <h2 class="t18 tw-font-medium tw-text-primary-default tw-mt-[25px] md:t24 xl:t28">
        {{ $t("Partnership") }}
      </h2>
      <Partnership v-if="partnershiplist.length > 0" :partnershiplist="partnershiplist"></Partnership>
    </section>
    <BottomInfo :collections="collections" />
    <CookieUnderModal />
  </div>
</template>

<script>
import Hero from "@/components/home/Hero";
// import AdBanner from "@/components/home/AdBanner";
import centerMode from "@/components/swiper/centerMode";
import newHighlightExhibitions from "@/components/home/newHighlightExhibitions.vue";
import TrendingService from "@/components/home/TrendingService";
import FeaturedExhibitonThemes from "@/components/home/FeaturedExhibitonThemes";
import TrendingDestinationServices from "@/components/home/TrendingDestinationServices";
import OtherInfo from "@/components/home/OtherInfo";
import Partnership from "@/components/home/Partnership";
import BottomInfo from "@/components/home/BottomInfo";
import CookieUnderModal from "@/components/home/CookieUnderModal";
import jwt_decode from "jwt-decode";
import { getData } from "~/utils/assist";
import { onMounted } from "vue";

export default {
  data() {
    return {
      title: '1',
      apiUrl: process.env.SERVICE_CONSOLE,
      slogan: 'A Better Event Journey',
      subslogan: 'Start your journey from ShowEasy, Make Your Show Easy！',
      populars: {
        search: ['Fastener','Automation','Computer','Sports','Medical'],
        service: ['Fastener','Automation','Computer','Sports','Medical']
      },
      servicesSearchs: [],
      servicesLocations: ['Taiwan','USA','Germany','Japan'],
      serviceKeywords: [],
      exhibitionsSearchs: ['Food Equipment','Machine Tool','Food Equipment','Machine Tool'],
      exhibitionsLocations: [],
      exhibitionsCategories: [{ subcategory: [], },],
      exhibitionsKeywords: [],
      banner: require('/assets/img/ExhibitionBanner.jpeg'),
      ads: [{
        image: require('/assets/img/thems/Frame33.png')
      },{
        image: require('/assets/img/thems/Frame33.png')
      },{
        image: require('/assets/img/thems/Frame33.png')
      }],
      services: [{
        id: '1',
        name: 'VISA Application (Vietnam)',
        price: '35',
        region: 0,
        country: 0,
        subcategory: 'VISA',
        rating: '5.4',
        reviews: '344',
        preview_image: require('~/assets/img/bookingInfoTest.png'),
        payment_currency: 'USD',
      },{
        id: '1',
        name: 'VISA Application (Vietnam)',
        price: '35',
        region: 0,
        country: 0,
        subcategory: 'VISA',
        rating: '5.4',
        reviews: '344',
        preview_image: require('~/assets/img/bookingInfoTest.png'),
        payment_currency: 'USD',
      },{
        id: '1',
        name: 'VISA Application (Vietnam)',
        price: '35',
        region: 0,
        country: 0,
        subcategory: 'VISA',
        rating: '5.4',
        reviews: '344',
        preview_image: require('~/assets/img/bookingInfoTest.png'),
        payment_currency: 'USD',
      },{
        id: '1',
        name: 'VISA Application (Vietnam)',
        price: '35',
        region: 0,
        country: 0,
        subcategory: 'VISA',
        rating: '5.4',
        reviews: '344',
        preview_image: require('~/assets/img/bookingInfoTest.png'),
        payment_currency: 'USD',
      }],
      themes: [{
        name: '',
        url: '/',
        image: require('~/assets/img/thems/Exhibiton-Themes-01.png')
      },{
        name: '',
        url: '/',
        image: require('/assets/img/thems/Exhibiton-Themes-02.png')
      },{
        name: '',
        url: '/',
        image: require('/assets/img/thems/Exhibiton-Themes-03.png')
      },{
        name: '',
        url: '/',
        image: require('/assets/img/thems/Exhibiton-Themes-04.png')
      }],
      themesTitle: '',
      serviceThemes: [{
        name: '',
        image: require('/assets/img/thems/Frame33.png')
      },{
        name: '',
        image: require('/assets/img/thems/Frame34.png')
      },{
        name: '',
        image: require('/assets/img/thems/Frame35.png')
      },{
        name: '',
        image: require('/assets/img/thems/Frame36.png')
      },{
        name: '',
        image: require('/assets/img/thems/Frame37.png')
      }],
      serviceThemesTitle: '',
      collections: [],
      partnershiplist: [{
        image: require('/assets/img/thems/pti01.png')
      },{
        image: require('/assets/img/thems/pti02.png')
      },{
        image: require('/assets/img/thems/pti03.png')
      },{
        image: require('/assets/img/thems/pti04.png')
      },{
        image: require('/assets/img/thems/pti05.png')
      },{
        image: require('/assets/img/thems/pti06.png')
      }],
    };
  },
  props: ["langChange"],
  name: "IndexPage",
  auth: false,
  head: {
    title: "ShowEasy-we make your show easy!",
  },
  components: {
    Hero,
    // AdBanner,
    centerMode,
    newHighlightExhibitions,
    TrendingService,
    FeaturedExhibitonThemes,
    TrendingDestinationServices,
    OtherInfo,
    Partnership,
    BottomInfo,
    CookieUnderModal,
  },
  async created() {
    // await this.getAds();
    // await this.getBanner();
    // await this.getSlogans();
    // await this.getPopulars();
    // await this.getServiceKeywords();
    // await this.getExhibitionsKeywords();
    // await this.getServiceHistory();
    // await this.getExhibitionsHistory();
    // await this.getServiceLocations();
    // await this.getExhibitionsLocations();
    // await this.getExhibitionsCategories();
    // await this.getExhibitionsCollections();
    // await this.getServices();
    // await this.getExhibitionsTheme();
    // await this.getServiceTheme();
    // await this.getPartnership();
    // if (this.$auth.loggedIn) {
    //   this.$store.dispatch("updatePicture");
    // }
  },
  watch: {
    currency: {
      handler: async function () {
        // await this.getServices();
      },
    },
  },
  computed: {
    currency() {
      return this.$store.getters.getCurrency;
    },
  },
  methods: {
    // async getSlogans() {
    //   await this.$axios
    //     .get(`/trending/slogans?lang=${this.$i18n.localeProperties["langQuery"]}`)
    //     .then((response) => {
    //       this.slogan = response.data.slogan;
    //       this.subslogan = response.data.subslogan;
    //     })
    //     .catch((error) => console.log(error));
    // },
    // async getPopulars() {
    //   await this.$axios
    //     .get(`/trending/search/popular?lang=${this.$i18n.localeProperties["langQuery"]}`)
    //     .then((response) => {
    //       this.populars = response.data;
    //     })
    //     .catch((error) => console.log(error));
    // },
    // async getBanner() {
    //   await this.$axios
    //     .get(`/trending/banner?lang=${this.$i18n.localeProperties["langQuery"]}`)
    //     .then((response) => {
    //       this.banner = response.data.banner;
    //     })
    //     .catch((error) => console.log(error));
    // },
    // async getAds() {
    //   await this.$axios
    //     .get(`/trending/ads?lang=${this.$i18n.localeProperties["langQuery"]}`)
    //     .then((response) => {
    //       this.ads = response.data.ads;
    //     })
    //     .catch((error) => console.log(error));
    // },
    // async getExhibitionsTheme() {
    //   await this.$axios
    //     .get(`/trending/themes/exhibitions?lang=${this.$i18n.localeProperties["langQuery"]}`)
    //     .then((response) => {
    //       this.themes = response.data.themes;
    //       this.themesTitle = response.data.title;
    //     })
    //     .catch((error) => console.log(error));
    // },
    // async getServiceTheme() {
    //   await this.$axios
    //     .get(`/trending/themes/services?lang=${this.$i18n.localeProperties["langQuery"]}`)
    //     .then((response) => {
    //       this.serviceThemes = response.data.themes;
    //       this.serviceThemesTitle = response.data.title;
    //     })
    //     .catch((error) => console.log(error));
    // },
    // async getServiceHistory() {
    //   await this.$axios
    //     .get(`/trending/services/search/history?lang=${this.$i18n.localeProperties["langQuery"]}`)
    //     .then((response) => {
    //       this.servicesSearchs = response.data.searches;
    //     })
    //     .catch((error) => console.log(error));
    // },
    // async getExhibitionsHistory() {
    //   await this.$axios
    //     .get(`/trending/exhibitions/search/history?lang=${this.$i18n.localeProperties["langQuery"]}`)
    //     .then((response) => {
    //       this.exhibitionsSearchs = response.data.searches;
    //     })
    //     .catch((error) => console.log(error));
    // },
    // async getServiceLocations() {
    //   await this.$axios
    //     .get(`/trending/services/locations?lang=${this.$i18n.localeProperties["langQuery"]}`)
    //     .then((response) => {
    //       this.servicesLocations = response.data.locations;
    //     })
    //     .catch((error) => console.log(error));
    // },
    // async getExhibitionsLocations() {
    //   await this.$axios
    //     .get(`/trending/exhibitions/locations?lang=${this.$i18n.localeProperties["langQuery"]}`)
    //     .then((response) => {
    //       this.exhibitionsLocations = response.data.locations;
    //     })
    //     .catch((error) => console.log(error));
    // },
    // async getExhibitionsCategories() {
    //   await this.$axios
    //     .get(
    //       `/t/exhibitions/categories?lang=${this.$i18n.localeProperties["langQuery"]}&sort=true`
    //     )
    //     .then((result) => {
    //       this.exhibitionsCategories = result.data.sort_results;
    //       this.exhibitionsCategories = this.exhibitionsCategories.map(
    //         (item) => {
    //           item.subcategories_list = item.subcategories_list.map(
    //             (children) => {
    //               return {
    //                 id: children.subcategory_id,
    //                 title: children.subcategory_name,
    //                 key: children.subcategory_name,
    //                 type: "subcategory",
    //               };
    //             }
    //           );
    //           return {
    //             id: item.categories_id,
    //             title: item.category_name,
    //             key: item.category_name,
    //             type: "category",
    //             subcategory: item.subcategories_list,
    //           };
    //         }
    //       );
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
    // async getExhibitionsCollections() {
    //   await this.$axios
    //     .get(`/trending/exhibitions/collections?lang=${this.$i18n.localeProperties["langQuery"]}`)
    //     .then((response) => {
    //       this.collections = response.data.collections;
    //     })
    //     .catch((error) => console.log(error));
    // },
    // async getServiceKeywords() {
    //   await this.$axios
    //     .get(`/trending/services/keywords?lang=${this.$i18n.localeProperties["langQuery"]}`)
    //     .then((response) => {
    //       this.serviceKeywords = response.data.keywords;
    //     })
    //     .catch((error) => console.log(error));
    // },
    // async getExhibitionsKeywords() {
    //   await this.$axios
    //     .get(`/trending/exhibitions/keywords?lang=${this.$i18n.localeProperties["langQuery"]}`)
    //     .then((response) => {
    //       this.exhibitionsKeywords = response.data.keywords;
    //     })
    //     .catch((error) => console.log(error));
    // },
    // async getServices() {
    //   // await this.$axios
    //   //   .get(`${this.apiUrl}/user-services/list?lang_code=${this.$i18n.localeProperties["langQuery"]}&currency=${this.currency}`)
    //   //   .then((response) => {
    //   //     this.services = response.data.sort((a, b) => b.view_counts - a.view_counts);
    //   //   })
    //   //   .catch((error) => console.log(error));
    // },
    // async getPartnership() {
    //   await this.$axios
    //     .get(`/trending/partnerships?lang=${this.$i18n.localeProperties["langQuery"]}`)
    //     .then((response) => {
    //       this.partnershiplist = response.data.partnerships;
    //     })
    //     .catch((error) => console.log(error));
    // },
  }
};
</script>
<style lang="scss" scoped>

</style>
