<!--
 * @Author: your name
 * @Date: 2020-08-28 15:20:15
 * @LastEditTime: 2020-10-10 17:19:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /xfhd-vue-scaffold/src/page/index/Home/Index.vue
-->
<template>
	<div class="home">
		<!-- <Shader class="shader"></Shader> -->
		<div class="overlay"></div>
		<div
			class="page grid js_show dialog"
			@mousedown="touchstart"
			@mouseout="touchend"
		>
			<div class="page__hd" ref="header">
				<h1 class="page__title" style="font-size: 20px">
					Benlee's Toy
				</h1>
				<p class="page__desc" style="font-size: 18px">Toy list</p>
			</div>
			<div class="weui-grids" ref="list">
				<div
					@click="jump(item, $event)"
					class="weui-grid link"
					:class="item.active ? 'active' : ''"
					v-for="(item, index) in menuList"
					:key="index"
				>
					<div class="weui-grid__icon">
						<span
							class="iconfont"
							v-html="item.fontIconCode"
						></span>
					</div>
					<p class="weui-grid__label">{{ item.name }}</p>
				</div>
			</div>
		</div>
		<div class="shadow" ref="shadow" :class="shown ? 'shown' : ''"></div>
	</div>
</template>
<script>
// @ is an alias to /src
import { gsap } from "gsap";
// import Shader from "@/components/shader/index.vue";

export default {
	name: "Index",
	components: {
		// Shader,
	},
	data() {
		return {
			shown: false,
			menuList: [
				{
					fontIconCode: "&#xe603;",
					target: "Color",
					name: "三维空间色彩粒子",
					active: false,
				},
				{
					fontIconCode: "&#xe606;",
					target: "AR",
					name: "AR绘制",
					active: false,
				},
				{
					fontIconCode: "&#xe605;",
					target: "ARHit",
					name: "AR真实空间检测",
					active: false,
				},
				{
					fontIconCode: "&#xe604;",
					target: "Camera",
					name: "实时合成图片",
					active: false,
				},
				{
					fontIconCode: "&#xe602;",
					target: "HandTrack",
					name: "手势识别",
					active: false,
				},
				{
					fontIconCode: "&#xe607;",
					target: "Video",
					name: "视频播放ts",
					active: false,
				},
				{
					fontIconCode: "&#xe609;",
					target: "Curve",
					name: "三维文字曲线运动",
					active: false,
				},
				{
					fontIconCode: "&#xe606;",
					target: "Drawing",
					name: "画板",
					active: false,
				},
				{
					fontIconCode: "&#xe60a;",
					target: "ColorSort",
					name: "颜色归类",
					active: false,
				},
				{
					fontIconCode: "&#xe60b;",
					target: "PushCoin",
					name: "推币游戏",
					active: false,
				},
			],
		};
	},
	mounted() {
		// this.$weui.toast('即将跳转至项目列表页', {
		//     duration: 3500,
		//     className: "toast-warn",
		// });
		// setTimeout(() => {
		//     location.href = './project-list.html'
		// }, 3500);
		this.initShow();
	},
	watch: {
		$route: {
			handler(to, from) {
				console.log(to.path, from.path);
			},
			deep: true,
		},
	},
	methods: {
		initShow() {
			gsap.timeline({
				delay: window.shownIndex ? 0 : 2,
				onComplete: () => {
					window.shownIndex = true;
				},
			})
				.fromTo(
					this.$refs.shadow,
					{ scale: 0, top: "45%", rotation: 0 },
					{ scale: 10, top: "8%", rotation: 0 }
				)
				.fromTo(
					this.$refs.shadow,
					{ scale: 10 },
					{
						scale: 1,
						onComplete: () => {
							this.shown = true;
						},
					}
				)
				.fromTo(
					this.$refs.header,
					{ autoAlpha: 0, y: -20 },
					{ autoAlpha: 1, y: 0 },
					"-=.3"
				)
				.fromTo(
					this.$refs.list,
					{ autoAlpha: 0, y: -20 },
					{ autoAlpha: 1, y: 0 },
					"-=.2"
				);
		},
		// 跳转
		jump(item, event) {
			// 第一个游戏
			item.active = true;
			this.$Utils.btnTouched(
				event.currentTarget,
				() => {
					this.$router.push({
						name: item.target,
						params: {},
					});
				},
				1.5
			);
		},
		touchstart() {
			gsap.to(this.$refs.shadow, { scale: 3 });
		},
		touchend() {
			gsap.to(this.$refs.shadow, { scale: 1 });
		},
	},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.home {
	min-height: 100vh;
	background: #e3e7e8;
	color: #333;
	// overflow: hidden;

	.shader {
		visibility: hidden;
	}
	.overlay {
		visibility: hidden;
		background-color: rgba(0, 0, 0, 0.5);
		.paLayout(0,0,100%,100%,101);
		pointer-events: none;
	}
	.link {
		cursor: pointer;
	}
	.shadow {
		.paLayout(50%,80px,250px,250px,1);
		margin-left: -125px;
		border-radius: 100%;
		box-shadow: 20px 20px 60px #03a9f4, -20px -20px 60px #f441a5,
			20px -20px 60px #ffeb3b, -20px 20px 60px #03a9f4,
			-50px -50px 100px #d3c1f8 inset, 50px 50px 100px #f441a5 inset,
			-50px 50px 100px #ffeb3b inset, 50px -50px 100px #c2c6fd inset;
		filter: blur(20px);

		&.shown {
			animation: rotation 5s linear infinite;
		}

		// box-shadow: 0px -20px 40px #b9d7fb, -13px -15px 40px #b8f1ee,
		// 	20px -4px 40px #c8f8ce, 18px 10px 40px #f0dbc0,
		// 	9px 18px 40px #f0c7cf, -6px 18px 40px #f5c5cb,
		// 	-11px 18px 40px #f0c1ef, -22px -7px 40px #d3c1f8,
		// 	-13px -17px 40px #c2c6fd, 0px 20px 40px #b9d7fb inset,
		// 	13px 15px 40px #b8f1ee inset, -20px 4px 40px #c8f8ce inset,
		// 	-18px -10px 40px #f0dbc0 inset, -9px -18px 40px #f0c7cf inset,
		// 	6px -18px 40px #f5c5cb inset, 11px -18px 40px #f0c1ef inset,
		// 	22px 7px 40px #d3c1f8 inset, 13px 17px 40px #c2c6fd inset;
	}
	.page__hd {
		padding: 30px 0 180px 0px !important;
		h1,
		p {
			position: relative;
			z-index: 10;
			text-align: center;
			margin-top: 10px;
		}
	}
	.dialog {
		.paLayout(0,150px,100%,auto,102);
		// color: #fff;
		.weui-grids {
			display: flex;
			flex-direction: row;
			justify-content: start;
			flex-wrap: wrap;
			font-size: 30px;
			align-content: center;
			align-items: center;
			.weui-grid {
				opacity: 0.75;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-content: center;
				align-items: center;
				width: 33.33%;
				height: auto;
				margin-top: 30px;
				.weui-grid__icon {
					.prLayout(125px,125px);
					border-radius: 100%;
					// background: #e3e7e8;
					background-image: linear-gradient(
						145deg,
						#f6f6f6 0%,
						#cfcfcf 49.99%,
						#cfcfcf 50%,
						#f6f6f6 100%
					);
					background-position: 0 0;
					background-size: 100% 200%;
					box-shadow: 20px 20px 60px #c4c4c4, -20px -20px 60px #ffffff;
					transition: all 0.25s ease-in-out;
					-webkit-transition: all 0.25s ease-in-out;
				}
				.iconfont {
					font-size: 45px;
				}
				.weui-grid__label {
					height: 100px;
					line-height: 40px;
					padding: 0 25px;
					text-align: center;
					text-overflow: ellipsis;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-content: center;
					align-items: center;
					transition: all 0.5s ease;
				}
				&:hover {
					.weui-grid__icon {
						background-position: 0 -100%;
					}
					.weui-grid__label {
						transform: scale(1.2) translate(0, 5px);
					}
				}
				&.active {
					.weui-grid__icon {
						background-position: 0 -100%;
					}
					.weui-grid__label {
						transform: scale(1.2) translate(0, 5px);
					}
				}
			}
		}
		.weui-grids::before,
		.weui-grids::after,
		.weui-grid:before,
		.weui-grid:after {
			display: none;
		}
		.weui-grid__label {
			// color: #fff;
		}
		.weui-grid__icon {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.iconfont {
				font-size: 40px;
			}
		}
	}
}
@keyframes rotation {
	0% {
		opacity: 1;
		transform: rotate(0deg);
	}
	50% {
		opacity: 0.5;
		transform: rotate(180deg);
	}
	100% {
		opacity: 1;
		transform: rotate(360deg);
	}
}
</style>