<template>
  <div class="m-scene">
    <h4 class="m-title w-full text-20px text-title-color text-center pt-4 mt-4 mb-6">{{ this.$t('lang.scene') }}</h4>
    <div class="w-full overflow-hidden">
      <div class="swiper-scene">
        <div class="swiper-wrapper">
          <div v-for="item in lists" :key="item.id" class="swiper-slide">
            <div class="slide-item bg-white flex flex-col justify-center item-center" :class="item.id === 2 ? 'px-3' : 'px-9'">
              <h4 class="text-sm text-title-color text-center font-semibold leading-4" :class="item.id === 2 ? 'mb-2' : 'mb-5'">{{item.title}}</h4>
              <p class="text-xs text-article-color text-center" :class="enStyle ? 'leading-4' : ''">{{ item.text }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Swiper, Autoplay } from 'swiper'
import lang from '@/mixin/lang'
import 'swiper/swiper-bundle.css'
Swiper.use([Autoplay])
export default Vue.extend({
  mixins: [lang],
  computed: {
    lists() {
      return [
        {
          id: 1,
          title: this.$t('lang.SC1'),
          text: this.$t('lang.SC1T')
        },
        {
          id: 2,
          title: this.$t('lang.SC2'),
          text: this.$t('lang.SC2T')
        },
        {
          id: 3,
          title: this.$t('lang.SC3'),
          text: this.$t('lang.SC3T')
        },
        {
          id: 4,
          title: this.$t('lang.SC4'),
          text: this.$t('lang.SC4T')
        },
        {
          id: 5,
          title: this.$t('lang.SC5'),
          text: this.$t('lang.SC5T')
        },
        {
          id: 6,
          title: this.$t('lang.SC6'),
          text: this.$t('lang.SC6T')
        },
        {
          id: 7,
          title: this.$t('lang.SC7'),
          text: this.$t('lang.SC7T')
        },
        {
          id: 8,
          title: this.$t('lang.SC8'),
          text: this.$t('lang.SC8T')
        },
        {
          id: 9,
          title: this.$t('lang.SC9'),
          text: this.$t('lang.SC9T')
        },
      ]
    } 
  },
  data() {
    return {
      swiper2: {}
    }
  },
  mounted() {
    console.log(this.lists)
    setTimeout(() => {
    // this.$nextTick(() => {
      this.swiper2 = new Swiper('.swiper-scene', {
        slidesPerView : 1.5,
        centeredSlides : true,
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        speed: 500,
        observer: true,
        observeSlideChildren: true,
        // virtual: true,
      })
    }, 200)
  },
  beforeDestroy() {
    this.swiper2 = {}
  },
  watch: {
    $route(n: any){
      if (n.path !== '/home') return
      const _t = this.swiper2 as any
      _t.destroy()
      this.$nextTick(() => {
        setTimeout(() => {
          this.swiper2 = new Swiper('.swiper-scene', {
            slidesPerView : 1.5,
            centeredSlides : true,
            loop: true,
            autoplay: {
              delay: 3000,
              disableOnInteraction: false
            },
            observer:true,
            observeSlideChildren:true,
            // virtual: true,
          })
        }, 200)
      })
    }
  }
})
</script>

<style scoped>
  .swiper-slide div {
    height: 145px;
    margin: 8px 16px;
  }
  .swiper-slide {
    transition: 0.2s ease-in;
  }
  .swiper-slide-active {
    transform: scale(1.1);
    transform-origin: center center;
  }
  .slide-item {
    border-radius: 3px;
    box-shadow: 0px 2px 10px 0px rgba(36, 68, 202, 0.05);
  }
</style>