import pageInit from "../../minixs/pageInit.js";
import {culturalValuesDatas,culturalDatas,imgsDatas,introDatas} from  "../../../../assets/img/data/aboutData.js";
export default {
    name: 'home',
    template: '',
    mixins:[pageInit],
    components: {},
    props: [],
    setup(props, {attrs, slots, emit}) {
        const {proxy} = Vue.getCurrentInstance();
        let culturalValuesData=Vue.ref(culturalValuesDatas());
        let culturalData=Vue.ref(culturalDatas());
        let introData=Vue.ref(introDatas());
        var imgs = Vue.ref(imgsDatas());
        let flag =Vue.ref(true);
        let i=Vue.ref(0);
        let setWrap = (Y,type) =>{
            let hei=$('.wrap-container>section').first().outerHeight();
            let heiF=$('.footer-section-con').outerHeight();
            let sectionLength=$('.wrap-container>section').length;
            $('.wrap-container section:nth-child('+(i.value+1)+') .wow').removeAttr('style');
            // 控制滑动一次
            if(flag.value){
                if(type == 'mouse'){
                    // 上滑
                    if(Y<0){
                        // 不能上滑了
                        if(i.value>0){
                            i.value--;
                            flag.value = false;
                            $('.wrap-container').animate({top:-i.value*hei},1000,function(){
                                flag.value=true;
                            })
                        }
                    }//下滑
                    else{
                        // 这个if让它不能让下继续滑动
                        if(i.value<7){
                            i.value++;
                            flag.value = false;
                            let top=-i.value*hei;
                            if(i.value+1==sectionLength){
                                top=-i.value*hei+(hei-heiF);
                            }
                            $('.wrap-container').animate({top:top},1000,function(){
                                flag.value=true;
                            })
                        }
                    }
                }else if(type=='touchDown'){
                    // 这个if让它不能让下继续滑动
                    if(i.value<7){
                        i.value++;
                        flag.value = false;
                        let top=-i.value*hei;
                        if(i.value+1==sectionLength){
                            top=-i.value*hei+(hei-heiF);
                        }
                        $('.wrap-container').animate({top:top},1000,function(){
                            flag.value=true;
                        })
                    }
                }else if(type=='touchUp'){
                    if(i.value>0){
                        i.value--;
                        flag.value = false;
                        $('.wrap-container').animate({top:-i.value*hei},1000,function(){
                            flag.value=true;
                        })
                    }
                }

            }
        }
        let MousewheelFun=(e)=>{
            if($(window).width()>767){
                setWrap(e.deltaY,'mouse')
            }
            setTimeout(function (){
                setNavStyle();
            },700)
        }
        // 设置导航的样式
        let setNavStyle=()=>{
            if(i.value==1 || i.value==2 || i.value==4 || i.value==6){
                $('.navigation').removeClass('navigation-white');
                $('.logo-outer .hg-logo').attr('src','assets/img/logo.png');

            }else{
                $('.navigation').addClass('navigation-white');
                $('.logo-outer .hg-logo').attr('src','assets/img/logo-footer.png');

            }
        }
        //移动端滑动
        let startX=Vue.ref(0);
        let startY=Vue.ref(0);
        let endX=Vue.ref(0);
        let endY=Vue.ref(0)
        let touchFunStart =(e)=>{
            startX.value=e.touches[0].pageX;
            startY.value=e.touches[0].pageY;
        }
        let touchFun =(e)=>{
            if($(window).width()>767){
                endX.value=e.changedTouches[0].pageX;
                endY.value=e.changedTouches[0].pageY;
                let X=endX.value-startX.value;
                let Y=endY.value-startY.value;
                if(Math.abs(Y) > Math.abs(X) && Y>0){
                    //向下
                    setWrap(e.deltaY,'touchUp')

                }else if(Math.abs(Y) > Math.abs(X) && Y<0){
                    //向上
                    setWrap(e.deltaY,'touchDown')

                }
            }

        }
        //联系方式是否出现
        let isConcat=Vue.ref(false);
        //设置从footer进入页面的显示位置
        let setFormFooter=(item)=>{
            let id=proxy.$route.params.id;
            if(item){
                id=item;
            }
            if(id){
                i.value=id;
                let hei=$('.wrap-container>section').first().outerHeight();
                flag.value = false;
                $('.wrap-container').animate({top:-i.value*hei},1000,function(){
                    flag.value=true;
                })
                setTimeout(function (){
                    $('.wrap-container section:nth-child('+(Number(i.value)+1)+') .wow').removeAttr('style');
                    $('.about-widget-content li a').unbind('click.about').on('click.about',function (){
                        setFormFooter($(this).data('id'));
                    })
                    setNavStyle()
                },300)

            }
        }
        Vue.onMounted(() =>{
            setFormFooter();

        })


        return {
            imgs,
            culturalValuesData,
            culturalData,
            MousewheelFun,
            flag,
            i,
            isConcat,
            setNavStyle,
            setFormFooter,
            touchFun,
            touchFunStart,
            startX,
            startY,
            endX,
            endY,
            introData
        }

    }

}