<template>
  <div class="m-explain mt-3 px-4">
    <h4 class="m-title w-full text-20px text-title-color text-center pt-4">{{ $t('lang.whatIs') }}</h4>
    <div class="m-explain-btn flex justify-between px-5">
      <div class="e-btn flex items-center justify-center relative">
        <img class="cursor-pointer" :class="{'opacity-0': index === 1}" src="@/assets/images/home/ex1.png" alt="" @click="handleChange(1)">
				<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 1}" src="@/assets/images/home/exa1.png" alt="">
      </div>
      <div class="e-btn flex items-center justify-center relative">
        <img class="cursor-pointer" :class="{'opacity-0': index === 2}" src="@/assets/images/home/ex2.png" alt="" @click="handleChange(2)">
				<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 2}" src="@/assets/images/home/exa2.png" alt="">
      </div>
      <div class="e-btn flex items-center justify-center relative">
        <img class="cursor-pointer" :class="{'opacity-0': index === 3}" src="@/assets/images/home/ex3.png" alt="" @click="handleChange(3)">
				<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 3}" src="@/assets/images/home/exa3.png" alt="">
      </div>
      <div class="e-btn flex items-center justify-center relative">
        <img class="cursor-pointer" :class="{'opacity-0': index === 4}" src="@/assets/images/home/ex4.png" alt="" @click="handleChange(4)">
				<img class="cursor-pointer absolute pointer-events-none" :class="{'opacity-0': index !== 4}" src="@/assets/images/home/exa4.png" alt="">
      </div>
    </div>
    <div class="px-5" :class="enStyle ? 'explain_m_b' : 'explain_b'">
      <m-explain-text :index="index" :enStyle="enStyle"></m-explain-text>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import MExplainText from '@/components/mobile/m-explainText.vue'
import lang from '@/mixin/lang'
export default Vue.extend({
  mixins: [lang],
  components: {
    MExplainText
  },
  data() {
    return {
      index: 1,
      timer: 0
    }
  },
  methods: {
		handleChange(v: number) {
			this.index = v
			if (this.timer) clearInterval(this.timer)
			this.timer = setInterval(() => {
				this.index < 4 ? this.index++ : this.index = 1
			}, 4000)
		}
	},
  created() {
		this.timer = setInterval(() => {
			this.index < 4 ? this.index++ : this.index = 1
		}, 4000)
	},
	beforeDestroy() {
		clearInterval(this.timer)
	}
})
</script>

<style scoped>
  
  .m-explain-btn {
    height: 105px;
    background-image: url(../../assets/images/mobile/m-ex-b.png);
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
  }
  .e-btn {
    width: 50px;
  }
  .e-btn img {
    transition: 0.3s ease-in;
  }
  .explain_b {
    height: 270px;
    background-image: url(../../assets/images/mobile/ex-bg.png);
    background-size: 100%;
    background-position: 0 bottom;
    background-repeat: no-repeat;
  }
  .explain_m_b {
    height: 450px;
    background-image: url(../../assets/images/mobile/ex-bg.png);
    background-size: 100%;
    background-position: 0 bottom;
    background-repeat: no-repeat;
  }
</style>