<template>
    <div class="homeRecommend_max">
       <div class="left">
			<div class="comment">
				<div class="item">
					123123123123123123123123123123123123
					<div>2312321</div>
				</div>
				<div class="item right">
					1231231231231231231231231231231231233123123123
					<div>2312321</div>
				</div>
				<div class="item">
					1231231231231231231231231231231231233123123123
					<div>2312321</div>
				</div>
				<div class="item right">
					123123123123123123123123123123123123
					<div>2312321</div>
				</div>
				<div class="item">
					1231231231231231231231231231231231233123123123
					<div>2312321</div>
				</div>
				<div class="item right">
					123123123123123123123123123123123123
					<div>2312321</div>
				</div>
				<div class="item">
					1231231231231231231231231231231231233123123123
					<div>2312321</div>
				</div>
				<div class="item right">
					123123123123123123123123123123123123
					<div>2312321</div>
				</div>
			</div>
	   </div>
       <div class="right">
			<div class="">
				<div class="title">
					Log in to AiDA
				</div>
				<div class="info">
					Join the conversation! Sign in to connect seamlessly on WhatsApp and unlock the full potential of the web application.
				</div>
				<div class="continue gallery_btn gallery_btn_radius" @click="setLogin" style="min-width: 33rem;">
					Continue
					<i class="fi fi-rr-arrow-right"></i>
				</div>
			</div>
	   </div>
    </div>
</template>
<script >
import { defineComponent, toRefs, reactive, ref , nextTick,computed, onMounted, onBeforeUnmount } from "vue";
import { isEmail } from "@/tool/util";
import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
import { Https } from "@/tool/https";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { setLang } from "@/tool/guide";
import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router';
import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
    components: {
        VerificationCodeInput,
    },
	setup(){
        const store = useStore();
		const router = useRouter();
		let registerModel = ref()
		let data = reactive({
		})
		let userDetail = computed(()=>{
			return store.state.UserHabit.userDetail
		})
		let setLogin = ()=>{
			router.push("/login");
		}
		let logout = ()=>{
			let userInfo = store.state.UserHabit.userDetail;
			let data = {
                userId: userInfo?.userId,
            };
			store.commit('createDetail')
			store.commit('createProbject')
			if(!data.userId) return
			Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
				clonAllCookie();
			});
		}
		let goHome = ()=>{
			router.push('/home');
		}
		let time
		let updataIsMoblie = ()=>{
			clearTimeout(time)
			time = setTimeout(()=>{
			
			},500)
			
		}
		const setRegister = ()=>{
			router.push('/register');
		}
		onMounted(()=>{
			window.addEventListener('resize',updataIsMoblie)
		})
		onBeforeUnmount(() => {
			window.removeEventListener('resize', updataIsMoblie);
		});
		return {
			...toRefs(data),
			userDetail,
			setLogin,
			registerModel,
			logout,
			goHome,
			setRegister,
		}
	},
    data() {
        return {
        };
    },
	watch: {
		// credits.value(newVal,oldVal){
		// 	console.log(String(newVal).length);
		// }
	},
    mounted() {
		nextTick().then(()=>{

			let dom = document.querySelector('.homeRecommend_content_body')
			let codeTween = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_img')
			let codeTweenText = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_text')
			for (let index = 0; index < codeTween.length; index++) {
				gsap.from(codeTween[index],.5, {scale:.6 },);
				gsap.registerPlugin(ScrollTrigger);
				let tl1 = gsap.timeline();
				tl1.to(codeTween[index],1, {y:'-30px',opacity:0},)
				ScrollTrigger.create({
					trigger: codeTween[index], // 触发器元素
					start: "top 0%", // 滚动触发器的起始滚动位置
					end: '200% 20%',   // 滚动触发器的结束滚动位置
					// markers: true, // 开启标注功能
					scrub: true,
					animation:tl1,
					scroller:dom,//设置指定元素为滚动依据
					scrub:2,
					// onUpdate:(v)=>{
					// 	if(v.progress < 0.1){
					// 		v.trigger?.classList.remove('active')
					// 	}else{
					// 		v.trigger?.classList.add('active')
					// 		// v.trigger?.classList.add('active')
					// 	}
					// }
				});
			}
			gsap.registerPlugin(ScrollTrigger);
			let tl1 = gsap.timeline();
			tl1.from(codeTweenText,1, {'margin-top':'30px',opacity:1},)
			ScrollTrigger.create({
				trigger: codeTweenText, // 触发器元素
				start: "top 0%", // 滚动触发器的起始滚动位置
				end: '200% 20%',   // 滚动触发器的结束滚动位置
				// markers: true, // 开启标注功能
				scrub: true,
				animation:tl1,
				scroller:dom,//设置指定元素为滚动依据
				scrub:2,
				
			});
		})
    },
    methods: {
		turnToNewPage(url) {
            window.open(url);
        },
		turnToWindow(url) {
            window.open(url);
        },
    },
});
</script>

<style lang="less" scoped>
.homeRecommend_max{
	width: 100%;
	height: 100%;
	display: flex;
	> .left,> .right{
		height: 100%;
		display: flex;
	}
	> .left{
		width: 60%;
		background: #232323;
		> .comment{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			> .item{
				padding: 2rem;
				border-radius: 4rem;
				font-size: 2rem;
				background: #fff;
				text-align: center;
				width: auto;
				position: relative;
				margin: 1rem 0;
				font-weight: 600;
				&:nth-child(1){left: -10rem;}
				&:nth-child(2){left: 15rem;}
				&:nth-child(3){left: -15rem;}
				&:nth-child(4){left: 10rem;}
				> div{
					position: absolute;
					padding: 1.5rem;
					border-radius: 4rem;
					left: 1rem;
					top: 0;
					transform: translateY(-60%);
					background: rgba(175, 175, 175,.6);
					backdrop-filter: blur(13px);
					-webkit-backdrop-filter: blur(13px);
				}
				&.right{
					> div{
						left: auto;
						right: 1rem;
					}
				}
			}
		}
	}
	> .right{
		width: 40%;
		align-items: center;
		justify-content: center;
		> div{
			width: 60rem;
			> .title{
				font-size: 4rem;
				font-weight: 900;
				line-height: 1.2;
				margin-bottom: 2rem;
			}
			> .info{
				font-size: 2rem;
				margin-bottom: 4rem;
				line-height: 1.2;
			}
			> .continue{
				> i{
					margin-left: 1rem;
				}
			}
		}
	}
}
</style>
