<template>
  <div class="m-feature">
    <h4 class="m-title w-full text-20px text-title-color text-center pt-4 mt-2 mb-7">{{ $t('lang.Feature') }}</h4>
    <div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide flex flex-wrap justify-between px-4 mb-5">
            <!-- <div v-for="item in block1" :key="item.id" class="m-f-block bg-white px-3 py-5 mb-3 rounded" :style="{'height': enStyle ? '270px' : ''}">
              <h4 class="text-sm text-title-color mb-5 font-semibold">
                <img class="w-7 inline-block" :src="item.icon" alt="">
                {{ item.title }}</h4>
              <p class="text-xs text-article-color leading-relaxed">{{ item.text }}</p>
            </div> -->
            <div class="m-f-block bg-white px-3 py-5 mb-3 rounded" :style="{'height': enStyle ? '270px' : ''}">
              <h4 class="text-sm text-title-color font-semibold" :class="enStyle ? 'mb-1' : 'mb-5'">
                <img class="w-7 inline-block" src="@/assets/images/mobile/f1.png" alt="">
                {{ $t('lang.flexible') }}</h4>
              <p class="text-xs text-article-color" :class="{'leading-4': enStyle, 'leading-relaxed': !enStyle}">{{ $t('lang.FText') }}</p>
            </div>
            <div class="m-f-block bg-white px-3 py-5 mb-3 rounded" :style="{'height': enStyle ? '270px' : ''}">
              <h4 class="text-sm text-title-color font-semibold" :class="enStyle ? 'mb-1' : 'mb-5'">
                <img class="w-7 inline-block" src="@/assets/images/mobile/f2.png" alt="">
                {{ $t('lang.cross') }}</h4>
              <p class="text-xs text-article-color" :class="{'leading-4': enStyle, 'leading-relaxed': !enStyle}">{{ $t('lang.CText') }}</p>
            </div>
            <div class="m-f-block bg-white px-3 py-5 mb-3 rounded" :style="{'height': enStyle ? '270px' : ''}">
              <h4 class="text-sm text-title-color font-semibold" :class="enStyle ? 'mb-1' : 'mb-5'">
                <img class="w-7 inline-block" src="@/assets/images/mobile/f3.png" alt="">
                {{ $t('lang.latency') }}</h4>
              <p class="text-xs text-article-color" :class="{'leading-4': enStyle, 'leading-relaxed': !enStyle}">{{ $t('lang.LText') }}</p>
            </div>
            <div class="m-f-block bg-white px-3 py-5 mb-3 rounded" :style="{'height': enStyle ? '270px' : ''}">
              <h4 class="text-sm text-title-color font-semibold" :class="enStyle ? 'mb-1' : 'mb-5'">
                <img class="w-7 inline-block" src="@/assets/images/mobile/f4.png" alt="">
                {{ $t('lang.concurrency') }}</h4>
              <p class="text-xs text-article-color" :class="{'leading-4': enStyle, 'leading-relaxed': !enStyle}">{{ $t('lang.CCText') }}</p>
            </div>
          </div>
          <div class="swiper-slide flex flex-wrap justify-between px-4 mb-5">
            <div class="m-f-block bg-white px-3 py-5 mb-3 rounded" :style="{'height': enStyle ? '270px' : ''}">
              <h4 class="text-sm text-title-color font-semibold" :class="enStyle ? 'mb-1' : 'mb-5'">
                <img class="w-7 inline-block" src="@/assets/images/mobile/f5.png" alt="">
                {{ $t('lang.heterogeneous') }}</h4>
              <p class="text-xs text-article-color" :class="{'leading-4': enStyle, 'leading-relaxed': !enStyle}">{{ $t('lang.HeText') }}</p>
            </div>
            <div class="m-f-block bg-white px-3 py-5 mb-3 rounded" :style="{'height': enStyle ? '270px' : ''}">
              <h4 class="text-sm text-title-color font-semibold" :class="enStyle ? 'mb-1' : 'mb-5'">
                <img class="w-7 inline-block" src="@/assets/images/mobile/f6.png" alt="">
                {{ $t('lang.security') }}</h4>
              <p class="text-xs text-article-color" :class="{'leading-4': enStyle, 'leading-relaxed': !enStyle}">{{ $t('lang.SecText') }}</p>
            </div>
            <div class="m-f-block bg-white px-3 py-5 mb-3 rounded" :style="{'height': enStyle ? '270px' : ''}">
              <h4 class="text-sm text-title-color font-semibold" :class="enStyle ? 'mb-1' : 'mb-5'">
                <img class="w-7 inline-block" src="@/assets/images/mobile/f7.png" alt="">
                {{ $t('lang.environment') }}</h4>
              <p class="text-xs text-article-color" :class="{'leading-4': enStyle, 'leading-relaxed': !enStyle}">{{ $t('lang.EnvText') }}</p>
            </div>
            <div class="m-f-block bg-white px-3 py-5 mb-3 rounded" :style="{'height': enStyle ? '270px' : ''}">
              <h4 class="text-sm text-title-color font-semibold" :class="enStyle ? 'mb-1' : 'mb-5'">
                <img class="w-7 inline-block" src="@/assets/images/mobile/f8.png" alt="">
                {{ $t('lang.fund') }}</h4>
              <p class="text-xs text-article-color" :class="{'leading-4': enStyle, 'leading-relaxed': !enStyle}">{{ $t('lang.FundText') }}</p>
            </div>
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import {Swiper, Autoplay, Pagination} from 'swiper'
import lang from '@/mixin/lang'
import 'swiper/swiper-bundle.css'
Swiper.use([ Pagination, Autoplay])
export default Vue.extend({
	mixins: [lang],
  data() {
    return {
      swiper1: {}
    }
  },
  mounted() {
    this.swiper1 = new Swiper('.swiper-container', {
      loop: true,
      pagination: {
        el: '.swiper-pagination',
      },
      autoplay: {
        delay: 3000,
        disableOnInteraction: false
      },
      // virtual: true,
    })
  },
  watch: {
    $route(n: any) {
      if (n.path !== '/home') return
      const _t = this.swiper1 as any
      _t.destroy()
      this.$nextTick(() => {
        this.swiper1 = new Swiper('.swiper-container', {
          loop: true,
          pagination: {
            el: '.swiper-pagination',
          },
          autoplay: {
            delay: 3000,
            disableOnInteraction: false
          },
          speed: 500,
          // virtual: true,
        })
      })
      
    }
  }
})
</script>

<style scoped>
  .m-f-block {
    width: 48.5%;
    height: 190px;
  }
  .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: -4px
  }
  .my-bullet-active {
    background: #2545CB;
  }
</style>