<template>
    <view :style="themeColor()">
        <view class="bg-[#f8f8f8] min-h-[100vh]" v-if="Object.keys(detail).length">
            <view class="px-[var(--sidebar-m)] py-[var(--top-m)]">
                <!-- 标题 -->
                <view class="text-[36rpx] font-bold text-[#333] leading-[50rpx] mb-[24rpx]">
                    {{ detail.announcementTitle }}
                </view>
                
                <!-- 信息栏 -->
                <view class="flex items-center text-[24rpx] text-[#999] mb-[32rpx] pb-[24rpx] border-b border-[#eee]">
                    <view class="flex items-center mr-[30rpx]">
                        <text class="nc-iconfont nc-icon-riliV6xx1 mr-[10rpx]"></text>
                        <text>{{ detail.updateTime }}</text>
                    </view>
                    <view class="flex items-center">
                        <text class="nc-iconfont nc-icon-liulanV6xx1 mr-[8rpx]"></text>
                        <text>{{ detail.viewCount }}次浏览</text>
                    </view>
                </view>
                
                <!-- 封面图 -->
                <view v-if="detail.coverImage" class="w-full rounded-[var(--rounded-mid)] overflow-hidden mb-[32rpx]">
                    <image 
                        class="w-full h-auto" 
                        :src="img(detail.coverImage)" 
                        mode="widthFix"
                        @error="detail.coverImage = ''"
                    />
                </view>
                
                <!-- 富文本内容 -->
                <view class="u-content bg-white p-[30rpx] rounded-[var(--rounded-mid)]">
                    <u-parse 
                        :content="detail.announcementContent" 
                        :tagStyle="{
                            img: 'max-width:100%;height:auto;display:block;margin:20rpx auto;',
                            p: 'overflow: hidden;word-break:break-word;line-height:1.6;margin-bottom:20rpx;font-size:28rpx;color:#333;'
                        }"
                    ></u-parse>
                </view>
            </view>

            <view class="tab-bar-placeholder"></view>
        </view>

        <loading-page :loading="loading"></loading-page>

    </view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { img, goback, handleOnloadParams } from '@/utils/common'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { t } from '@/locale'
import { getGiftCardDetail } from '@/addon/shop_giftcard/api/giftcard';
import { useShare } from '@/hooks/useShare'

const detail: any = ref({})
const loading = ref(true)
const wxPrivacyPopupRef: any = ref(null)

// 分享
const { setShare } = useShare()

onLoad((option: any) => {
    // #ifdef MP-WEIXIN
    // 处理小程序场景值参数
    option = handleOnloadParams(option);
    // #endif
    const id = option.id || ''
    if (!id) {
        let parameter = {
            url: '/addon/shop_giftcard/pages/list',
            title: '缺少id',
            mode: 'reLaunch'
        };
        goback(parameter);
    } else {
        getConsultationDetailFn(id)
    }
})

onShow(() => {
    // 页面显示时刷新数据（可选）
})

const getConsultationDetailFn = (id: any) => {
    loading.value = true
    getGiftCardDetail(id).then((res: any) => {
        if (!res.data || JSON.stringify(res.data) === '[]') {
            uni.showToast({ title: '无法找到资讯详情', icon: 'none' })
            setTimeout(() => {
                goback({ url: '/addon/shop_giftcard/pages/list', mode: 'navigateBack' })
            }, 600)
            return false
        }

        detail.value = res.data

        uni.setNavigationBarTitle({
            title: detail.value.announcementTitle
        })
        
        loading.value = false

    }).catch(() => {
        loading.value = false
        uni.showToast({ title: '加载失败', icon: 'none' })
    })
}

</script>

<style lang="scss" scoped>
.tab-bar-placeholder {
    padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
}

.u-content {
    :deep(.u-parse) {
        font-size: 28rpx;
        color: #333;
        line-height: 1.6;
        
        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 20rpx auto;
        }
        
        p {
            margin-bottom: 20rpx;
            word-break: break-word;
        }
    }
}
</style>
