<template>
  <div class="home_explain flex justify-center w-full" :class="{'en-home-explain': enStyle}">
		<div class="md:w-bodySet h-full flex ">
			<div class="explain_l flex mr-32 relative w-6/12 h-full text-sm flex-shrink-0">
				<div class="flex flex-col explain_btn explain_1 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="">
					<p class="text-center text-14px text-article-color nowrap">{{ $t('lang.mission') }}</p>
				</div>
				<div class="flex flex-col explain_btn explain_2 relative">
					<p class="text-center mb-4 text-14px text-article-color nowrap">{{ $t('lang.feature') }}</p>
					<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}" style="top: 37px" src="@/assets/images/home/exa2.png" alt="">
				</div>
				<div class="flex flex-col explain_btn explain_3 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="">
					<p class="text-center text-14px text-article-color nowrap">{{ $t('lang.application') }}</p>
				</div>
				<div class="flex flex-col explain_btn explain_4 relative">
					<p class="text-center mb-6 text-14px text-article-color nowrap">{{ $t('lang.reason') }}</p>
					<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}" style="top: 45px" src="@/assets/images/home/exa4.png" alt="">
				</div>
			</div>
			<div class="explain_r mt-4 flex-grow">
				<explain-text :index="index" :enStyle="enStyle"></explain-text>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import Vue from 'vue'
import explainText from './explainText.vue'
import lang from '@/mixin/lang'
export default Vue.extend({
  components: { explainText },
	data() {
		return {
			index: 1,
			timer: 0
		}
	},
	mixins: [lang],
	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>
	.home_explain {
		height: 360px;
		background-image: url('../../assets/images/home/bg_ex.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position-x: 50%;
	}
	.nowrap {
		white-space: nowrap;
	}
	.en-home-explain {
		height: 450px;
	}
	.explain_btn {
		width: 118px;
		position: absolute;
		color: #435897;
	}
	.explain_btn img {
		width: 100%;
		margin-bottom: 26px;
		transition: 0.4s ease-in-out;
	}
	.explain_1 {
		left: 4px;
		top: 115px;
	}
	.explain_1::after {
		content: '';
		display: block;
		width: 8px;
		height: 8px;
		background: #2545CB;
		border-radius: 50%;
		position: absolute;
		top: 18px;
		right: -24px;
	}
	.explain_2 {
		top: 0;
		left: 154px;
	}
	.explain_2::after {
		content: '';
		display: block;
		width: 8px;
		height: 8px;
		background: #2545CB;
		border-radius: 50%;
		position: absolute;
		bottom: 44px;
		right: -13px;
	}
	.explain_3 {
		top: 110px;
		left: 302px;
	}
	.explain_3::after {
		content: '';
		display: block;
		width: 8px;
		height: 8px;
		background: #2545CB;
		border-radius: 50%;
		position: absolute;
		top: 49px;
		right: -17px;
	}
	.explain_4 {
		top: 31px;
		left: 448px;
	}
</style>