<template>
    <div class="pageContainer">
        <div class="breadNav" v-if="props.breadNav.length > 0">
            <template :key="item.path" v-for="item in props.breadNav">
                <router-link :to="item.path">{{item.name}}</router-link><span>&gt;</span>
            </template>
            <span>详情</span>
        </div>
        <div class="article">
            <template v-if="detail">
                <h1 class="title">{{ detail.title }}</h1>
                <div class="props">
                    <span>作者：{{ detail.author }}</span>
                    <span>责编：{{ detail.editor }}</span>
                    <span>{{ DateFormat(new Date(detail.published_at * 1000), 'yyyy.MM.dd') }}</span>
                </div>
                <div class="info">
                    <div v-html="detailContent"></div>
                </div>
            </template>
            <div class="loadingBox" v-else>{{ placeholder }}</div>
            <div class="recommend" v-if="recommend.length > 0">
                <div class="blockTitle">推荐文章</div>
                <ul>
                    <li :key="item.id" v-for="item in recommend" @click="goDetail(item.id)">
                        <div class="img">
                            <img :src="item.cover" :alt="item.title">
                        </div>
                        <div class="rTitle">
                            <h2><span>[{{ DateFormat(new Date(item.published_at * 1000), 'yyyy.MM.dd') }}]</span> {{ item.title }}</h2>
                        </div>
                        <div class="desc">{{ item.description }}</div>
                    </li>
                </ul>
            </div>
        </div>
        <template v-if="detail">
            <AiAssistantFolat :content="aiContent"></AiAssistantFolat>
        </template>
    </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUnmount } from 'vue';
import http from '@/io/http';
import { showToast } from 'vant';
import { useRouter, useRoute } from 'vue-router';
import { DateFormat } from '@/utils/format.js';
import AiAssistantFolat from '@/views/chat/components/ai-assistant-float.vue';
import { useWebsite } from '@/stores/website';
import { computed } from 'vue';

const website = useWebsite();

const props = defineProps({
    id: {type: [Number, String], required: true },
    breadNav: {type: Array, default: []},
    type: String,
    isRecommend: {type: Boolean, default: false }
});
const router = useRouter();
const route = useRoute();
const id = ref(props.id || route.params.id);
const detail = ref();
const recommend = ref([]);
const placeholder = ref('数据加载中...');
const detailContent = ref('');

const aiContent = computed(() => {
    return `标题${detail.value?.title}作者${detail.value?.author}责编${detail.value?.editor}发布时间${DateFormat(new Date(detail.value?.published_at * 1000), 'yyyy.MM.dd') }内容${detail.value?.content}`
});


onMounted(() => {
    getDetail();
    props.isRecommend && getRecommendList();
});

onBeforeUnmount(()=>{
    website.setPageTitle();
});

const getDetail = () => {
    http(`/api/article/${id.value}`, {}, 'get').then(res => {
        detail.value = res.data;
        // website.setPageTitle(res.data.title);
        let _content = res.data.content;
        let reg = /font-size:\s?\d+px;/gi;
        detailContent.value = _content.replace(reg, '');
    }).catch(err => {
        showToast(err.message);
        if(err.status == 1001){
            placeholder.value = '无权限阅读，或会员已过期，请先订阅会员';
        }else{
            placeholder.value = '内容获取失败';
        }
    });
};

const getRecommendList = () => {
    let params = {
        recommend: 1,
        type: props.type,  // policy
        per_page: 4,
        page: 1
    };
    http('/api/article', params, 'get').then(res => {
        recommend.value = res.data.data || [];
    }).catch(err => {
        showToast(err.message);
    });
};


const goDetail = (id) => {
    const urlOptions = {
        policy: `/business/legal/policy/detail/${id}`,
        insight: '',
    };
    if (urlOptions[props.type]) {
        http(`/api/article/${id}`, {}, 'get').then(res => {
            router.push(urlOptions[props.type]);
        }).catch(err => {
            if (err.status == 1001) {
                showToast('无权限阅读，或会员已过期，请先订阅会员');
                // placeholder.value = '无权限阅读，或会员已过期，请先订阅会员';
            }
        });

        // router.push(path[props.type]);
    } else {
        console.log('无此类型详情页路由跳转配置：' + props.type);
    }

};

</script>

<style lang="scss" scoped>
.pageContainer {
    color: #FFF;
    padding: 25px;
    background-color: #242527;

    .breadNav {
        height: 30px;
        line-height: 30px;
        color: #999;
        font-size: 22px;

        span {
            padding: 0 5px;
        }

        a {
            color: #999;

            &:hover {
                color: #FFF;
            }
        }
    }

    .loadingBox {
        width: 100%;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
    }

    .article {
        padding: 20px 0;

        .title {
            font-size: 30px;
            line-height: 40px;
            font-weight: bold;
            color: #FFF;
            text-align: center;
            padding: 10px 0;
        }

        .props {
            width: 100%;
            text-align: center;
            line-height: 30px;
            color: #999;
            font-size: 23px;

            span {
                display: inline-block;
                margin: 10px;
            }
        }

        .info {
            line-height: 1.5;
            font-size: 24px;

            :deep(p) {
                padding: 10px 0;
            }

            :deep(strong) {
                font-weight: bold;
            }

            :deep(b) {
                font-weight: bold;
            }

            :deep(h1) {
                font-weight: bold;
            }

            :deep(img) {
                max-width: 100%;
                display: block;
                margin: 10px auto;
            }
        }

        .recommend {
            padding: 30px 0;

            .blockTitle {
                height: 80px;
                line-height: 80px;
                border-bottom: 1px solid #666;
                font-size: 39px;
                font-weight: bold;
            }

            ul {
                padding-top: 30px;

                li{
                    width: 100%;
                    min-height: 428px;
                    background: #D6D6DD;
                    border-radius: 3px;
                    border: 5px solid #D6D6DD;
                    margin-bottom: 20px;
                    color: #333;
                    cursor: pointer;
                    .img{
                        width: 100%;
                        height: 264px;
                        background-color: #666;
                        overflow: hidden;
                        img{
                            object-fit: cover;
                            display: block;
                            background-color: #666;
                            &[src='']{
                                display: none;
                            }
                        }
                    }
                    .rTitle{
                        width: 100%;
                        padding: 20px 10px;
                        // display: flex;
                        // justify-content: space-between;
                        // align-items: center;
                        h2{
                            font-weight: bold;
                            font-size: 28px;
                            line-height: 40px;
                            // margin-right: 10px;
                            flex: 1;
                            text-align: left;
                            span{
                                font-weight: normal;
                                padding-right: 5px;
                            }
                        }
                        // span{
                        //     height: 40px;
                        //     line-height: 40px;
                        //     display: inline-block;
                        //     font-size: 22px;
                        // }
                    }
                    .desc{
                        margin: 10px;
                        font-size: 22px;
                        font-weight: bold;
                        line-height: 30px;
                        height: 60px;
                        box-sizing: content-box;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                    }
                }
            }
        }
    }
}
</style>