<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import { gsap, TweenMax, TweenLite } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
//const props = defineProps({
//})
//const emit = defineEmits([
//])
const imgItem1 = ref(null)
let data = reactive({
})
onMounted(()=>{
	let dom = document.querySelector('body')
	let ourListDom = document.querySelectorAll('.our-team-item')
	ourListDom.forEach((item,index)=>{
		gsap.registerPlugin(ScrollTrigger);
		let tl1 = gsap.timeline();
		let img = item.querySelector('.img')
		let textTop = item.querySelector('.text p')
		let textBottom = item.querySelector('.text .bottom-text')
		tl1.from(img,1, {opacity:'0',ease:'power2.out'},0)
		.from(textTop,1, {y:'20px',opacity:'0',ease:'power2.out'},0)
		.from(textBottom,1, {y:'-20px',opacity:'0',ease:'power2.out'},0)
		ScrollTrigger.create({
			trigger: img, // 触发器元素
			start: "top 90%", // 滚动触发器的起始滚动位置
			end: '100% 80%',   // 滚动触发器的结束滚动位置
			markers: false, // 开启标注功能
			animation:tl1,
			scroller:dom,//设置指定元素为滚动依据
			// toggleActions: "play reset play reset",
			scrub:false,
		});
	})
	
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<section class="our-team">
		<div class="content">
			<h2>Our Team</h2>
		</div>
	</section>
	<section class="our-team-item bg1">
		<div class="content">
			<div class="text">
				<p>
					Prof Wong is Cheng Yik Hung Professor in Fashion of School of Fashion and Textiles at The Hong Kong Polytechnic University and currently serving as the Chief Executive Officer and Centre Director of 
					<a href="https://www.aidlab.hk/">Laboratory for Artificial Intelligence in Design (AiDLab)</a>.
					He is one of the inventors of the technologies to be commercialized in the start-up.
				</p>
				<div class="bottom-text" ref="bottomText">
					<h4 class="name">Prof Calvin WONG</h4>
					<h4 class="position">Co-Founder and Technical Advisor</h4>
				</div>
			</div>
			<div class="img">
				<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_team_01-600x887.png" alt="">
			</div>
		</div>
	</section>
	<section class="our-team-item bg2">
		<div class="content">
			<div class="img">
				<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_team_02-600x887.png" alt="">
			</div>
			<div class="text">
				<p>
					Ms Wong is an accomplished C-level business executive with extensive experience in the fashion and luxury goods industries, building business across China and APAC and leading operations for renowned fashion houses such as DFS USA, Lane Crawford, Burberry Asia, Brunello Cucinelli and Versace Asia Pacific.
				</p>
				<div class="bottom-text" ref="bottomText">
					<h4 class="name">Ms Kim WONG</h4>
					<h4 class="position">Co-Founder and Chief Executive Officer</h4>
				</div>
			</div>
		</div>
	</section>
	<section class="our-team-item bg1">
		<div class="content">
			<div class="text">
				<p>
					Dr Zou is currently serving as Assistant Professor at School of Fashion and Textiles at The Hong Kong Polytechnic University. She is one of the inventors of the technologies to be commercialized in the start-up.
				</p>
				<div class="bottom-text" ref="bottomText">
					<h4 class="name">Dr Aemika ZOU</h4>
					<h4 class="position">Technical Advisor</h4>
				</div>
			</div>
			<div class="img">
				<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_team_03-600x887.png" alt="">
			</div>
		</div>
	</section>
	<section class="our-team-item bg2">
		<div class="content">
			<div class="img">
				<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_team_04-600x887.png" alt="">
			</div>
			<div class="text">
				<p>
					Giovanni is currently the Chief Executive Officer Asia of Salvatore Ferragamo.
				</p>
				<div class="bottom-text" ref="bottomText">
					<h4 class="name">Mr Giovanni DI SALVO</h4>
					<h4 class="position">Advisory Member</h4>
				</div>
			</div>
		</div>
	</section>
</template>
<style lang="less" scoped>
	.our-team{
		width: 100%;
		background-color: #f9f9f9;
		> .content{
			margin: 0 auto;
			max-width: 730px;
			padding: 100px 0px 100px 0px;
			> h2{
				text-align: center;
				margin-bottom: 30px;
				color: #000000;
				font-size: 40px;
				font-weight: 600;
				letter-spacing: 1px;
				font-family: "Poppins", Sans-serif;
			}
		}
	}
	.our-team-item{
		width: 100%;
		&.bg1{
			background-color: #eeeeee;
			.img{
				text-align: right;
			}
		}
		&.bg2{
			background-color: #ffffff;
			.img{
				text-align: left;
			}
		}
		> .content{
			padding: 100px 0;
			max-width: 960px;
			margin: 0 auto;
			display: flex;
			> div{
				width: 50%;
			}
			> .text{
				display: flex;
				flex-direction: column;
				justify-content: center;
				> p{
					font-family: "Poppins", Sans-serif;
					font-size: 16px;
					font-weight: 600;
					line-height: 1.6em;
					color: #000000;
					margin-bottom: 20px;
					> a{
						color: inherit;
						font-size: inherit;
						font-family: inherit;
						line-height: inherit;
						text-decoration: none;
					}
				}
				> .bottom-text{
					> .name{
						font-family: "Poppins", Sans-serif;
						font-size: 16px;
						font-weight: 600;
						color: #000000;
						line-height: 1;
						margin-bottom: 10px;
					}
					> .position{
						font-family: "Poppins", Sans-serif;
						font-size: 16px;
						font-weight: 400;
						color: #000000;
						line-height: 1;
					}
				}

			}
			> .img{
				> img{
					width: 100%;
					height: 492px;
					object-fit: cover;
					max-width: 330px;
				}
			}
		}
	}
</style>