<template>
  <div class="home_explain flex justify-center">
		<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">
					<img v-show="index !== 1" class="cursor-pointer" src="../assets/images/h-explain/ex1.png" alt="" @click="handleChange(1)">
					<img v-show="index === 1" class="cursor-pointer" src="../assets/images/h-explain/exa1.png" alt="">
					<p class="text-center text-16px text-article-color" style="white-space: nowrap;">原链YCC使命</p>
				</div>
				<div class="flex flex-col explain_btn explain_2">
					<p class="text-center mb-4 text-16px text-article-color" style="white-space: nowrap;">原链YCC技术特点</p>
					<img v-show="index !== 2" class="cursor-pointer" src="../assets/images/h-explain/ex2.png" alt="" @click="handleChange(2)">
					<img v-show="index === 2" class="cursor-pointer" src="../assets/images/h-explain/exa2.png" alt="">
				</div>
				<div class="flex flex-col explain_btn explain_3">
					<img v-show="index !== 3" class="cursor-pointer" src="../assets/images/h-explain/ex3.png" alt="" @click="handleChange(3)">
					<img v-show="index === 3" class="cursor-pointer" src="../assets/images/h-explain/exa3.png" alt="">
					<p class="text-center text-16px text-article-color" style="white-space: nowrap;">原链YCC应用</p>
				</div>
				<div class="flex flex-col explain_btn explain_4">
					<p class="text-center mb-6 text-16px text-article-color" style="white-space: nowrap;">为什么上原链YCC</p>
					<img v-show="index !== 4" class="cursor-pointer" src="../assets/images/h-explain/ex4.png" alt="" @click="handleChange(4)">
					<img v-show="index === 4" class="cursor-pointer" src="../assets/images/h-explain/exa4.png" alt="">
				</div>
			</div>
			<div class="explain_r mt-4">
				<explain-text :index="index"></explain-text>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import Vue from 'vue'
import explainText from './explainText.vue'
export default Vue.extend({
  components: { explainText },
	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>
	.home_explain {
		height: 360px;
		background-image: url('../assets/images/home/bg_ex.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position-x: 50%;
	}
	.explain_btn {
		width: 118px;
		position: absolute;
		color: #435897;
	}
	.explain_btn img {
		width: 100%;
		margin-bottom: 26px;
	}
	.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: 50px;
		right: -9px;
	}
	.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>