<template>
  <div class="homeRecommend_max">
    <div class="header">
      <img
        class="homeRecommend_logo"
        @click="turnToNewPage('/')"
        src="@/assets/images/homePage/aidaIcon.png"
      />
      <div class="language_btn">
        <div @click="handleChangeLanguage">
          <i class="fi fi-rr-globe"></i>
          {{ isChinese ? 'CN' : 'EN' }}
        </div>
      </div>
      <div class="gallery_btn login white" @click="setLogin">{{ t('Login.Login') }}</div>
      <div class="gallery_btn" @click="signUp">{{ t('Login.SignUp') }}</div>
    </div>

    <div class="content">
      <img class="bg pc" src="@/assets/images/homePage/squareBg.png" alt="" />
      <img class="bg mobile" src="@/assets/images/homePage/squareBgMobile.png" alt="" />
      <div class="beForm">
        Developed by AiDLab
        <br />
        Commercialized by Code-Create
      </div>
      <div class="title">
        <img src="@/assets/images/homePage/recommendtitleMobile.png" alt="" />
        <div class="text">
          AI-based Interactive Design
          <br />
          Assistant for Fashion
        </div>
      </div>
      <div class="learnMore">
        <img src="@/assets/images/homePage/learnMore.png" alt="" />
        <!-- <div class="title">AiDA</div>
				<div class="info">
					AI-based Interactive Design Assistant for Fashion
				</div> -->
        <!-- <div class="btn gallery_btn" @click="goLearnMore">Learn More</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 { 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: {},
	setup() {
		const {t, locale} = useI18n()
    const store = useStore()
    const router = useRouter()
    let registerModel = ref()
    let data = reactive({})

    const isChinese = ref(false)
    const handleChangeLanguage = () => {
      isChinese.value = !isChinese.value
      const lang = isChinese.value ? 'CHINESE_SIMPLIFIED' : 'ENGLISH'
      localStorage.setItem('loginLanguage', lang)
      locale.value = lang
    }

    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 signUp = () => {
      router.push('/register')
    }
    const goLearnMore = () => {
      window.open('https://www.aida.com.hk/Square/works', '_blank')
    }
    onMounted(() => {
      window.addEventListener('resize', updataIsMoblie)
      // 初始化语言设置
      const savedLang = localStorage.getItem('loginLanguage')
      if (savedLang) {
        isChinese.value = savedLang === 'CHINESE_SIMPLIFIED'
        locale.value = savedLang
      }
    })
    onBeforeUnmount(() => {
      window.removeEventListener('resize', updataIsMoblie)
    })
    return {
      ...toRefs(data),
      userDetail,
      setLogin,
      registerModel,
      logout,
      goHome,
      signUp,
      goLearnMore,
      isChinese,
      handleChangeLanguage,
      t
    }
  },
  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,
    // 	});
    // }
    // 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: {
    turnToWindow(url) {
      window.open(url)
    }
  }
})
</script>

<style lang="less" scoped>
.homeRecommend_max {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  @media (max-width: 768px) {
    flex-direction: column;
  }
  > .header {
    padding: 3.2rem 4rem;
    z-index: 2;
    margin-left: auto;
    display: flex;
    column-gap: 2rem;
    align-items: center;
    position: absolute;
    right: 0;
    @media (max-width: 768px) {
      position: relative;
      justify-content: space-between;
      width: 100%;
      padding: 0.7rem 1.4rem;
      margin-left: auto;
      background-color: #fff;
    }
    > .homeRecommend_logo {
      display: none;
      @media (max-width: 768px) {
        display: block;
        height: 2.5rem;
      }
    }
    .language_btn {
      color: #fff;
      cursor: pointer;
    }
    > .gallery_btn {
      // margin-right: 2rem;
      border: none;
      font-size: 1.7rem;
      width: 13rem;
      line-height: 6rem;
      font-weight: 500;
      border-radius: 4rem;
      &:last-child {
        margin-right: 0;
      }
      &.login {
        @media (max-width: 768px) {
          display: none;
        }
      }
      @media (max-width: 768px) {
        font-size: 0.72rem;
        width: 5.2rem;
        line-height: 2.4rem;
        padding: 0;
      }
    }
  }
  > .content {
    flex: 1;
    position: relative;
    > .bg {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      object-fit: cover;
      display: none;
      &.pc {
        @media (min-width: 768px) {
          display: block;
        }
      }
      &.mobile {
        @media (max-width: 768px) {
          display: block;
        }
      }
    }
    > .title {
      display: none;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      @media (max-width: 768px) {
        margin-top: -2rem;
        > img {
          width: 17rem;
        }
        > .text {
          width: max-content;
          text-align: center;
        }
        font-size: 1.8rem;
        color: #fff;
        display: block;
      }
    }
    > .beForm {
      position: absolute;
      font-size: 2.1rem;
      bottom: 10rem;
      left: 10rem;
      @media (max-width: 768px) {
        display: block;
        left: 50%;
        color: #fff;
        bottom: 1rem;
        font-size: 0.8rem;
        text-align: center;
        transform: translateX(-50%);
      }
    }
    > .learnMore {
      position: absolute;
      bottom: 29rem;
      right: 10rem;
      width: 53.4rem;
      text-align: right;
      z-index: 2;
      > img {
        height: 19.5rem;
        margin-bottom: 2rem;
        display: none;
      }

      // > .title{
      // 	margin-bottom: .8rem;
      // 	font-size: 11.8rem;
      // 	font-weight: 500;
      // }
      // > .info{
      // 	font-family: 'pingfang_regular';
      // 	font-size: 2.8rem;
      // 	font-weight: 400;
      // 	margin-bottom: 2rem;
      // }
      > .btn {
        line-height: 6rem;
        width: 18rem;
        font-size: 2rem;
        font-weight: 500;
      }
    }
    // > .left,> .right{
    // 	height: 100%;
    // 	display: flex;
    // 	display: none;
    // }
    // > .left{
    // 	width: 45%;
    // 	align-items: center;
    // 	justify-content: center;
    // 	position: relative;
    // 	> .logoBox{
    // 		height: 4rem;
    // 		position: absolute;
    // 		left: 2rem;
    // 		top: 2rem;
    // 		img{
    // 			height: 100%;
    // 			margin-left: 2rem;
    // 		}
    // 		.codeCreatelogo{
    // 			cursor: pointer;
    // 		}
    // 	}
    // 	> .text{
    // 		width: 68rem;
    // 		> .title{
    // 			font-size: 6.4rem;
    // 			font-weight: 900;
    // 			line-height: 1.2;
    // 			margin-bottom: 3.2rem;
    // 			p{
    // 				margin-bottom: 0;
    // 			}
    // 		}
    // 		> .info{
    // 			font-size: 2.4rem;
    // 			margin-bottom: 1.6rem;
    // 			line-height: 1.2;
    // 			> span{
    // 				color: #0070c9;
    // 				cursor: pointer;
    // 				&:hover{
    // 					text-decoration: underline;
    // 				}
    // 			}
    // 		}
    // 		> .continue{
    // 			font-size: 2.4rem;
    // 			> i{
    // 				margin-left: 1rem;
    // 			}
    // 		}
    // 	}
    // }
    // > .right{
    // 	position: relative;
    // 	width: 55%;
    // 	background: #d7d6d5;
    // 	display: flex;
    // 	align-items: center;
    // 	justify-content: flex-end;
    // 	> img{
    // 		object-fit: cover;
    // 	}
    // 	> .model{
    // 		height: 100%;
    // 		position: absolute;
    // 		left: 0;
    // 	}
    // 	> .text{
    // 		height: 45rem;
    // 		text-align: right;
    // 	}
    // }
  }
}
</style>
