<template>
    <ie-page>
        <ie-navbar title="院校动态"/>
        <view class="bg-white px-20 pt-20">
            <uv-text size="18" bold :text="prevData.title"/>
        </view>
        <uv-sticky :offset-top="appStore.isH5?0:baseStickyTop">
            <view class="flex justify-between items-center bg-white border-0 border-b border-solid border-border p-20">
                <uv-text size="13" :icon-style="{width: '22px', height: '20px'}" :prefix-icon="prevData.logo"
                         :text="prevData.editor"/>
                <text class="text-tips text-xs">{{ prevData.createTime.split(' ')[0] }}</text>
            </view>
        </uv-sticky>
        <uv-gap height="10" bg-color="#F6F8FA"/>
        <view class="p-30 text-28 leading-38 text-fore-content university-intro-content">
            <uv-parse :content="detail.content||prevData.content"/>
        </view>
        <uv-back-top :scroll-top="scrollTop"/>
    </ie-page>
</template>

<script setup lang="ts">
import {useTransferPage} from "@/hooks/useTransferPage";
import {useScroll} from "@/hooks/useScroll";
import {UniversityBrochure} from "@/types/university";
import {getUniversitiesEnrollBrochureDetail} from "@/api/modules/university";
import {useAppStore} from "@/store/appStore";
import {useNavbar} from "@/hooks/useNavbar";

const detail = ref<UniversityBrochure>({} as UniversityBrochure)
const {prevData} = useTransferPage()
const {scrollTop} = useScroll()
const {baseStickyTop} = useNavbar()
const appStore = useAppStore()

onMounted(async () => {
    const {id, content} = prevData.value
    if (id && !content) {
        const payload = {id}
        const res = await getUniversitiesEnrollBrochureDetail(payload)
        detail.value = res.data
    }
})
</script>

<style lang="scss">
.university-intro-content {
    img, image, table {
        max-width: 100%;
    }
}
</style>
