<template>
    <div class="main">
        <Common />
        <div class="bg">
            <img src="http://yyfiles.mrny365.com/static/banner.png" alt="">
        </div>
        <div class="breadcrumb">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item>园区之窗</el-breadcrumb-item>
                <el-breadcrumb-item>新闻中心</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content">
            <div class="contentLeft">
                <div class="newTitle">
                    {{ detailInfo.headline }}
                </div>
                <div class="contentEdit">
                    编稿时间： <span class="editTime">{{ detailInfo.publishTime }}</span> 
                    来源： <span class="editInfo">{{ detailInfo.articleSource }}</span>　
                    作者：<span class="author">{{ detailInfo.author }}</span>
                </div>
                <div class="newInfo">
                    <div v-html="detailInfo.content"></div>
                </div>
            </div>
            <div class="contentRight">
                <div class="rightTop">
                    <img src="../../assets/image/park/news.jpg" alt="">
                </div>
                <div class="rigthBottom">
                    <div class="title">
                        <i></i>
                        <span>最新资讯</span>
                    </div>
                    <div class="line"></div>
                    <div class="rightBottomContent">
                        <el-timeline>
                            <el-timeline-item v-for="(activity, index) in timelineList" :key="index"
                                :timestamp="activity.publishTime">
                                <span @click="handleDetails('newsDetails', activity)" class="timeline">{{ activity.headline }}</span>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </div>
            </div>
        </div>
        <Footer />
    </div>
</template>
    
<script setup lang='ts'>
import Common from '../../components/common/common.vue';
import Footer from '../../components/common/footer.vue';
import { ArrowRight, Search } from '@element-plus/icons-vue';
import { ref, reactive, inject } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { setToken } from "@/utils/auth";
export interface detailInfo {
    id: string,
    headline: string;
    author: string;
    briefIntroduction: string;
    lookCnt: string;
    publishTime: string;
    articleSource: string;
    content: string;
}
export interface timeLine {
    id: string,
    headline: string;
    publishTime: string;
}
    const $http:any = inject("$http");
    const router = useRouter();
    const route = useRoute();
    const detailInfo = ref<detailInfo>({
        id: '',
        headline: '',
        author: '',
        briefIntroduction: '',
        lookCnt: '',
        publishTime: '',
        articleSource: '',
        content: '',
    });
    console.log(route.query)
    console.log('route.query.token',route.query. token);
    const Token:any=route.query. token||''
    setToken(Token)
    // 最新资讯数据
    const timelineList = ref<timeLine[]>([]);

    function getDetailInfo(id: any) {
        $http.get(`/mall/newsInfo/${id}`)
        .then((res: any) => {
            if(res.data){
                detailInfo.value = res.data;
            }   
            
        })
    }
    getDetailInfo(route.query.id)

    function getTimeLine() {
        $http({
            url:'/mall/newsInfo/queryPage',
            params: {
                property: 1,
                pageNum: 1,
                pageSize: 10,
            },
        })
        .then((res:any)=> {
            if(res.rows) {
                timelineList.value = res.rows;
            }
        })
    }
    getTimeLine(); // 获取时间线列表

    function handleDetails(pathName: string, params: any) {
        console.log(1111)
        // router.push({
        //     name: pathName,
        //     query: {
        //         id: params.id
        //     }
        // })
        getDetailInfo(params.id)
    } 
</script>
    
<style scoped lang="less">
img {
    width: 100%;
}
.main {
    width: 100%;
    background-color: #f5f5f5;
}

.breadcrumb {
    margin: 0 auto;
    padding-top: 25px;
    width: 1200px;
    display: flex;
}
.content {
        margin: 35px auto;
        width: 1200px;
        display: flex;
        padding-bottom: 30px;
        .contentLeft {
            width: 900px;
            background-color: #fff;
            padding: 20px 30px;
            box-sizing: border-box;
            .newTitle {
                margin-top: 15px;
                width: 100%;
                color: #000;
                font-size: 24px;
                text-align: center;
            }
            .contentEdit {
                margin-top: 20px;
                width: 100%;
                text-align: center;
                color: #666;
                font-size: 16px;
            }
            .newInfo {
                :deep(img) {
                    width: 100% !important;
                }
            }
        }
        .contentRight {
            margin-left: 20px;
            width: 280px;
            .rightTop {
                width: 100%;
                height: 260px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .rigthBottom {
                margin-top: 20px;
                width: 100%;
                background-color: #fff;
                padding: 20px 0;
                box-sizing: border-box;
                .title {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin: 0 15px;

                    i {
                        width: 3px;
                        height: 26px;
                        background-color: #3492EC;
                    }

                    span {
                        margin-left: 10px;
                        font-size: 18px;
                        color: #000;
                    }
                }
                .line {
                    margin-top: 20px;
                    width: 100%;
                    height: 3px;
                    background-color: #f5f5f5;
                }
                .rightBottomContent {
                    margin-top: 20px;
                    .el-timeline {
                        padding-left: 15px;
                    }
                    .timeline {
                        cursor: pointer;
                    }
                }
            }
        }
    }
    .bg {
        width: 1200px;
        height: 100px;
        margin: 20px auto 0;

        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
</style>