<template>
    <div class="window-height overflow-hide" ref="firstCard" @wheel="onChange">
        <div :class="{'hide':top>0}">
            <div class="column items-center" ref="firstScreen" :class="{'welcomes-hide':top>0}">
                <div class="logo" :class="{'animate__animated animate__fadeInDown':top==0}">
                    <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_1.png" alt="">
                </div>
                <div :class="{'animate__animated animate__fadeInUp':top==0}" style="margin-top: 2.343vw">
                    <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_838.png" style="width: 17.8vw;">
                </div>
                <div class="text-center q-mt-xl text-info" :class="{'animate__animated animate__fadeInUp':top==0}" style="width: 23.38vw;font-size: 0.9375vw;">
                    可云端编辑的专业级行程设计工具，为旅游行业量身打造打开网页就可以做出精美行程。
                </div>
                <div class="linkToSpace cusor-pointer" :class="{'animate__animated animate__fadeInUp':top==0}" @click="forwardLogin">
                    <div class="column items-center flex-center">
                        <span>立即使用</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="column items-center window-height two-cardss" :class="{'flex-center animate__animated animate__backInUp':top>0,'step-2':top>2}">
            <div class="row items-center">
                <div class="left-box step-2" v-show="top>2" :class="{'step-3':top>3}">
                    <div class="row items-center">
                        <div class="tabs-item cusor-pointer" :class="{'active':top==4}" @click="setTopSetupHandler(4)">设计</div>
                        <div class="tabs-item cusor-pointer" :class="{'active':top==5}" @click="setTopSetupHandler(5)">输出</div>
                        <div class="tabs-item cusor-pointer" :class="{'active':top==6}" @click="setTopSetupHandler(6)">共享</div>
                    </div>
                    <div class="tabs-content animate__animated animate__fadeIn" v-if="top==4">
                        <div class="title">所见即所得<br/>高效创作</div>
                        <div class="info">设计功能强大，一站完成行程包装所有需求</div>
                        <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_127.png">
                    </div>
                    <div class="tabs-content animate__animated animate__fadeIn" v-if="top==5">
                        <div class="title">同步生成行程文档</div>
                        <div class="info">同时生成横板或竖版的PDF行程，或生成图片，一步到位，轻松交付</div>
                        <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_127.png">
                    </div>
                    <div class="tabs-content animate__animated animate__fadeIn"  v-if="top==6">
                        <div class="title">读写分离，精确控制</div>
                        <div class="info">团队内容共享设计，协作从未如此简单</div>
                        <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_127.png">
                    </div>
                </div>
                <img src="https://im.oytour.com/website/%E7%BB%84%205.png" :class="{'step-1':top>1,'step-2':top==3}" class="animate__animated animate__fadeInUp img-change" style="width: 62vw;">
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { styleType } from 'element-plus/es/components/table-v2/src/common';
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';

const props = defineProps({
  scrollTop: {
    type: Number,
    required: true,
  }
})
const canCount = ref(true)
const top = ref(0)
const firstCard = ref<HTMLElement>()
const firstScreen = ref<HTMLElement>()

const onChange = (e:WheelEvent)=>{

    if((top.value<6 ||(e.deltaY<0 && top.value==6)) && props.scrollTop==0){
        e.preventDefault()
        e.stopPropagation()
    }else{
        return
    }
    
    if(!canCount.value) return
    if(e.deltaY<0 && top.value==0) return

    canCount.value=false
    top.value += e.deltaY>0?1:-1
    
    setTimeout(() => {
        canCount.value=true
    }, 50);
}
const setTopSetupHandler = (setup:number)=>{
    top.value=setup
}
const forwardLogin = ()=>{
    location.href='/login'
  }
</script>
<style scoped>
.website .logo{
    margin-top: 9.791vw;
}
.website .logo img{
    width: 23.54vw;
}
.website .text-info{
    color:#625A7E;
}
.website .linkToSpace{
    width:20.989vw;
    background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_735.png');
    background-size: 100% auto;
    padding-top: 10.41%;
    font-size: 1.35vw;
    color: #FFFFFF;
    text-shadow: 0px 0px 0.677vw rgba(21,62,161,0.94);
    text-align: center;
    user-select: none;
    position: relative;
}
.website .linkToSpace div{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.website .first-card{
    position:sticky;
    top: 0;
    height: 100vh;
    left: 0;
    width: 100vw;
    z-index: 1;
}
.website .static-item{
    position: static !important;
}
.website .welcomes-hide{
    animation: backOutUp; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 0.5s;
    animation-fill-mode: both;
}
.website .hide{
    animation: spinner-welcomes .5s linear forwards
}
@keyframes spinner-welcomes {
    100% {
        display: none !important;
        height: 0px;
        overflow: hidden;
    }
}

/* .website .flex-center .img-change{
    animation: spinner-welcomes-two-img .5s linear both
} */
@keyframes spinner-welcomes-two-img {
    0% {
        width: 62vw;
        margin-top: 0;
    }
    100% {
        width: 60vw;
        margin-top: 5.2vw;
    }
}
.website .img-change.step-1{
    width: 54.47vw !important;
}
.website .img-change.step-2{
    margin-right: 7.8125vw;
}
.website .two-cardss.step-2{
    /* align-items: end !important; */
}
.website .left-box.step-2{
    animation: left-box-step-2 .2s linear both;
    /* overflow: hidden; */
    margin-right: -5.05vw;
}
.website .left-box.step-3{
    animation: left-box-step-3 .2s linear both;
}
@keyframes left-box-step-2 {
    0% {
        width: 0px;
    }
    100% {
        width: 7.8125vw;
    }
}
@keyframes left-box-step-3 {
    0% {
        width: 7.8125vw;
        margin-right: -5.05vw;
    }
    100% {
        width: auto;
        margin-right: 2.6vw;
    }
}
.website .tabs-item{
    background: #DDE3F3;
    border-radius: 1.3vw;
    margin-right: 1.5625vw;
    height: 2.6vw;
    line-height: 2.6vw;
    padding: 0 1.77vw;
    font-weight: 800;
    font-size: 1.66vw;
    color: #ACB7D6;
    min-width: 7.3958vw;
    user-select: none;
}
.website .tabs-item.active{
    background: linear-gradient(134deg, #649DED, #570AD8);
    box-shadow: 0px 0px 1.40625vw 0px #9CB2E1;
    color: #FFF;
}
.website .tabs-content{
    margin-top: 2.6vw;
    min-width: 26.04vw;
    overflow: hidden;
    user-select: none;
    min-height: 11.458vw;
}
.website .tabs-content .title{
    font-weight: 800;
    font-size: 2.291vw;
    color: #000000;
    line-height: 1;
}
.website .tabs-content .info{
    font-weight: 400;
    font-size: 0.9375vw;
    color: #625A7E;
    margin:1.5625vw 0;
}
.website .tabs-content img{
    width: 2.291vw;
    cursor: pointer;
}
</style>