<template>
    <BasePage :title="article.name">
        <div class="b_l_w" style="padding: 3.333vw; border-bottom: 1px solid #ebedf0">
            <span style="font-size: 24px">{{ article.name }}</span>
            <div style="display: flex; justify-content: space-between; margin-top: 12px">
                <span style="color: #999999">{{ article.addtime ? $formatGMT(article.addtime, 'yyyy-MM-dd') : ''
                }}</span>
                <span style="color: #999999">阅读 {{ article.click }}</span>
            </div>
        </div>
        <div v-if="article.contents" class="b_l_w w100 html" style="padding: 0 3.333vw; padding-top: 3.333vw;"
            v-html="article.contents" ref="contentRef" />
        <van-empty class="b_l_w" description="暂无内容" v-else />
    </BasePage>
</template>

<script>
export default {
    name: 'School_detail',
    data() {
        return {
            article: {},
            imageUrls: []
        }
    },
    beforeCreate() {
        const id = this.$route.query.id
        const cacheKey = `School_Detail_${id}`
        const cached = sessionStorage.getItem(cacheKey)
        if (cached) {
            try {
                this.article = JSON.parse(cached)
                return
            } catch (e) {}
        }
        this.$get(`/v1/client/CBusinessschoolsClient/${id}`).then(res => {
            this.article = res.data;
            sessionStorage.setItem(cacheKey, JSON.stringify(res.data))
        })
    },
    mounted() {
        this.$nextTick(() => {
            this.setupImagePreview();
        });

    },
    methods: {
        setupImagePreview() {
            const contentEl = this.$refs.contentRef;
            if (!contentEl) return;

            const images = contentEl.querySelectorAll('img');
            this.imageUrls = Array.from(images).map(img => img.src);

            images.forEach((img, index) => {
                img.addEventListener('click', () => {
                    this.previewImages(index);
                });
            });
        },
        previewImages(startPosition) {
            this.$showImagePreview({
                images: this.imageUrls,
                startPosition,
                closeable: true,
            });
        }
    }
}
</script>