<template>
    <BasePage :title="article.name || '文章详情'">
        <div class="column-detail" v-if="article && article.name">
            <div class="b_l_w overview">
                <span class="title">{{ article.name }}</span>
                <div class="desc">
                    <span v-if="article.addtime">
                        {{ $formatGMT(article.addtime, 'yyyy-MM-dd') }}
                    </span>
                    <span>
                        阅读 {{ article.click }}
                    </span>
                </div>
            </div>
            <div v-if="article.contents" class="b_l_w content" v-html="article.contents" ref="contentRef" />
            <van-empty class="b_l_w" v-else description="暂无内容" />
        </div>
        <van-empty v-else class="b_l_w" description="文章不存在" />
    </BasePage>
</template>

<script>
export default {
    name: 'ColumnDetail',
    computed: {
    },
    data() {
        return {
            id: this.$route.query.id,
            article: {},
        }
    },
    mounted() {
        this.getDetail(this.id);
        this.$nextTick(() => {
            this.setupImagePreview();
        });
    },
    methods: {
        getDetail(id) {
            if (id === '1') {
                this.$get('/v1/client/CNewscatesClient/1').then(res => {
                    this.article = res.data;
                }).catch(err => {
                    this.$showFailToast(err.message);
                });
                return;
            }
            this.$get(`/v1/client/CNewsClient/${id}`).then(data => {
                this.article = data.data;
            }).catch(err => {
                this.$showFailToast(err.message);
            });
        },
        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>

<style>
.column-detail {
    .overview {
        display: flex;
        flex-direction: column;
        padding: 3.333vw;
        border-bottom: 1px solid #eee;

        .title {
            font-size: 6.333vw;
        }

        .desc {
            margin-top: 3.333vw;
            display: flex;
            justify-content: space-between;
            color: #999;
        }
    }

    .content {
        max-width: 100%;
        padding: 3.333vw;
        overflow: hidden;

        img {
            max-width: 100%;
            display: block;
            margin: 10px auto;
        }
    }
}
</style>
