<template>
    <div>
        <Header></Header>
        <div class="top">
            <div class="videoContainer">
                <!-- <video id="back_video" class="video fillWidth" muted   :autoplay="autoplay" loop :controls="false"playsinline preload="auto" crossorigin="anoymous">
                    <source :src="pageData.video" type="video/mp4" />
                </video> -->
                <video id="back_video" class="video fillWidth"  :src="pageData.g_pic1" muted :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true"  crossorigin="anoymous" v-if="!flag">
                    <!-- <source :src="pageData.g_pic1" type="video/mp4" /> -->
                </video>
                <el-image  :src="pageData.g_pic" class="video fillWidth" fit="cover" v-if="flag && pageData.g_pic !== undefined"></el-image>
            </div>    
            <div class="title">关于我们</div>  
            <div class="title">About us</div>  
            <div class="subTitle" v-html="pageData.g_content"></div>  
            <div class="line"></div> 
        </div>
        <div class="center hflex" id="center" @touchstart="leftSlide" @touchend="rightSlide">
            <div class="list hflex" id="scroll">
                <div class="item" v-for="(item,index) in pageList" :key="index">
                    <el-image fit="cover" :src="item.url" alt="" class="item_img" v-if="item.url !== 'undefind'" />
                    <div class="item_text" v-html="item.content"></div>
                </div>
                <!-- <div class="item" v-for="(item,index) in pageList">
                    <el-image fit="cover" :src="item.url" alt="" class="item_img" v-if="item.url !== 'undefind'" />
                    <div class="item_text" v-html="item.content"></div>
                </div> -->
            </div>
            <!-- <div class="list2 hflex" id="scroll2" >
                <div class="item" v-for="(item,index) in pageList" :key="index">
                    <el-image fit="cover" :src="item.url" alt="" class="item_img" v-if="item.url !== 'undefind'" />
                    <div class="item_text" v-html="item.content"></div>
                </div>
                
            </div> -->
        </div>
        <Footer :footer="footer"></Footer>

    </div>
</template>
<script>
import Header from '@/components/header.vue'
import Footer from '@/components/footer.vue'
var that = ''
export default {
    name: 'About',
    components: {
        Header,
        Footer
    },
    data() {
        return {
            pageData: {},
            pageList: [],
            div_width: 0,
            footer: {},
            autoplay: true,
            flag: true,
            touch: {
                startX: 0,
                startY: 0,
                endX:0,
                endY: 0,
            },
            timer: '',
            box1: '',
            box2: '',
            x :0

        }
    },
    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
        that.getConfig()
        that.isBrow()
    },
    mounted() {
        that.getList()
        setTimeout(() => {
            that.isScroll()
        }, 500);
       
    },
    methods: {
        isScroll() {
            // that._box1 = document.getElementById("scroll");
            // that._box2 = document.getElementById("scroll2");
            that.box1 = document.getElementById("scroll").offsetWidth
            that.box2 = document.documentElement.clientWidth - 100  
            this.timer = setInterval(this.fun, 30);
        },
        fun() {
            // console.log(that.x);
            
            document.getElementById("center").scrollLeft = that.x

            // console.log(document.getElementById("scroll").scrollLeft);
            // that._box2.scrollLeft += that.x + wt

            that.x++;
            console.log(that.x,that.box1);
            if((that.x + that.box2 - that.box1) == 0){
                console.log('完成');
                clearInterval(this.timer);
            }
        },
        isBrow() {
            var ua = navigator.userAgent.toLowerCase();
            if(ua.match(/MicroMessenger/i)=="micromessenger" || ua.match(/QQ/i) == "qq") {
                that.autoplay = false
            }
        },
        // 获取移动列表宽度
        getWidth() {
            var data = document.getElementById("scroll").offsetWidth;
            // var clientWidth = document.body.clientWidth
            data = data / 2
            // console.log(data);
            that.div_width = data
        },
        // 获取基础配置信息
        getConfig() {
            that.$http.getConfig().then((res) => {
                if(res.data.code == 1) {
                    that.pageData = res.data.data
                    var temp = that.pageData.g_pic.substr(that.pageData.g_pic.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,'type',type)
                    that.footer = {
                        company: that.pageData.company,
                        phone: that.pageData.phone,
                        address: that.pageData.address,
                    }
                }
            })
        },
        // 获取关于我们
        getList() {
            that.$http.getAboutList().then((res) => {
                // console.log('关于我们',res);
                if(res.data.code == 1) {
                    that.pageList = res.data.data.list
                    setTimeout(() => {
                        that.getWidth()
                    }, 1000);
                }
            }) 
        },
        leftSlide(e) {
            // console.log(e);
            clearInterval(this.timer);
            // that.touch.startX = e.touches[0].pageX
        },
        rightSlide(e) {
            
        }
    },
    destroyed() {
        console.log(this.timer);
        clearInterval(this.timer);

    }
}
</script>
<style scoped> 
:root {
    --div_width: 0
}
.top {
    box-sizing: border-box;
    padding: 500px 100px 0;
    min-height: 100vh;
}
.top .title {
    font-size: 60px;
    font-weight: 500;
    color: #fff;
    padding-left: 151px;
}
.top .subTitle {
    font-size: 60px;
    font-weight: 500;
    color: #fff;
    padding-left: 151px;
    line-height: 90px;
    padding-top: 79px;
}
.top .line {
    width: 1720px;
    height: 4px;
    background: #FFFFFF;
    margin: 58px 0;
}
.center {
    width: 100%;
    min-height: 1297px;
    box-sizing: border-box;
    padding: 200px 100px 159px;
    background: #fff;
    overflow: hidden;
    /* overflow: scroll; */
    position: relative;

}

@media screen and (min-width: 2015px) {
    
    .center {
        min-height: 120vh;

    }
}
.center .list {
    /* width: 100%; */
    list-style:none;
    position: absolute;
    top: 200px;
    left: 100px;
    /* margin-bottom: 159px; */
    /* overflow: auto; */
    /* left: 0px; */
    /* animation: move 20s infinite linear; */
}
.center .list2 {
    /* width: 100%; */
    list-style:none;
    position: absolute;
    top: 200px;
    left: calc(100vw - 50px);
    /* margin-bottom: 159px; */
    /* overflow: auto; */
    /* left: 0px; */
    /* animation: move 20s infinite linear; */
}
@keyframes move {
    from {
        transform: translate(0,0);
    }
    to {
        transform: translate(var(--div_width),0);
    }
}
.pause {
    animation-play-state: paused !important;
}
.restart {
    animation-play-state: running !important;
}
@keyframes move2 {
    from {
        transform: translate(0,0);
    }
    to {
        transform: translate(var(--div_width) ,0);
    }
}
.center  .item {
    width: 395px;
    margin-right: 47px;
}
/* .center .list {
    width: 395px;
    margin-right: 47px;
    left: 0;
} */
.center  .item .item_img {
    width: 395px;
    height: 570px;
}
.center .list:hover,.list2:hover {
    animation-play-state:paused;

}
.center  .item .item_img:hover {
    transfORM: scale(1.1);
}
.center  .item .item_text {
    padding-top: 36px;
    font-size: 38px;
    font-weight: 500;
    color: #333333;
    line-height: 52px;
    max-width: 395px;
}
@media screen and (max-width: 750px) {
    
    .top {
        box-sizing: border-box;
        padding: 269px 100px 0;
        min-height: 1080px;
    }
    .center {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    ::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }
   >>> .footer {
    position: absolute;
   }

}
</style>