<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="block share-canvas w-5/6 max-w-md" />
            <div class="share-img w-5/6 relative max-w-md" v-else ref="postRef">
                <img :src="shareImgs[shareType]" class="block share-bg" alt="" />
                <!-- <div class="absolute inset-x-0 top-0">
                    <user-avatar avatarType="small" onlyAvatar />
                </div> -->
                <div class="text1">
                    <div>邀请好友</div>
                    <div>加入{{ company.name }}</div>
                </div>
                <div class="text2">带领一小部分人先驾驭{{ company.name }}！</div>
                <div class="text3">
                    <div class="logo flex items-center">
                        <img v-if="company.logo" :src="company.logo" alt="" />
                        <img v-else src="@/assets/share-logo1.png" alt="" />
                        <span class="ml-[5px]">{{ company.name }}</span>
                    </div>
                    <div class="info">
                        {{ company.name }}不会淘汰你，但能驾驭{{ company.name }}的人会淘汰你！
                    </div>
                </div>
                <div class="qrcode flex items-center justify-center">
                    <qrcode-vue :value="shareUrl" :size="300" renderAs="svg" level="M" />
                    <!-- <img :src="shareLogo" alt="" class="share-logo" /> -->
                </div>

                <!-- <div class="user flex items-center" v-if="shareType === 1">
                    <template v-if="isString(userInfo.avatar) && userInfo.avatar.length > 0">
                        <NAvatar :size="31" round :src="userInfo.avatar" :fallback-src="defaultAvatar" />
                    </template>
                    <template v-else>
                        <NAvatar :size="31" round :src="defaultAvatar" />
                    </template>
                    <span class="text-xs ml-[7px]">{{ userInfo.name }}</span>
                </div> -->
            </div>
            <!-- <div class="share-btns w-5/6 max-w-md flex">
                <n-button text v-if="isMobile">长按保存图片</n-button>
                <n-button text v-else @click="save">保存图片</n-button>
                <n-button text :loading="loading" @click="changeType">换个样式</n-button>
                <n-button text @click="copyShare">复制邀请链接</n-button>
            </div> -->

            <div class="tips" v-if="isMobile">长按图片保存</div>
            <div class="mt-8" v-else>
                <n-button type="primary" round @click="save">点击保存图片</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, NAvatar, useMessage } from 'naive-ui'
import { ref, watch, computed } from 'vue'
import { useClipboard } from '@vueuse/core'
import QrcodeVue from 'qrcode.vue'
import html2canvas from 'html2canvas'
import { useUserStore } from '@/store'
import { useBasicLayout } from '@/hooks/useBasicLayout'
import { Ref } from 'vue'
import { fetchRedirectUrl } from '@/api'
import { isString } from '@/utils/is'
import defaultAvatar from '@/assets/avatar.png'
import shareImg1 from '@/assets/share1.png'
import shareImg2 from '@/assets/share2.png'
import shareImg3 from '@/assets/share3.png'
import shareImg4 from '@/assets/share4.png'
import shareImg5 from '@/assets/share5.png'
import shareImg6 from '@/assets/share6.png'
import shareImg7 from '@/assets/share7.png'
import shareImg8 from '@/assets/share8.png'
import { useCompanyStore } from '@/store'

const shareImgs = [shareImg1, shareImg2, shareImg3, shareImg4, shareImg5, shareImg6, shareImg7, shareImg8]
const shareType = ref(0)
const loading = ref(true)

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

function updateShow(val: boolean) {
    emit('update:show', val)
}

const imgUrl = ref('')

const userStore = useUserStore()
const shareUrl = ref('')
const company = useCompanyStore().company
fetchRedirectUrl(
    location.origin +
        (company.id === 0 ? '/ui/home?invitor=' : `/ui/${company.id}/home?invitor=`) +
        userStore.userInfo.id
).then((res: any) => {
    shareUrl.value = res.url
})
// if (company.id !== 0) {
//     shareType.value = 1
// }
const userInfo = computed(() => userStore.userInfo)

const postRef: Ref<HTMLElement | null> = ref(null)
watch(
    () => props.show,
    val => {
        if (val) {
            // shareType.value = Math.floor(Math.random() * 7)
            if (!imgUrl.value) {
                changeType()
            }
        }
    }
)

function changeType() {
    loading.value = true
    imgUrl.value = ''
    setTimeout(() => {
        html2canvas(postRef.value!, {
            useCORS: true,
            allowTaint: true,
            backgroundColor: null,
            scale: 3
        }).then(canvas => {
            console.log(canvas)
            loading.value = false
            imgUrl.value = canvas.toDataURL('image/png')
        })
    }, 500)
}

function save() {
    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 message = useMessage()
const { text, copy, copied, isSupported } = useClipboard()
async function copyShare() {
    try {
        await copy('【走马AI助手——开启人工智能时代】' + shareUrl.value)
        message.success('复制成功')
    } catch (e) {
        console.error(e)
    }
}
</script>

<style lang="less" scoped>
.share-img {
    position: relative;
    z-index: 2;
    .qrcode {
        position: absolute;
        z-index: 3;
        bottom: 33.1%;
        right: 13%;
        background-color: #fff;
        padding: 8px;
        border-radius: 8px;
        width: 33.3%;
        height: 22.7%;

        :deep(svg) {
            width: 100%;
            height: 100%;
            z-index: 1;
            position: relative;
        }

        .share-logo {
            width: 20%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
        }
    }

    .text1 {
        position: absolute;
        top: 12%;
        left: 9.09%;
        z-index: 3;
        font-size: 26px;
        font-family: MiSans;
        font-weight: bold;
        color: #005c55;
        line-height: 26px;
        letter-spacing: 1px;
        div + div {
            margin-top: 10px;
        }
    }

    .text2 {
        font-size: 11px;
        font-weight: 500;
        color: #005c55;
        line-height: 18px;
        letter-spacing: 1px;
        position: absolute;
        top: 31.3%;
        left: 13%;
        z-index: 3;
    }
    .text3 {
        position: absolute;
        top: 48.3%;
        left: 13%;
        z-index: 3;
        font-size: 12px;
        font-family: MiSans;
        font-weight: bold;
        color: #005c55;
        width: 35.7%;

        .logo {
            img {
                display: block;
                width: auto;
                height: 20px;
            }
            span {
                margin-bottom: 10px;
            }
        }

        .info {
            font-size: 10px;
            font-weight: 500;
            color: #005c55;
            line-height: 18px;
        }
    }

    .user {
        position: absolute;
        bottom: 3.5%;
        left: 11.5%;
        z-index: 3;
        height: 13.1%;
    }
}

.share-btns {
    background-color: #fff;
    padding-top: 20px;
    transform: translateY(-20px);
    border-radius: 0 0 14px 14px;
    position: relative;
    z-index: 1;
    .n-button {
        width: 33%;
        height: 48px;
        position: relative;

        &:not(:last-child) {
            &::after {
                content: '';
                width: 1px;
                height: 14px;
                background: #3b3b3b;
                position: absolute;
                right: 0;
            }
        }
    }
}

.share-box {
    .f-col();
    align-items: center;
    --n-box-shadow: none;
    .share-bg {
        position: relative;
        z-index: 2;
    }
    .share-canvas {
        position: relative;
        z-index: 2;
    }
}

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

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