<script setup lang="ts">
    import type { Notice } from '.'
    import { setConfirm } from '.'

    // 获取通知信息
    const notice = ref<Notice>(getApp().globalData.notice || {})
    // 内容初始化高度
    const height = ref(100)

    onLoad(() => {
        // 没有通知消息或者已经确认过
        if (!notice.value.id || notice.value.confirmed) {
            Message.toast('暂无通知消息 ~')
            uni.navigateBack()
            return
        }

        // 禁止页面侧滑返回
        const pages = getCurrentPages()
        const currentPage = pages[pages.length - 1]
        const currentWebview = currentPage.$getAppWebview()
        currentWebview.setStyle({ popGesture: 'none' })

        nextTick(() => {
            setTimeout(() => {
                uni.createSelectorQuery()
                    .select('.notice-content')
                    .boundingClientRect((data: UniNamespace.NodeInfo) => {
                        // 获取高度, 默认为 100-340
                        height.value = Math.max(100, Math.min(340, data.height))
                    })
                    .exec()
            }, 300)
        })
    })

    // 预览图片
    function preview(e: { src: string; imageUrls: string[] }) {
        uni.previewImage({
            urls: [e.src],
            current: 0,
        })
    }

    // 点击链接
    function atap(href: string) {
        if (href.startsWith('http')) {
            // 打开外部链接
            uni.setClipboardData({
                data: href,
                success: () => {
                    Message.toast('已复制链接，请在浏览器中粘贴打开')
                },
            })
        } else if (href.startsWith('/pages/')) {
            // 打开内部链接
            uni.navigateTo({
                url: href,
            })
        }
    }

    // 退出应用
    function quit() {
        // 退出应用
        // #ifdef APP-PLUS
        if (uni.getSystemInfoSync().platform === 'ios') {
            try {
                // @ts-expect-error
                plus.ios.import('UIApplication').sharedApplication().performSelector('abort')
            } catch (e) {
                console.error(e)
            }
        } else {
            plus.runtime.quit()
        }
        // #endif
    }

    // 确认知道到了
    function confirm() {
        notice.value.id && setConfirm(notice.value.id)
        uni.navigateBack()
    }
</script>

<template>
    <view class="notice-mask">
        <view class="w-80% p-3 bg-white rd-2 shadow shadow-2xl overflow-hidden">
            <view class="flex-center mt-2" v-if="notice.title">
                <text class="font-bold text-36">{{ notice.title }}</text>
            </view>

            <FuiDivider text="·" :height="50" v-if="notice.title" />

            <view class="h-auto p-1">
                <scroll-view scroll-y :style="{ height: `${height}px` }">
                    <FuiParseGroup class="notice-content" @preview="preview" @atap="atap">
                        <FuiParse :nodes="notice.content" />
                    </FuiParseGroup>
                </scroll-view>
            </view>

            <view class="flex gap-3 mt-3" v-if="notice.buttons.length">
                <FuiButton type="gray" @click="confirm" v-if="notice.buttons.includes('confirm')"> 我知道了 </FuiButton>
                <FuiButton
                    color="#fff"
                    background="#ff6363"
                    borderColor="#ff6363"
                    @click="quit"
                    v-if="notice.buttons.includes('exit')"
                >
                    退出应用
                </FuiButton>
            </view>
        </view>
    </view>
</template>

<style lang="less">
    // ...
    page {
        background: transparent;
        user-select: none;
    }

    .notice-mask {
        width: 100%;
        height: 100%;
        position: fixed;
        inset: 0;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        justify-content: center;
        align-items: center;
        background-color: rgb(0 0 0 / 40%);
    }
</style>
