<template>
    <n-modal :show="show" @update:show="newValue => updateShow(newValue)" transform-origin="center">
        <div class="share-box">
            <img :src="imgUrl" v-if="imgUrl" alt="" class="shareImgUrl" />
            <div class="share-img relative" v-else ref="postRef">
                <!-- <img src="@/assets/bg_share_card.png" class="bg" alt="" /> -->
                <!-- <div class="absolute inset-x-0 top-0">
                    <user-avatar avatarType="small" onlyAvatar />
                </div> -->
                <!-- <div class="title">开通会员</div> -->
                <!-- <n-gradient-text gradient="linear-gradient(289deg, #8F008E 0%, #2900D4 100%)">
                    开通会员
                </n-gradient-text> -->
                <img src="@/assets/offical-text.png" alt="" class="title" />
                <div class="qrcode flex items-center justify-center">
                    <img src="@/assets/officalCode.jpeg" alt="" />
                </div>

                <div class="text">了解更多资讯与优惠</div>
            </div>

            <!-- <div class="tips" v-if="isMobile">长按保存图片</div> -->
            <!-- <div class="mt-16 w-3/4">
                <n-button type="primary" @click="goChat" round block :loading="loading">我已支付</n-button>
            </div> -->

            <n-button text class="cancel" @click.stop="updateShow(false)"> 取消 </n-button>
        </div>
    </n-modal>
</template>

<script setup lang="ts">
import { NModal, NButton, NGradientText } from 'naive-ui'
import { ref, Ref, watch } from 'vue'
import QrcodeVue from 'qrcode.vue'
import html2canvas from 'html2canvas'
import { useUserStore } from '@/store'
import { useBasicLayout } from '@/hooks/useBasicLayout'
import { fetchRedirectUrl } from '@/api'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    planId: {
        type: Number,
        default: 0
    }
})
const emit = defineEmits(['update:show', 'goChat'])

function updateShow(val: boolean) {
    emit('update:show', val)
}
const imgUrl = ref('')

const shareUrl = ref('')
const isWechat = /micromessenger/i.test(navigator.userAgent)

const postRef: Ref<HTMLElement | null> = ref(null)
const userStore = useUserStore()
watch(
    () => props.show,
    val => {
        if (val) {
            fetchRedirectUrl(
                location.origin + '/api/membership/h5pay?userId=' + userStore.userInfo.id + '&planId=' + props.planId
            ).then((res: any) => {
                shareUrl.value = res.url
            })
            // setTimeout(() => {
            //     html2canvas(postRef.value!, {
            //         useCORS: true,
            //         allowTaint: true,https://走马AI助手.raexmeta.com/api/membership/h5pay?userId=&planId=
            //         backgroundColor: null,
            //         scale: 3
            //     }).then(canvas => {
            //         console.log(canvas)
            //         imgUrl.value = canvas.toDataURL('image/png')
            //     })
            // }, 500)
        }
    }
)

function down() {
    const tempLink = document.createElement('a')
    tempLink.style.display = 'none'
    tempLink.href = imgUrl.value
    tempLink.setAttribute('download', 'chat-share.png')
    if (typeof tempLink.download === 'undefined') tempLink.setAttribute('target', '_blank')

    document.body.appendChild(tempLink)
    tempLink.click()
    document.body.removeChild(tempLink)
    window.URL.revokeObjectURL(imgUrl.value)
    updateShow(false)
}

const { isMobile } = useBasicLayout()

const loading = ref(false)
function goChat() {
    loading.value = true
    setTimeout(() => {
        emit('goChat')
    }, 200)
}
</script>

<style lang="less" scoped>
.share-img {
    width: 260px;
    height: 316px;
    background: #ffffff linear-gradient(133deg, #dbf1fe 0%, #e3b7fb 50%, #7c58f8 100%);
    border-radius: 16px;
    box-sizing: border-box;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
        width: 80px;
        display: block;
    }

    .qrcode {
        background-color: #fff;
        box-shadow: 0px 0px 4px 0px rgba(163, 121, 255, 0.5);
        // padding: 15px;
        background: #ffffff;
        box-shadow: 0px 4px 9px 0px rgba(163, 121, 255, 0.5);
        border-radius: 12px;
        margin-top: 18px;
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
            display: block;
        }
    }

    .text {
        font-size: 12px;
        color: #5b4380;
        margin-top: 16px;
        position: relative;
        &::before {
            position: absolute;
            left: -20px;
            top: 50%;
            content: '';
            width: 12px;
            height: 1px;
            background: linear-gradient(270deg, #5b4380 0%, rgba(91, 67, 128, 0) 100%);
            opacity: 0.8;
        }

        &::after {
            position: absolute;
            right: -20px;
            top: 50%;
            content: '';
            width: 12px;
            height: 1px;
            background: linear-gradient(270deg, rgba(91, 67, 128, 0) 0%, #5b4380 100%);
            opacity: 0.8;
        }
    }
}

.shareImgUrl {
    width: 260px;
    display: block;
}

.share-box {
    .f-col();
    align-items: center;
    --n-box-shadow: none;
}

.tips {
    text-align: center;
    margin-top: 50px;
    font-size: 14px;
    color: #fff;
}

.cancel {
    margin-top: 20px;
    padding: 10px;
    font-size: 14px;
    color: #939599;
    line-height: 24px;
}
</style>
