<template>
    <Head>
        <Title>{{ loveStoryInfo.love_story_title }}{{ tdk.tdk_title }}</Title>
        <Meta :content=tdk.tdk_keyword name="keywords" />
        <Meta :content=tdk.tdk_description name="description" />
    </Head>
    <Header></Header>

    <div class="joint-details-pos-box">

        <div class="--box--">

            <div class="music-box" v-if="loveStoryInfo.love_story_music">
                <div class="music-name">{{ loveStoryInfo.love_story_music_name }}</div>
                <audio controls="controls" height="100" width="100" autoplay>
                    <source :src=loveStoryInfo.love_story_music type="audio/mp3" />
                    <embed height="100" width="100" :src=loveStoryInfo.love_story_music />
                </audio>
            </div>

            <!-- 返回 -->
            <div class="back-btn" @click="router.back()">
                ← 返回
            </div>
            <!-- 标题 -->
            <div class="joint-details-title-box" data-animation="animate__animated animate__zoomIn">
                <div class="joint-details-title">{{ loveStoryInfo.love_story_title }}</div>
                <div class="joint-details-time">{{ loveStoryInfo.love_story_date }}</div>
            </div>

            <hr>

            <div class="joint-details-content-box op0" data-animation="animate__animated animate__fadeIn"
                v-html=loveStoryInfo.love_story_content></div>

            <!-- 翻篇 -->
            <div class="Turn-the-page op0" data-animation="animate__animated animate__fadeIn">
                <hr>
                <div class="Turn-the-page-box">
                    <nuxt-link class="f1" v-if="loveStoryInfo.prve"
                        :to="'/love-story/details/' + loveStoryInfo.prve.love_story_id">上一篇: {{
                            loveStoryInfo.prve.love_story_title }}</nuxt-link>
                    <nuxt-link class="f1" v-if="loveStoryInfo.next"
                        :to="'/love-story/details/' + loveStoryInfo.next.love_story_id">下一篇: {{
                            loveStoryInfo.next.love_story_title }}</nuxt-link>
                </div>
            </div>
        </div>


    </div>

    <Final></Final>
</template>

<script setup>
// --- 接口对接 ---
// 参数
const route = useRoute()
const router = useRouter()
// 预对接
let loveStoryInfo = ref(
    {
        // love_story_id : 2,
        // love_story_title : "暑假初见1",
        // love_story_author : "lwh1",
        // love_story_place : "广州南站1",
        // love_story_date : "2023-07-07",
        // love_story_cover : "/uploads/LoveStoryImg/20230824\\ed099c7eac8b171c38814b985b4f5de5.jpg",
        // love_story_sort : 1,
        // love_story_music : "/uploads/LoveStoryFile/凄美地-郭顶.128.mp3",
        // love_story_music_name : "凄美地-郭顶.128.mp3",
        // love_story_content : "<p>1111<img src=\"/uploads/Img/20230824\\03cd04de8e390129fe731493333a68bc.png\" alt=\"\" data-href=\"\" style=\"\"/></p>"
    }
)



// 获取新闻详情
useFetch('/api/loveStory/getLoveStoryInfo', { params: { love_story_id: route.params.id } }).then(res => {
    loveStoryInfo.value = JSON.parse(res.data.value).data
    setTimeout(() => {
        [...document.querySelectorAll('.joint-details-content-box img')].map(item => {
            item.style.maxWidth = 100 + '%'
            item.style.height = 0 + '%'
        }),


        [...document.querySelectorAll('.joint-details-content-box video')].map(item => {
            item.style.maxWidth = 100 + '%'
            item.style.height = 0 + '%'
            item.style.margin = "0 auto"
        })

        
        htmlAddAnimations()
    });

})
// 获取Tdk
let tdk = ref({})
useFetch('/api/tdk/getTdk', { params: { tdk_type: 3 } }).then(res => {
    tdk.value = JSON.parse(res.data.value).data
})
// 添加流量访问
// useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })

</script>


<style scoped src="~/assets/css/business/love_story/love_story_details/index.scss"></style>
<style scoped src="~/assets/css/business/love_story/love_story_details/media.scss"></style>
