<template>
    <div class="newsmessage">
        <div v-if="router.currentRoute.value.params.name == 'all'" class="news">
            <Title :value="title"></Title>
            <Service :index="2" />
        </div>
        <div v-else>
            <div class="news-message">
                <div class="news-title">
                    <h1 v-if="newmessage.title"><strong>{{ newmessage.title }}</strong></h1>
                    <h4 v-if="newmessage.date">{{ newmessage.date }}</h4>
                </div>
                <div class="content">
                    <div class="contentmessage" v-if="newmessage.others && newmessage.others.length != 0">
                        <div class="content-img" v-if="newmessage.banner" text-align="left">
                            <img :src="newmessage.banner.detail" :alt="newmessage.banner.name" text-align="left">
                        </div>
                        <div class="content-item" v-for="item, index in newmessage.others" :key="index">
                            <h3><strong>{{ item.position + ". " + item.title }}</strong></h3>
                            <span v-html="item.content" class="font-size-18"></span>
                            <div class="item-img" v-if="item.children">
                                <img :src="item.children.detail" :alt="item.children.name">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="btn font-size-24" @click="goPage">Back</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from '../router';
import Service from './Service.vue';
import Title from '../components/Title.vue';
import { ref, onMounted, watch } from 'vue'
import useHomeStore from '../store/modules/homepage'

let Home = useHomeStore()
let newmessage = ref<any>({})

let title = ref<any>({
    title: "News",
    desc: ""
})

const goPage = () => {
    localStorage.setItem('scrollPosition', 'informationCenter')
    router.push('/')
}

onMounted(() => {
    watch(() => router.currentRoute.value.params.name, (newValue: any) => {
        Home.$state.News.map((li: any) => {
            if (li.position == newValue) {
                newmessage.value = li
            }
        })
    }, { immediate: true, deep: true })
})


</script>

<style scoped lang="less">
.news-message {
    width: 100%;
    .btn{
        width: 90%;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 1rem;
        text-align: center;
        margin: 1rem auto;
        color: #fff;
        cursor: pointer;
    }
    .btn:hover{
        color: #fa8106;
    }

    .news-title {
        box-sizing: border-box;
        padding: 2rem 0;
        width: 100%;
        text-align: center;

        h1 {
            margin-bottom: 1rem;
        }
    }

    .content {
        box-sizing: border-box;
        width: 100%;
        margin: 3rem 0 1rem 0;
        border-top: 1px solid #333;
        padding: 1rem;

        // display: flex;
        .contentmessage {
            width: 100%;

            .content-img {
                float: right;
                margin-left: 1rem;
            }
            .content-item{
                width: 100%;
                margin-bottom: 1.5rem;
                h3{
                    margin-bottom: 0.5rem;
                }
                span{
                    line-height: 2rem;
                }
                .item-img{
                    margin: 1rem 0;
                }
            }
        }
    }
}

.newsmessage {
    .news {
        margin-bottom: 10.9rem;
    }
}

@media screen and (max-width: 960px) {
    .news-title{
        padding: 1rem 0 !important;
        h1{
            margin-bottom: 0.5rem;
        }
    }
    .content{
        margin-top: 1rem !important;
    }
    .contentmessage{
        display: flex;
        flex-direction: column;
    }
    .content-img{
        width: 90%;
        img{
            width: 100%;
        }
    }
    .item-img{
        width: 90%;
        img{
            width: 100%;
        }
    }
    .newsmessage {
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        margin-top: 2rem;

        .news {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            margin-bottom: 11.9rem;
        }
    }
}
</style>