<script lang="ts" setup>
    import URI from 'urijs'

    const page = reactive({
        security: false,
        title: '',
        link: '',
        styles: {
            progress: {
                color: '#42c02e',
                height: '1%',
            },
        },
    })

    onLoad(({ title, link, sub }) => {
        page.title = title ? decodeURIComponent(title) : ''
        page.link = decodeURIComponent(link)

        // 嵌入页面进行二级子页面跳转时，参数会被多次 encode
        if (sub) {
            page.title = decodeURIComponent(page.title)
            page.link = decodeURIComponent(page.link)
        }

        if (!link) {
            Message.toast('页面打开失败，参数错误')
            uni.navigateBack()
            return
        }

        // 设置标题栏为文件名
        if (page.title && page.title !== 'undefined') {
            uni.setNavigationBarTitle({
                title: page.title,
            })
        }

        // #ifdef APP-PLUS
        // 白名单同源检测
        if (isSameOrigin(new URI(page.link))) {
            page.security = true
        } else {
            Message.loading()
            // 对于不安全或不信任的网站地址或可能触发 plus API 的来源，采用手动创建 webview 的方式打开
            const webview = plus.webview.create(page.link, 'no-security-webview', {
                progress: page.styles.progress,
            })
            webview.addEventListener(
                'loaded',
                () => {
                    webview.appendJsFile('_www/static/uni.webview.1.5.6.js')
                    webview.evalJS(`
                        document.addEventListener('UniAppJSBridgeReady', function() {
                            uni.getEnv(function(res) {
                                console.log('当前环境：' + JSON.stringify(res));
                            })
                        })

                        // 禁止页面缩放
                        var meta = document.createElement('meta')
                        meta.name = 'viewport'
                        meta.content = 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'
                        document.head.appendChild(meta)

                        // 隐藏底部描述和图片上传能力
                        var style = document.createElement('style')
                        style.id = 'no-security-webview-style'
                        style.innerHTML = 'footer, .semi-upload-add { display: none !important; } .close-btn { position: absolute; right: 12px; top: 18px; padding: 8px; }'
                        document.body.appendChild(style)

                        // 添加关闭按钮
                        var div = document.createElement('div')
                        div.className = 'close-btn'
                        div.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path fill="#666" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"/></svg>'
                        div.onclick = function() {
                            uni.navigateBack()
                        }
                        document.body.appendChild(div)
                    `)
                },
                false,
            )

            const pages = getCurrentPages()
            const currentPage = pages[pages.length - 1]
            const currentWebview = currentPage.$getAppWebview()
            currentWebview.setStyle({ progress: page.styles.progress })
            currentWebview.append(webview)

            setTimeout(() => {
                Message.hideLoading()
            }, 1500)
        }
        // #endif
        // #ifndef APP-PLUS
        page.security = true
        // #endif
    })

    // 安全域白名单，防止 APP 环境的意外注入和非法安全调用 plus API 的问题
    const allows = ['yiring.com']
    // 在安全域白名单中，但仍然需要排除的链接（通常是代理的网站链接）
    const denyLinks = []
    function isSameOrigin(url: URI) {
        if (denyLinks.includes(url.href())) {
            return false
        }

        return allows.some((item) => {
            const regex = new RegExp(`^(.*\\.)?${item}$`, 'i')
            return regex.test(url.hostname())
        })
    }
</script>

<template>
    <view class="wrap" v-if="page.link">
        <template v-if="page.security">
            <web-view :src="page.link" :update-title="!page.title" :webview-styles="page.styles" />
        </template>
    </view>
</template>
