<template>
    <div>
        <Header></Header>
        <div class="content">
            <div class="title">{{ pageData.title }}</div>
            <div class="date">发布时间：{{ pageData.create_time }}</div>
            <div class="cont" v-html="pageData.content"></div>
            <div class="list" v-if="newsList.length > 0">
                <div class="title">返回列表</div>
                <div class="item" v-for="(item,indexs) in newsList" :key="indexs">
                    <div class="item_text point" @click="toNews(indexs+index,item.id)">{{ indexs + index + 1 }}.{{ item.title }}</div>
                </div>
            </div>
        </div>
        <div class="topping hflex acenter jcenter point" v-if="scroll_top > 1000" @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: 'Detail',
    components: {
        Header,
        Footer
    },
    data() {
        return {
            id: '',
            index: 1,
            pageData: {},
            newsList: [],
            footer: {},
            scroll_top: 0
        }
    },
    watch: {
        '$route.query' () {
            Object.assign(this.$data,this.$options.data())
            this.init()
        }
    },
    created() {
        that = this
        this.init()

    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll) // 监听页面滚动

    },
    methods: {
        // 初始化
        init() {
            
            this.id = this.$route.query.id
            that.index = Number(that.$route.query.index) + 1
            // console.log('id=',this.id);
            // console.log('index=',this.index);
            that.getDetail()
            that.getConfig()
        },
        // 获取基本配置
        getConfig() {
            that.$http.getConfig().then((res) => {
                if (res.data.code == 1) {
                    that.footer = {
                        company: res.data.data.company,
                        phone: res.data.data.phone,
                        address: res.data.data.address,
                    }
                }
            })
        },
        // 获取新闻详情
        getDetail() {
            var data = that.id
            that.$http.getNewsDetail(data).then((res) => {
                // console.log('新闻详情',res);
                if(res.data.code == 1) {
                    that.pageData = res.data.data.detail
                    that.newsList = res.data.data.list
                    that.pageData.create_time = that.pageData.create_time * 1000
                    var year = new Date(that.pageData.create_time).getFullYear()
                    var month = new Date(that.pageData.create_time).getMonth()
                    var date = new Date(that.pageData.create_time).getDate()
                    if(month <10) {
                        month = '0' + month
                    }
                    if(date <10) {
                        date = '0' + date
                    }
                    that.pageData.create_time = year + '-' + month + '-' + date
                }
            })
        },
       // 点击进入新闻详情
       toNews(index,id) {
            that.$router.push({
                path: '/detail',
                query: {
                    index: index,
                    id: id
                }
            })
        },
         // 监听页面滚动
         handleScroll() {
            this.scroll_top = document.documentElement.scrollTop
        },
        // 返回顶部
        toTop() {
            document.body.scrollTop = 0
            document.documentElement.scrollTop = 0
            this.scroll_top = document.documentElement.scrollTop
        }
    }
}
</script>
<style scoped> 
.content {
    background: #fff;
    box-sizing: border-box;
    padding: 267px 216px 120px;
    min-height: 100vh;
}
.content .title {
    font-size: 56px;
    font-weight: bold;
    color: #333333;
    line-height: 92px;
}
.content .date {
    font-size: 24px;
    font-weight: 400;
    color: #666666;
    padding: 61px 0 109px;
}
.content .list {
    margin-top: 120px;
    padding: 42px 0 0;
    border-top: 2px solid #ddd;
}
.content .list .title {
    font-size: 36px;
    font-weight: 400;
    color: #4294F7;
    line-height: 55px;
    position: relative;
}
.content .list .title::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 176px;
    width: 3px;
    height: 35px;
    background: #4294F7;
}
.content .list .item {
    font-size: 24px;
    font-weight: 400;
    color: #666666;
    line-height: 55px;
    padding: 26px 0 0;
}
.content .list .item:hover {
    color: #4294F7;
}
.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;
}
.cont>>> img {
    width: 100%;
}
.cont >>> video {
    width: 100%;

}
/deep/ #header .inner .header_home {
    color: #333 !important;
}
/deep/ #header .inner .headers_text {
    color: #333 !important;
}
/deep/ #header .inner .header_home:hover {
    color: #666 !important;
}
/deep/ #header .inner .headers_text:hover {
    color: #666 !important;
}
/deep/ #header .inner .btn.menu button ul li {
    background: #333 !important;
}
/deep/ .inner_line {
    background: #ccc !important;
}
</style>