<template>

<el-row class="Slide">

	<el-row class="title">{{i18n[$lang].title}}</el-row>

	<el-row class="sub-title">{{i18n[$lang].subTitle}}!</el-row>

	<el-row class="slide-content" @mouseenter.native="onStop" @mouseleave.native="onStart">

		<img class="content-img" :src="`${$url.aliyun}${contents[selected-1].img}`" :alt="contents[selected-1].content.title">

		<el-col class="content">

			<el-row class="content-title">{{contents[selected-1].content.title | capitalize(true)}}<span>-{{contents[selected-1].name}}</span></el-row>

			<el-row class="content-article">{{contents[selected-1].content.article}}</el-row>

			<router-link class="router" :to="`/${$route.meta.lang}/login`">{{$t("common.readMore") | upperCase}}</router-link>

		</el-col>

	</el-row>

	<el-row class="slide-controll">

		<button v-for="(content,index) in contents" :class="{selected:selected===index+1}" @mouseenter="onSelect(index)" @mouseleave="onStart">{{content.name}}</button>

	</el-row>

</el-row>

</template>

<script>

	export default {

		data() {

			return {

				i18n: {

					en: {

						title: 'Functional Introduction',

						subTitle: 'GIPC, GIIC, GIRC help you to complete your investment quickly'

					},

					cn: {

						title: '功能介绍',

						subTitle: 'GIPC, GIIC, GIRC助您快速完成您的投资'

					}

				},

				contents: [{

					name: 'GIPC',

					img: '/static/img/home/GIPC.png',

					content: {

						title: 'global investment project cloud',

						article: 'Global SME CEOs are major users. 100% Projects have been reviewed by PNC. At the same time, CEOs can upload their own projects automatically to the platform. Global financing and markets are their focus'

					}

				}, {

					name: 'GIIC',

					img: '/static/img/home/GIIC.png',

					content: {

						title: 'global investment investor cloud',

						article: 'The investor pool consists mainly of Chinese investors. Introductions on the ability, background, current situation and development of investors are made to ensure that users can find the fittest investors in the shortest period of time'

					}

				}, {

					name: 'GIRC',

					img: '/static/img/home/GIRC.png',

					content: {

						title: 'global investment report cloud',

						article: 'Providing you with Macro Industry Analysis, Case Analysis, and Corporate Valuation Reports Exclusive Customized Report across the globes'

					}

				}],

				selected: 1,

				timer: null,

				speed: 5000

			};

		},

		mounted() {

			this.onStart();

		},

		methods: {

			onNext() {

				this.selected = this.selected >= this.contents.length ? 1 : this.selected + 1;

			},

			onStart() {

				this.timer = this.contents.length > 1 ? setInterval(this.onNext, this.speed) : null;

			},

			onStop() {

				clearInterval(this.timer);

			},

			onSelect(index) {

				this.onStop();

				this.selected = index + 1;

			}

		},

		beforeDestroy() {

			this.onStop();

		}

	};