ShowEasyFrontEnd/FrontEnd/components/home/HighlightExhibitions.vue

<template>
  <!-- eslint-disable vue/no-use-v-if-with-v-for,vue/no-confusing-v-for-v-if -->
  <div class="highlight-exhibitions">
    <div class="computer hidden-sm-and-down">
      <Block :title="$t('Highlight Exhibitions')" :arrow="true" @rightArrowOnClick="handleRightArrowClick"
        @leftArrowOnClick="handleLeftArrowClick" :carousel="carousel" :carouselPagesNum="carouselPagesNum">
        <v-carousel v-model="carousel" hide-delimiter-background :show-arrows="false" class="px-0 mb-5">
          <v-carousel-item v-for="p in carouselPagesNum" :key="p">
            <v-container class="container-1366 pb-0">
              <v-row>
                <v-col class="pt-0 pb-5" cols="6" v-for="index in 6" :key="index">
                  <HightlightExhibitionsCard :item="exhibitions[index - 1 + (p - 1) * 6]"
                    v-if="index - 1 + (p - 1) * 6 < exhibitions.length" />
                </v-col>
              </v-row>
            </v-container>
          </v-carousel-item>
        </v-carousel>
      </Block>
    </div>

    <div class="tablet d-none d-sm-flex d-md-none">
      <v-container class="py-0">
        <v-row class="row1 mb-7 mt-10 ml-7" no-gutters>
          <v-col class="primary--text tw-body-1">
            {{ $t("Highlight Exhibitions") }}
          </v-col>
        </v-row>
        <v-sheet class="ml-7 mr-0 pl-0" max-width="3000" v-if="exhibitions">
          <v-slide-group center-active class="ml-0 pl-0">
            <v-slide-item v-for="index in Math.ceil(exhibitions.length / 5)" :key="index" class="me-7">
              <div>
                <HightlightExhibitionsCard v-for="item in 5" :key="item" :item="exhibitions[(index - 1) * 5 + item - 1]"
                  v-if="(index - 1) * 5 + item - 1 < exhibitions.length" class="mb-5" />
              </div>
            </v-slide-item>
          </v-slide-group>
        </v-sheet>
      </v-container>
    </div>
    <div class="phone hidden-sm-and-up">
      <v-container class="main-container">
        <div class="mb-7 mt-10 primary--text tw-text-[18px]">
          {{ $t("Highlight Exhibitions") }}
        </div>

        <v-row class="myGrid myGrid__2 Grid__column_gap__20 Grid__row_gap__20 mx-0">
          <v-col class="pa-0" v-for="(item, index) in exhibitions" :key="index" v-if="index < 6">
            <HighlightExhibitionsCardMobile :item="item"></HighlightExhibitionsCardMobile>
          </v-col>
        </v-row>

        <v-spacer class="d-flex justify-center">
          <v-btn :to="localePath('/exhibition')" v-if="exhibitions.length > 5"
            class="text-capitalize mt-10 px-10 mx-auto rounded-xl" outlined>
            {{ $t("see more") }}
          </v-btn>
        </v-spacer>
      </v-container>
    </div>
  </div>
</template>

<script>
import HightlightExhibitionsCard from "~/components/home/HightlightExhibitionsCard.vue";
import HighlightExhibitionsCardMobile from "~/components/home/HighlightExhibitionsCardMobile.vue";
import Block from "~/components/home/Block.vue";

export default {
  components: {
    HightlightExhibitionsCard,
    HighlightExhibitionsCardMobile,
    Block,
  },
  async fetch({ $axios, i18n }) {
    let langQuery = "?lang=" + i18n.localeProperties["langQuery"] + "&";
    // return await $axios
    //   .get("/trending/exhibitions" + langQuery)
    //   .then((res) => {
    //     console.log("asyncDatares");
    //     console.log(res);
    //     return { exhibitions: res.data.exhibitions };
    //   })
    //   .catch((err) => {
    //     console.error(err);
    //   });
  },
  data() {
    return {
      carousel: 0,
      carouselPagesNum: 3,
      exhibitions: [],
    };
  },
  async mounted() {
    let langQuery = "?lang=" + this.$i18n.localeProperties["langQuery"] + "&";
    // await this.$axios
    //   .get("/trending/exhibitions" + langQuery)
    //   .then((res) => {
    //     this.exhibitions = res.data.exhibitions;
    //   })
    //   .catch((err) => {
    //     console.error(err);
    //   });
    // this.$nextTick(() => {
    //   this.carouselPagesNum = Math.ceil(this.exhibitions.length / 6);
    //   if (this.exhibitions.length > 18) {
    //     this.exhibitions = this.exhibitions.slice(0, 18);
    //   }
    // });
  },
  methods: {
    // handleRightArrowClick(title_) {
    //   if (title_ == "Highlight Exhibitions") {
    //     this.carousel += 1;
    //   }
    // },
    handleRightArrowClick() {
      if (this.carousel != 1) {
        this.carousel++;
      }
    },
    handleLeftArrowClick() {
      if (this.carousel != 0) {
        this.carousel--;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.row1 {
  position: relative;
}

.right-arrow {
  position: absolute;
  top: 20%;
  right: -20px;
}

.arrow {
  border: 1px solid;
  padding: 10px 15px;
  border-radius: 10px;
  width: 50px;
}

.text {
  text-align: center;
}

.little-text {
  font-size: 5px;
}

.v-btn--outlined {
  border: thin solid #000;
}

.my-card {
  border-radius: 10px !important;
}

.keep-width {
  min-width: 608px;
}

.to-right {
  width: 44px !important;
}

:deep() {
  .v-carousel__controls {
    display: none;
  }
}
</style>