<template>
    <ArticleDetail :id="id" :breadNav="breadNav" type="insight" :isRecommend="false" />
</template>

<script setup>
import { ref, onBeforeMount, onMounted, onUpdated } from 'vue';
import http from '@/io/http';
import { showToast } from 'vant';
import { useRoute } from 'vue-router';
import ArticleDetail from '@/components/ArticleDetail/index.vue';

const breadNav = ref([
    { path: '/', name: '首页' },
    { path: '/business', name: 'AI商情' },
    { path: '/business/insight', name: '行业洞察' },
]);

const route = useRoute();
const id = ref(route.params.id);

onBeforeMount(()=>{
    getDetail();
});


const getDetail = () => {
    http(`/api/article/${id.value}`, {}, 'get', {isLoading: false}).then(res => {
        let tempNav = [...breadNav.value];
        let cid = res.data.category_id;
        res.data.category_path.forEach(v=>{
            if(v.id == cid){
                tempNav.push({path: `/business/insight/category/${cid}`, name: v.name});
            }
        });
        breadNav.value = tempNav;
    }).catch(err => {
        // showToast(err.message);
    });
};


</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: 26px;
            line-height: 30px;
            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: 23px;
            :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: 46px;
                line-height: 45px;
                border-bottom: 1px solid #666;
                font-size: 18px;
                font-weight: bold;
            }
            ul{
                display: flex;
                flex-wrap: wrap;
                li{
                    width: 50%;
                    padding-right: 30px;
                    display: flex;
                    margin-top: 30px;
                    .img{
                        width: 120px;
                        height: 168px;
                        overflow: hidden;
                        img{
                            width: 120px;
                            height: 168px;
                        }
                    }
                    .info{
                        flex: 1;
                        margin-left: 15px;
                        height: 168px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        h3{
                            font-size: 14px;
                            font-weight: bold;
                            padding-bottom: 10px;
                        }
                        p{
                            padding: 10px 0;
                            font-size: 12px;
                            line-height: 22px;
                            flex: 1;
                        }
                        span{
                            color: #999;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }
}
</style>