<template>
  <div class="home-carousel">
    <transition
      v-for="(carousel, index) in carouselData"
      :key="carousel.title"
      name="fade"
    >
      <div
        v-show="index === current"
        class="home-carousel-item"
        :class="{ 'home-carousel-item-current': index === current }"
      >
        <div class="image-wrapper">
          <img
            :src="carousel.imageurl"
            alt=""
            style="width: 100%;height: 100%;cursor: pointer;"
            @click="$router.push(carousel.twLink)"
          >
        </div>
        <transition name="text">
          <div
            class="home-carousel-text"
            v-show="index === current"
          >
            <p
              v-for="(textEn, i) in carousel.titleEnglish.split('\n')"
              :key="'text-en-' + i"
              class="text-en"
            >
              <span>{{ textEn }}</span>
            </p>
            <p
              v-for="(textCn, i) in carousel.titleChinese.split('\n')"
              :key="'text-cn-' + i"
              class="text-cn"
            >
              <span>{{ textCn }}</span>
            </p>
          </div>
        </transition>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    carouselData: { type: Array, required: true },
    current: { type: Number, required: true },
  },
};
</script>

<style scoped>
.home-carousel {
  height: 100%;
  position: relative;
}
.home-carousel-item {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.home-carousel-item-current {
  z-index: 1;
}
@keyframes FadeLeave {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(0.83);
  }
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
}
.fade-enter-active {
  transition: all 1500ms cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 1;
}
.fade-enter {
  opacity: 0;
}
.fade-leave-active {
  transition: all 1500ms cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 1;
}
.fade-leave-to {
  opacity: 0;
}
.home-carousel-text {
  --baseSize: calc(min(1080rem, 100vh) / 1080);
  position: absolute;
  left: calc(50% - 841rem);
  /* top: calc(var(--baseSize) * 640);  原版*/
  top: calc(var(--baseSize) * 760);
  transform: translateY(-100%);
}
.home-carousel-text p {
  margin: calc(var(--baseSize) * 24) 0;
  font-size: calc(var(--baseSize) * 40);
  line-height: 1;
  color: #ffffff;
  overflow: hidden;
}
.home-carousel-text p.text-en {
  font-family: MicrosoftYaHeiSemibold;
  font-size: 40rem;
}
.home-carousel-text p.text-cn {
  font-family: MicrosoftYaHeiLight;
  font-size: 40rem;
}
.home-carousel-text  p.text-en + p.text-cn {
  margin-top: calc(var(--baseSize) * 56);
}
.home-carousel-text p span {
  display: inline-block;
  transform: translateY(0);
}
.text-enter-active {
  transition: all 1000ms 500ms;
}
.text-enter-active p span {
  transition: all 1000ms 500ms;
  transform: translateY(0);
}
.text-enter p span {
  transform: translateY(100%);
}
</style>
