<template>
  <div class="saveExhibition xl:tw-max-w-[1246px] xl:tw-mx-auto">
    <router-view v-if="isRouterAlive" />
    <div class="xl:tw-flex xl:tw-justify-between xl:tw-items-start">
      <userSidebar :userData="userData" :firstName="firstName" :lastName="lastName" class="tw-hidden xl:tw-block">
      </userSidebar>
      <!-- <div class="xl:tw-hidden"></div> -->
      <div class="tw-bg-white xl:tw-p-[30px] xl:tw-rounded-[20px] xl:tw-min-w-[900px] xl:tw-max-w-[900px]">
        <div class="tw-text-[20px] tw-font-bold tw-text-base-primary tw-mb-[20px] md:t24 md:tw-mb-[30px]">
          <two-dots class="tw-mr-[30px]"></two-dots>{{ $t("userProfile.savedExhibitions") }}
        </div>
        <div class="tw-text-[14px] tw-text-base-primary tw-mb-[10px]">
          {{ $t("userProfile.savedExhibitionsFilter") }}
        </div>
        <div>
          <select v-model="countrySelect" @change="countryOptionSelected($event)"
            class="tw-text-neutrals-500 tw-w-[196px] tw-border tw-border-solid tw-border-neutrals-200 tw-rounded-[10px] tw-px-[15px] tw-py-[9px] tw-head-body tw-outline-none tw-mr-[20px] focus:tw-border-primary-1 md:tw-text-[16px]">
            <option value="" selected>{{ $t("userProfile.allCountries") }}</option>
            <option v-for="(item, index) in countryOptions" :key="index" :value="item">
              {{ item.name }}
            </option>
          </select>

          <select v-model="statusSelect" @change="statusOptionSelected($event)"
            class="tw-text-neutrals-500 tw-w-[196px] tw-border tw-border-solid tw-border-neutrals-200 tw-rounded-[10px] tw-px-[15px] tw-py-[9px] tw-head-body tw-outline-none focus:tw-border-primary-1 md:tw-text-[16px]">
            <option value="" selected>{{ $t("userProfile.allStatus") }}</option>
            <option v-for="(item, index) in statusOptions" :key="index" :value="item">
              {{ item.name }}
            </option>
          </select>
        </div>
        <div v-if="exhibitionCardList.length == 0" class="tw-mt-[80px] md:tw-mt-[90px]">
          <img class="tw-flex tw-mx-auto tw-w-[160px]" src="~/assets/img/savedExhibitionEmpty.png" alt="" />
          <div class="tw-text-[16px] tw-text-neutrals-800 tw-w-fit tw-mx-auto tw-mb-[50px] md:tw-mb-[60px]">
            {{ $t("userProfile.noSavedExhibitions") }}
          </div>
          <nuxt-link :to="localePath('/')"
            class="tw-flex tw-text-[16px] tw-w-fit tw-bg-primary-1 tw-text-white tw-px-[16px] tw-py-[9px] tw-rounded-[12px] tw-mx-auto tw-mb-[37px] md:tw-mb-0">
            {{ $t("Explore with ShowEasy") }}
          </nuxt-link>
        </div>

        <div v-else class="tw-mt-[20px] md:tw-mt-[30px]">

          <div v-for="exhib in exhibitionCardList" :key="exhib.ExhibitionID">
            <ExhibitionListCard :item="exhib" @toggle-favorite="fetchNewExhibitionCardList"></ExhibitionListCard>
          </div>

          <div class="tw-mt-[34px] tw-flex tw-justify-end">
            <pagination :pageLength="pageLength" @update="updatePage"></pagination>
          </div>




        </div>
      </div>
    </div>
  </div>
</template>
<script>
import TwoDots from "@/components/TwoDots";
import ExhibitionListCard from "~/components/exhibition/ExhibitionListCard.vue";
import userSidebar from "@/components/user/userSidebar.vue";
import elementSelect from "@/components/newComponent/form/ElementSelect.vue";
import pagination from "@/components/newComponent/pagination/pagination.vue";

export default {
  name: "saveExhibition",
  layout: "profile",

  components: {
    TwoDots,
    ExhibitionListCard,
    userSidebar,
    elementSelect,
    pagination,
  },
  data() {

    return {

      firstName: "",
      lastName: "",
      userData: {},
      userCompanyId: [],
      userCompanyList: [],
      userAddNewCompanyList: [],

      yearOptions: [],
      monthOptions: [],
      dayOptions: [],

      yearSelect: "",
      monthSelect: "",
      daySelect: "",

      languageSelect: {
        en: "",
        zhtw: "",
      },

      phoneValid: false,

      isRouterAlive: true,



      countrySelect: "",
      statusSelect: "",

      currentPage: 1,
      itemsPerPage: 6,
      total: 0,
      selectedCountry: [],
      selectedSubCategory: [],
      selectedStatus: [],

      countryOptions: [],
      statusOptions: [],
      exhibitionCardList: [],


    };
  },
  async created() {

    this.fetchUserData();
    await this.fetchNewExhibitionCardList();
    await this.fetchCountryList();
    await this.fetchStatusList();

  },
  mounted() {
    this.yearOptions = Array.from(new Array(103), (val, index) =>
      (index + 1920).toString()
    );
    this.monthOptions = Array.from(new Array(13), (val, index) => {
      if (index < 10 && index > 0) {
        return "0" + index.toString();
      }
      if (index >= 10) {
        return index.toString();
      }
    });
    this.dayOptions = Array.from(new Array(32), (val, index) => {
      if (index < 10 && index > 0) {
        return "0" + index.toString();
      }
      if (index >= 10) {
        return index.toString();
      }
    });
    this.$nextTick(() => {
      window.addEventListener("resize", this.onResize);
    });
  },
  watch: {

  },
  computed: {

    result() {
      return this.total;
    },

    pageLength() {
      return Math.ceil(this.result / this.itemsPerPage);
    },
  },
  methods: {

    async fetchCountryList() {

      await this.$axios
        .get(
          `/trending/api/Favorite/ExhibitionCountryList?Lang=${this.$i18n.localeProperties["langQuery"]}`
        )
        .then((response) => {
          if (response && response.data && response.data.DATA && response.data.DATA.rel) {
            let data = response.data.DATA.rel

            if (data) {

              const countryList = data;
              this.countryOptions = countryList.map((item) => {

                return {
                  id: item.CountryID,
                  name: item.CountryName,
                };
              });

            }

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

    },

    async fetchStatusList() {

      await this.$axios
        .get(
          `/trending/api/Favorite/ExhibitionStatusList?Lang=${this.$i18n.localeProperties["langQuery"]}`
        )
        .then((response) => {
          if (response && response.data && response.data.DATA && response.data.DATA.rel) {
            let data = response.data.DATA.rel

            if (data) {

              const statusList = data;
              this.statusOptions = statusList.map((item) => {

                return {
                  id: item.Key,
                  name: item.Value,
                };
              });

            }

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

    },

    async fetchExhibitionListCard() {

      await this.$axios
        .get(
          `/trending/api/Favorite/ExhibitionList?Lang=${this.$i18n.localeProperties["langQuery"]}` +
          `&PageIndex=${this.currentPage}` +
          `&PageSize=${this.itemsPerPage}` +
          `&CountryIDs=${JSON.stringify(this.selectedCountry)}` +
          `&SubCategoryIDs=${JSON.stringify(this.selectedSubCategory)}` +
          `&Status=${JSON.stringify(this.selectedStatus)}`
        )
        .then((response) => {
          if (response && response.data && response.data.DATA && response.data.DATA.rel) {
            let data = response.data.DATA.rel

            if (data.DataList) {

              this.exhibitionCardList = [];
              this.total = data.Total;

              data.DataList.forEach(exhib => {

                exhib.IsFavorite = "Y";
                this.exhibitionCardList.push(exhib);

              });

            }

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

    },

    countryOptionSelected() {

      this.selectedCountry = [];

      if (this.countrySelect) {
        this.selectedCountry.push(this.countrySelect.id);
      }

      this.fetchNewExhibitionCardList();

    },

    statusOptionSelected() {

      this.selectedStatus = [];

      if (this.statusSelect) {
        this.selectedStatus.push(this.statusSelect.id);
      }

      this.fetchNewExhibitionCardList();

    },

    async fetchNewExhibitionCardList() {

      this.currentPage = 1;

      await this.fetchExhibitionListCard();

    },

    updatePage(value) {

      this.currentPage = value;
      window.scrollTo(0, 0);

      this.fetchExhibitionListCard();

    },
    patchUserData() {
      // if (this.width < 1366) {
      //   this.isEditInfoDialogActive = !this.isEditInfoDialogActive;
      // }

      if (this.$vuetify.breakpoint.name !== "xs") {
        this.userData.BirthDate = this.yearSelect + "-" + this.monthSelect + "-" + this.daySelect;

        if (this.userData.BirthDate.length < 10) {
          this.userData.BirthDate = null;

        }
      }

      if (this.languageSelect.en == true) {
        this.userData.LanguageID = "en-US";

      } else if (this.languageSelect.zhtw == true) {
        this.userData.LanguageID = "zh-TW";

      } else {
        this.userData.LanguageID = "null";

      }

      const patchData = JSON.parse(JSON.stringify(this.userData));
      // delete patchData.LoginLog;
      // delete patchData.UserCompany;
      // delete patchData.UserSocialRelation;
      // delete patchData.UserExhibition;
      this.$axios
        .post(
          `/trending/api/Members/Member`, patchData
        )
        .then((response) => {
          //console.log(JSON.stringify(response));
          this.successUpdate = !this.successUpdate;
          setTimeout(() => {
            this.successUpdate = !this.successUpdate;
          }, 1000);
          this.fetchUserData();
          //this.$auth.$storage.setUniversal("userPicture", patchData.MemberPicture);
          // this.$auth.$storage.setUniversal(
          //   "userLastName",
          //   patchData.LastName
          // );
          // this.$store.dispatch("updatePicture");
        })
        .catch((error) => {
          console.log(error);
        });
    },

    fetchUserData() {
      this.$axios
        .get(
          `/trending/api/Members/Info`
        )
        .then((response) => {
          //console.log(JSON.stringify(response));
          if (response && response.data && response.data.DATA && response.data.DATA.rel) {
            let data = response.data.DATA.rel
            if (data) {
              this.userData = data;
              this.firstName = this.userData.FirstName;
              this.lastName = this.userData.LastName;
              this.userData.Phone ? (this.phoneValid = true) : (this.phoneValid = false);

              if (this.userData.ArgumentID == "en-US") {
                this.languageSelect.en = true;

              } else if (this.userData.ArgumentID == "zh-TW") {
                this.languageSelect.zhtw = true;

              } else {
                this.languageSelect.en = "";
                this.languageSelect.zhtw = "";

              }

              if (
                this.userData.BirthDate && typeof this.userData.BirthDate === "object"

              ) {
                this.yearSelect = "";
                this.monthSelect = "";
                this.daySelect = "";

              } else {
                const space = this.userData.BirthDate.split("T");
                const date = space[0].split("-");
                this.yearSelect = date[0];
                this.monthSelect = date[1];
                this.daySelect = date[2];

              }
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    handleImageUpdate(pictureURL) {
      this.userData.picture = pictureURL;
      this.patchUserData();
      this.closeCropDialog();
    },

    logout() {
      this.$auth.$storage.removeUniversal("jwt");
      this.$auth.$storage.removeUniversal("userPicture");
      this.$auth.$storage.removeUniversal("userLastName");
      this.$auth.$storage.removeUniversal("userBeforePath");

      if (window.innerWidth < 1024) {
        this.$router.push(this.localePath("/"));
      } else {
        this.$router.push(this.localePath("/user"));
      }
      this.$auth.logout();
    },

  },
};
</script>

<style scoped lang="scss">
select {
  background-image: url("~/assets/svg/dropdownarrow.svg");
  width: auto;
  height: auto;
  background-position: right 12px center;
  background-repeat: no-repeat;
}
</style>
