<template>
    <div id="content"  class="vflex">
        <div class="js_snap js_intro is_top is_started" data-snap-needs-cancel="" data-enable-bit-scroll="" data-top="">
            <header id="header">
                <div class="inner">
                    <div class="btn menu fixed"> 
                        <button class="fit" @mouseover="mouseOver()" @mouseleave="mouseLeave()" :class="over?'over':''" @click="toshow()">
                            <ul class="absolute full__w" v-if="!show" style="left: 0">
                                <li class="absolute" :class="over?'absolute1':''"></li>
                                <li class="absolute" :class="over?'absolute2':''"></li>
                                <li class="absolute" :class="over?'absolute3':''"></li>
                            </ul>
                            <ul class="absolute full__w" v-if="show">
                                <li class="absolute_1" :class="over?'absolute_11':''"></li>
                                <li class="absolute_2"></li>
                                <li class="absolute_3" :class="over?'absolute_33':''"></li>
                            </ul>
                        </button>
                    </div>
                </div>
                <div id="floating_menu" ref="floating_menu">
                    <div class="inner">
                        <div class="frame">
                            <div class="title1">绿巍仿真植物有限公司</div>
                            <div class="line"></div>
                            <div class="text_box point" @click="toDetail(1)">
                                <div class="text1">产品服务</div>
                                <div class="text2">Product Services</div>
                            </div>
                            <div class="text_box point" @click="toDetail(2)">
                                <div class="text1">新闻资讯</div>
                                <div class="text2">News</div>
                            </div>
                            <div class="text_box point" @click="toDetail(3)">
                                <div class="text1">跨境贸易</div>
                                <div class="text2">Cross-border Trade</div>
                            </div>
                            <div class="text_box point" @click="toDetail(4)">
                                <div class="text1">关于我们</div>
                                <div class="text2">About us</div>
                            </div>
                            <div class="text_box point" @click="toDetail(5)">
                                <div class="text1">联系我们</div>
                                <div class="text2">Contact us</div>
                            </div>
                            <div class="line"></div>
                        </div>
                    </div>
                </div>
            </header>
        </div>
        <div class="shua shua_js" v-if="!show_white && !flag"></div>
        <div ref="scrollview" @mousewheel="scrollChange" @DOMMouseScroll="scrollChange" >
            <div class="one" >
                <div class="videoContainer">
                    <video id="back_video" class="video fillWidth"  :src="pageData.url11" muted :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true"  crossorigin="anoymous" v-if="!flag">
                        <!-- <source type="video/mp4" /> -->
                    </video>
                    <canvas id="cvback_video" style="display:none;"></canvas>
                    <el-image :src="pageData.url1" class="video fillWidth" v-if="flag && pageData.url1 !== undefined"></el-image>
                </div>
                <div class="subTitle">
                    <div v-html="pageData.subtitle1"></div>
                </div>
                <div class="title">
                    <div v-show="scroll_top == 0">
                        <h1 style="color: #fff;">{{pageData.title}}</h1>
                        <div class="line" style="background: rgba(255,255,255,.5)"></div>
                        <div class="hflex jbetween" v-show="show_white">
                            <div class="text point">{{pageData.home_time}}</div>
                            <div class="hflex point" @click="scorll_down()">
                                <img class="down" src="@/assets/images/common/fv-arrow-down.svg" alt="" />
                                <div class="text">向下滑动</div>
                            </div>
                        </div>
                    </div>
                    <div class="content" v-html="pageData.subtitle2"></div>
                </div>
                <div class="icon_down vflex acenter jbetween point" v-if="down_icon" @click="scorll_down2(-1)">
                    <img src="@/assets/images/common/icon-down-1.png" alt="" />
                    <img src="@/assets/images/common/icon-down-2.png" alt="" />
                </div>
            </div>
            <!-- <div class="fullPage"> -->
            <div class="two_once" id="scroll_once" v-if="!flag">
                <div class="shua shua_js" v-if="fullpage.current == 1 && !flag"></div>
            </div>
        </div>
        <div class="fullPageContainer" ref="fullPageContainer" @mousewheel="mouseWheelHandle" @DOMMouseScroll="mouseWheelHandle">
            <div v-for="(item,index) in pageList" :key="index" class="two">
                <div class="video_bg" :id="'video' + index">
                    <el-image :src="item.url" fit="cover" class="img" v-if="flag && item.url !== undefined"></el-image>

                    <div class="shua shua_js" v-if="fullpage.current - 2 == index && !flag"></div>
                    
                    <video :src="item.url1" muted :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true"  preload="auto" crossorigin="anymous" v-if="!flag"></video>
                    <div class="content hflex jbetween">
                        <div class="content_left">
                            <div class="name" :style="!fullpage.isScrolling?'color: #fff':''">{{ item.title }}</div>
                            <div class="wenan" v-html="item.content" :style="!fullpage.isScrolling?'color: #fff':''"></div>
                        </div>
                        <div class="content_right vflex acenter jend">
                            <div class="vflex acenter">
                                <div v-for="(items,indexs) in pageList.length" :key="indexs">
                                    <div class="circle point" :class="index == indexs?'circle_active':''" @click="jump(indexs)"></div>
                                </div>
                                <div class="icon_down2 point vflex acenter jbetween" @click="scorll_down2(index + 1)">
                                    <img src="@/assets/images/common/icon-down-1.png" alt="" />
                                    <img src="@/assets/images/common/icon-down-2.png" alt="" />
                                </div>
                            </div>
                            <div class="right_index" :style="!fullpage.isScrolling?'color: #fff':''">
                                <span class="indexs">{{ index < 10 ? '0' + (index + 1) : index + 1 }}</span>
                                <span>/{{ pageList.length < 10 ? '0' + pageList.length : pageList.length }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- </div> -->
        <div class="three"  @mousewheel="scrollChange2" @DOMMouseScroll="scrollChange2" ref="videos">
            <div class="video_bg">
                <div class="shua shua_js" v-if="fullpage.current - 2 == pageList.length && !flag"></div>
                <video id="videos" :src="pageData.url22" muted  :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true"  preload="auto" crossorigin="anymous" v-if="!flag"></video>
                <el-image id="videos" class="videos_img" :src="pageData.url2" fit="cover" v-if="flag && pageData.url2 !== undefined"></el-image>
            </div>
            <div class="three_text" :style="!fullpage.isScrolling?'color: #fff':''" v-html="pageData.subtitle3"></div>
        </div>
        <div class="three">
            <div class="video_bg">
                <video id="videos2" :src="pageData.url33" muted   :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true"  preload="auto" crossorigin="anymous" v-if="!flag"></video>
                <el-image class="videos_img" :src="pageData.url3" fit="cover" v-if="flag && pageData.url3 !== undefined"></el-image>
            </div>
        </div>
        <Footer :footer="footer"></Footer>   
    </div>
</template>
<script>
import Footer from '@/components/footer.vue'
import { isElementNotInViewport } from "@/components/utils";
//页面引入swiper
var that = ''
export default {
    name: 'index',
    components: {
        Footer
    },
    data() {
        return {
            isactive: true,
            show: false,
            over: false,
            show_white: false,
            fixStyle: {},
            pageData: {},
            pageList: [],
            scroll_top: 0,
            oldScrollTop: 0,
            windowWidth: 0,
            windowHeight: 0,
            index: -1,
            footer: {},
            fullpage: {
                current: 1,     //当前页面编号
                isScrolling: false,     //是否在滚动，
                deltaY: 0,      //判断往上还是往下
            },
            flag: true,
            dialogVisible: false,
            autoplay: true,
            a: '',
            down_icon: false
        }
    },
    created() {
        that = this
        
        let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
        
        that.flag = flag
        if(that.flag === null) {
            
            that.flag = false

        }

        // this.getVideoStyle()
        // document.addEventListener("WeixinJSBridgeReady", function () {
        //     document.getElementById("back_video").play();
        // }, false);
        that.isBrow()
        this.getConfig()
        this.getList()
        // that.getData()
        this.a = document.documentElement.style.fontSize
    },
    mounted() {
        
        if(that.flag) {
            console.log('手机端');
        } else {
            window.addEventListener("beforeunload", () => {
                document.body.scrollTop = 0
                // firefox
                document.documentElement.scrollTop = 0
                window.scrollTo(0,0);

                that.scroll_top = 0
            });
            const scrollview = this.$refs['fullPageContainer']
            scrollview.addEventListener('scroll', this.mouseWheelHandle, true)
            const scrollview2 = this.$refs['scrollview']
            scrollview2.addEventListener('scroll', this.scrollChange, true)
            const scrollview3 = this.$refs['videos']
            scrollview3.addEventListener('scroll', this.scrollChange2, true)
        }
        
        window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
    },
    
    methods: {
        isBrow() {
            var ua = navigator.userAgent.toLowerCase();
            if(ua.match(/MicroMessenger/i)=="micromessenger" || ua.indexOf('MQQBrowser') > 0 || ua.indexOf('baidu') > 0 || ua.indexOf('UCBrowser') > 0 ) {
                that.autoplay = false
            }
        },
        init(id) {
            var canvas = document.createElement('canvas');
			const video = document.getElementById(id);
			// video.setAttribute('crossOrigin', 'anonymous');
			video.currentTime = 1; //currentTime 属性设置或返回视频播放的当前位置（以秒计）   重要！不设置会导致第一帧图片不显示
			canvas.width = video.clientWidth;
			canvas.height = video.clientHeight;
			video.onloadeddata = (() => {
				canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
				var dataURL = canvas.toDataURL('image/png');
				video.setAttribute("poster", dataURL); // 设置标签的 poster 属性的值为 base64 编译过后的canvas绘图。	
			})
        },
        //获取首页接口信息
        getConfig() {
            that = this
            this.$http.getConfig().then((res) => {
                if (res.data.code == 1) {
                    that.pageData = res.data.data
                    var temp = that.pageData.url1.substr(that.pageData.url1.length - 3,3)
                    var type = ''
                    if(temp == 'jpg' || temp == 'png' || temp == 'gif') {
                        type = 'image'
                    } else if(temp == 'mp4' || temp == 'avi') {
                        type = 'video'
                    }
                    that.$set(that.pageData,'type1',type)
                    if(that.pageData.type1 == 'video') {
                        that.init('back_video')
                    }
                    var temp2 = that.pageData.url2.substr(that.pageData.url2.length - 3,3)
                    var type2 = ''
                    if(temp2 == 'jpg' || temp2 == 'png' || temp2 == 'gif') {
                        type2 = 'image'
                    } else if(temp2 == 'mp4' || temp2 == 'avi') {
                        type2 = 'video'
                        // that.init(that.pageData.url2).then((result) => {
                        //     that.pageData.url2 = result
                        // })
                    }
                    that.$set(that.pageData,'type2',type2)
                    var temp3 = that.pageData.url3.substr(that.pageData.url3.length - 3,3)
                    var type3 = ''
                    if(temp3 == 'jpg' || temp3 == 'png' || temp3 == 'gif') {
                        type3 = 'image'
                    } else if(temp3 == 'mp4' || temp3 == 'avi') {
                        type3 = 'video'
                        // that.init(that.pageData.url3).then((result) => {
                        //     that.pageData.url3 = result
                        // })
                    }
                    that.$set(that.pageData,'type3',type3)
                    that.footer = {
                        company: that.pageData.company,
                        phone: that.pageData.phone,
                        address: that.pageData.address,
                    }
                }
            })
            setTimeout(() => {
                this.show_white = true
                this.isactive = false
            }, 1000);

        },
        // 获取首页列表接口
        getList() {
            that.$http.getIndexList().then((res) => {
                console.log('首页列表',res);
                if(res.data.code == 1) {
                    that.pageList = res.data.data.list
                    for(var i=0;i<that.pageList.length;i++) {
                        var temp = that.pageList[i].url.substr(that.pageList[i].url.length - 3,3)
                        var type = ''
                        if(temp == 'jpg' || temp == 'png' || temp == 'gif') {
                            type = 'image'
                        } else if(temp == 'mp4' || temp == 'avi') {
                            type = 'video'
                        }
                        that.$set(that.pageList[i],'type2',type)
                    }
                }
            })
        },
        //监听屏幕大小实时给播放器设置宽高
        getVideoStyle() {
            window.onresize = () => {
                that.windowWidth = document.body.clientWidth
                that.windowHeight = document.body.clientHeight
                const windowAspectRatio = that.windowHeight / that.windowWidth
                // console.log(windowWidth, windowHeight, windowAspectRatio, '屏幕实时大小')
                let videoWidth
                let videoHeight
                if (windowAspectRatio < 0.5625) {
                    videoWidth = that.windowWidth
                    videoHeight = videoWidth * 0.5625
                    this.fixStyle = {
                        height: that.windowWidth * 0.5625 + 'px',
                        width: that.windowWidth + 'px',
                        'margin-bottom': (that.windowHeight - videoHeight) / 2 + 'px',
                        'margin-left': 'initial'
                    }
                } else {
                    videoHeight = that.windowHeight
                    videoWidth = videoHeight / 0.5625
                    this.fixStyle = {
                        height: that.windowHeight + 'px',
                        width: that.windowHeight / 0.5625 + 'px',
                        'margin-left': (that.windowWidth - videoWidth) / 2 + 'px',
                        'margin-bottom': 'initial'
                    }
                }
                if(that.windowWidth <= 750) {
                    that.flag = true
                } else {
                    that.flag = false
                }
            }
            window.onresize()
        },
        // 显示/隐藏菜单
        toshow() {
            if(this.show) {
                this.$refs.floating_menu.style.display = 'none';
                this.show = false
            } else {
                this.$refs.floating_menu.style.display = 'block';
                this.show = true
            }
           
        },
        // 鼠标移入
        mouseOver() {
            this.over = true
        },
        // 鼠标离开
        mouseLeave() {
            this.over = false
        },
        // 点击进入菜单详情
        toDetail(index) {
            if(index == '1') {
                that.$router.push('/product')
            } else if(index == '2') {
                that.$router.push('/news')
            } else if(index == '3') {
                that.$router.push('/trade')
            } else if(index == '4') {
                that.$router.push('/about')
            } else if(index == '5') {
                that.$router.push('/contact')
            }
        },
        // 监听页面滑动
        handleScroll() {
            that = this
            that.windowHeight = document.documentElement.clientHeight
            this.scroll_top = document.documentElement.scrollTop
            console.log(this.scroll_top,that.windowHeight);
            // that.windowHeight = document.documentElement.clientHeight;
            if(this.scroll_top > 200 && this.scroll_top < that.windowHeight && !that.flag) {
                that.down_icon = true
            } else  {
                that.down_icon = false
            }
        },
        // 向下切换
        next() {
            let len = that.pageList.length + 4
            if(that.fullpage.current + 1 <= len) {
                that.fullpage.current += 1
                this.move(this.fullpage.current)
            }
        },
        // 往上切换
        pre() {
            
            if(that.fullpage.current >= 0) {
                that.fullpage.current -= 1
                that.move(that.fullpage.current)
            }
        },
        move(index) {
            this.fullpage.isScrolling = true
            this.directToMove(index)
            setTimeout(() => {
                this.fullpage.isScrolling = false

            }, 1000);
        },
        directToMove(index) {
            console.log('index:',index);
            if(index == 1 || index == -1) {
                setTimeout(() => {
                    document.querySelector('#scroll_once').scrollIntoView({
                        block: 'start',
                        behavior: 'smooth'
                    })
                }, 500);
                return
            }
            if(index == that.pageList.length + 2) {
                setTimeout(() => {
                    document.querySelector('#videos').scrollIntoView({
                        block: 'start',
                        behavior: 'smooth'
                    })
                }, 500);
                return
            }
            if(index == 0) {
                index = 2
            }
            
            // scrollPage.style.transform = `translateY(${scrollHeight})`
            setTimeout(() => {
                document.querySelector('#video' + (index - 2)).scrollIntoView({
                    block: 'start',
                    behavior: 'smooth'
                })
            }, 500);
           
        },
        mouseWheelHandle(event) {
            // that.show_white = false
            that.isactive = true
            let evt = event || window.event
            if(evt.stopPropageation) {
                evt.stopPropageation()
            } else {
                evt.returnValue = false
            }
            if(this.fullpage.isScrolling) {
                return false
            }
            let e = event.originalEvent || event
            this.fullpage.deltaY = e.deltaY || e.detail
            if(this.fullpage.deltaY > 0) {
                this.next()
            } else if(this.fullpage.deltaY < 0) {
                this.pre()
            }
        },
       
        scrollChange(event) {
            // console.log('鼠标滑动');
            let evt = event || window.event
            if(evt.stopPropageation) {
                evt.stopPropageation()
            } else {
                evt.returnValue = false
            }
            if(this.fullpage.isScrolling) {
                return false
            }
            let e = event.originalEvent || event
            this.fullpage.deltaY = e.deltaY || e.detail
            const content = document.getElementById('video0');
            const {top, bottom}=content.getBoundingClientRect();
            console.log(top,bottom,that.windowHeight);
            if(this.fullpage.deltaY > 0) {
                if(bottom > 0 && top < that.windowHeight + 50) {
                    this.next()
                } else {
                    document.documentElement.scrollTop += 50    
                }
            } else if(this.fullpage.deltaY < 0) {
                // this.pre()
                document.documentElement.scrollTop -= 50
            }
        },
        scrollChange2(event) {
            let evt = event || window.event
            if(evt.stopPropageation) {
                evt.stopPropageation()
            } else {
                evt.returnValue = false
            }
            if(this.fullpage.isScrolling) {
                return false
            }
            let e = event.originalEvent || event
            this.fullpage.deltaY = e.deltaY || e.detail
            var test = this.scroll_top
            const content = document.getElementById('video' + (that.pageList.length - 1));
            const {top, bottom}=content.getBoundingClientRect();
            // var test = this.scroll_top
            // console.log(test);
            if(this.fullpage.deltaY > 0) {
                // this.next()
                document.documentElement.scrollTop += 50
            } else if(this.fullpage.deltaY < 0) {
                if(-top < that.windowHeight + 50 && bottom >= 0) {
                    this.pre()
                } else {
                    document.documentElement.scrollTop -= 50
                }
            }
        },
        // 点击向下滑动
        scorll_down() {
            var width = document.documentElement.clientHeight
            
            if(that.flag) {
                document.documentElement.scrollTop = this.scroll_top + width / 8
            } else {
                document.documentElement.scrollTop = this.scroll_top + width / 2
            }
            this.scroll_top = document.documentElement.scrollTop
        },
        // 点击向下切换屏幕
        scorll_down2(index) {
            if(!that.flag) {
                this.next()
            } else {
                document.querySelector('#video' + index ).scrollIntoView({
                    block: 'start',
                    behavior: 'smooth'
                })
            }
            
        },
        // 点击直接跳转相应屏幕
        jump(index) {
            console.log(index);
            that.isactive = true
            this.fullpage.current = index + 2
            if(this.fullpage.isScrolling) {
                return false
            }
            
            this.move(this.fullpage.current)
           
        },
        
    }
}
</script>
<style scoped> 
@import '../assets/css/common.css';
@import '../assets/css/top.css';
@import '../assets/css/index.css';

</style>