<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.x_url" type="video/mp4" />
                </video> -->
                <video id="back_video" class="video fillWidth"  :src="pageData.x_url1" 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.x_url1" type="video/mp4" /> -->
                </video>
                <el-image :src="pageData.x_url" class="video fillWidth" fit="cover" v-if="flag && pageData.x_url !== undefined"></el-image>
            </div>    
            <div class="title">{{ pageData.x_title }}</div>  
            <div class="subTitle" v-html="pageData.x_subtitle"></div>  
            <div class="line"></div> 
        </div>
        <div class="center hflex fwrap">
            <div class="first">
                <div class="title" v-html="pageData.x_content"></div>
            </div>
            <div class="item" v-for="(item,index) in newsList" :key="index" @click="toNews(index)">
                <div class="hflex jbetween point" style="width: 100%">
                    <div class="title">{{ item.title }}</div>
                    <div class="vflex jbetween">
                        <div class="item_left_index">{{ index < 10 ? '0' + (index + 1) : index + 1 }}</div>
                        <img src="@/assets/images/common/right2.png" alt="" class="icon_right" />
                    </div>
                </div>
                <!-- <div class="hflex aend jbetween point" style="padding: 29px 0;width: 100%;">
                    <div class="text2"></div>
                </div> -->
                <div class="item_img" :style="{'background-image':'url(' + item.url + ')'}"></div>
            </div>
        </div>
        <el-divider class="loading hflex acenter jcenter point" v-if="load" @click="loadlist" v-loading.fullscreen.lock="fullscreenLoading">点击加载更多</el-divider>
        <el-divider class="loading hflex acenter jcenter point" v-if="!load&&page>1" @click="end">已经到底了</el-divider>
        <div class="topping hflex acenter jcenter point" v-if="scroll_top > 500" @click="toTop">
            <img src="@/assets/images/common/topping.png" alt="">
        </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: 'News',
    components: {
        Header,
        Footer
    },
    data() {
        return {
            pageData: {},
            newsList: [],
            footer: {},
            scroll_top: 0,
            page: 1,
            pageSize: 10,
            load: true,
            fullscreenLoading: false,
            autoplay: true,
            flag: true
        }
    },
    created() {
        that = this
        that.getConfig()
        that.getList()
        that.isBrow()
        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
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll) // 监听页面滚动

    },
    methods: {
        isBrow() {
            var ua = navigator.userAgent.toLowerCase();
            if(ua.match(/MicroMessenger/i)=="micromessenger" || ua.match(/QQ/i) == "qq") {
                that.autoplay = false
            }
        },
        // 获取基本配置信息
        getConfig() {
            that.$http.getConfig().then((res) => {
                // console.log('基础配置',res)
                if (res.data.code == 1) {
                    that.pageData = res.data.data
                    var temp = that.pageData.x_url.substr(that.pageData.x_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.pageData,'type',type)
                    that.footer = {
                        company: that.pageData.company,
                        phone: that.pageData.phone,
                        address: that.pageData.address,
                    }
                }
            })
            
        },
        // 获取新闻列表
        getList() {
            that.$http.getNewsList(that.page,that.pageSize).then((res) => {
                // console.log('新闻列表',res);
                if(res.data.code == 1) {
                    if(that.page == 1) {
                        that.newsList = res.data.data.list
                    } else {
                        that.newsList = that.newsList.concat(res.data.data.list)
                    }
                    if(res.data.data.list.length<that.pageSize) {
                        that.load = false
                    }
                    this.fullscreenLoading = false;
                    for(var i=0;i<that.newsList.length;i++) {
                        var temp = that.newsList[i].url.substr(that.newsList[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.newsList[i],'type2',type)
                    }
                }
            })
        },
        // 点击进入新闻详情
        toNews(index) {
            that.$router.push({
                path: '/detail',
                query: {
                    index: index,
                    id: that.newsList[index].id
                }
            })
        },
        // 监听页面滚动
        handleScroll() {
            this.scroll_top = document.documentElement.scrollTop
        },
        // 返回顶部
        toTop() {
            document.body.scrollTop = 0
            document.documentElement.scrollTop = 0
            this.scroll_top = document.documentElement.scrollTop
        },
        loadlist() {
            that.page += 1
            that.getList()
            this.fullscreenLoading = true;
        
        },
        end() {
            this.$message('已经到底了！');
        }
    }
}
</script>
<style scoped> 
@media (max-width: 750px) {
    
    .top {
        box-sizing: border-box;
        padding: 491px 100px 100px;
        height: 1080px !important;
    }
    .videoContainer {
        height: 1080px !important;
    }
    .center {
        min-height: 1080px;
        background: #FFFFFF;
        box-sizing: border-box;
        margin: 150px 0 0;
        padding: 150px 100px 0;
    }
    
}
.top {
    box-sizing: border-box;
    padding: 500px 100px 100px;
    height: 100vh;
}
.top .title {
    font-size: 60px;
    font-weight: 500;
    color: #fff;
    padding-bottom: 71px;
    padding-left: 151px;
}
.top .subTitle {
    font-size: 60px;
    font-weight: 500;
    color: #fff;
    padding-left: 151px;
    line-height: 90px;
}
.top .line {
    width: 1720px;
    height: 4px;
    background: #FFFFFF;
    margin: 58px 0;
}
.center {
    min-height: 1080px;
    background: #FFFFFF;
    box-sizing: border-box;
    margin: 150px 0 0;
    padding: 150px 100px 400px;
}
.center .first {
    width: 700px;
    padding-top: 125px;
    border-top: 4px solid #ccc;
    margin-right: 55px;
}
.center .first .title {
    font-size: 80px;
    font-weight: 500;
    color: #333333;
    line-height: 80px;
}
.center .item {
    padding-top: 125px;
    width: 380px;
    margin-left: 47px;
    border-top: 4px solid #ccc;
    margin-bottom: 100px;
    color: #333333;
}
.center .item:hover {
    color: #666;;
}
.center .item:hover .icon_right {
    animation: tran 0.2s linear;
    animation-iteration-count: 1
}
@keyframes tran {
    0% {
        transform: translate3d(-20px, 0 ,0);
        opacity: 0;
    }
    
    100% {
        transform: translate(0 ,0);
        opacity: 1;
    }
 }
.center .item:nth-child(4n+4) {
    margin-left: 0;
}
.center .item .title {
    font-size: 38px;
    font-weight: 500;
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
    line-clamp:2; 
    box-orient:vertical;
    line-height: 70px;
    height: 140px;
    /* color: #333333; */
}
.center .item .text2 {
    max-width: 340px;
    font-size: 38px;
    font-weight: 500;
    /* color: #333333; */
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
    line-clamp:2; 
    box-orient:vertical;
    width: 100%;
    line-height: 70px;
}
.center .item .item_left_index {
    font-size: 38px;
    font-weight: 500;
    /* color: #333333; */
}
.center .item .icon_right {
    width: 49px;
    height: 41px;
    margin-bottom: 20px;
}
.center .item .item_img {
    width: 395px;
    height: 570px;
    display: inline-block;
    vertical-align: top;
    background-size: cover;
    background-position: center center;
}
.loading {
    width: 100%;
    height: 100px;
    background: #fff;
    margin: 0 !important;
}
.topping {
    position: fixed;
    bottom: 100px;
    right: 45px;
    z-index: 999;
    width: 100px;
    height: 100px;
    background: #000000;
    opacity: 0.3;
    border-radius: 10px;
}
.topping img {
    width: 53px;
    height: 57px;
}
</style>