<script setup>
import {ref} from 'vue'
import { onLongPress } from '@vueuse/core'
import {apiGetPoster} from '@/api/common'

const props=defineProps({
    style:Object,
    shareData:Object,
    isSlot:{
        type:Boolean,
        default:false
    }
})

const imgDom=ref(null)

let show=ref(false)
let showPoster=ref(false)
let posterImg=ref('')

const handleCreatePoster=async ()=>{
    show.value=true
    const res=await apiGetPoster({
        code_page:props.shareData.code_page,
        code_scene:props.shareData.code_scene,
        source:props.shareData.type,
        pars:JSON.stringify(props.shareData.data)
    })
    if(res.code==200){
        posterImg.value=res.data
        show.value=false
        showPoster.value=true
    }else{
        show.value=false
    }
}

const onLongPressImg=()=>{
    // const a=document.createElement('a')
    // a.setAttribute("download",'名字')
    // a.style.display = "none"
    // a.href=posterImg.value+'?response-content-type=application/octet-stream'
    // document.body.appendChild(a);
    // a.click()

    let img=new Image()
    img.setAttribute('crossOrigin', 'anonymous');
    img.src=posterImg.value
    img.onload=()=>{
        let canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        let context = canvas.getContext('2d');
        context.drawImage(img, 0, 0, img.width, img.height);
        let dataURL = canvas.toDataURL("image/png", 1);
        const a=document.createElement('a')
        a.setAttribute("download",'海报')
        a.style.display = "none"
        a.href=dataURL
        document.body.appendChild(a);
        a.click()
    }
    img.onerror=(e)=>{
        console.log('图片加载失败',e);
    }
}

onLongPress(imgDom, onLongPressImg)

</script>


<template>
    <div class="share-poster-wrap" @touchmove.prevent>
        <div v-if="$store.state.platform==='xcx'" @click="handleCreatePoster" style="text-align:center">
            <slot v-if="props.isSlot"></slot>
            <img 
                :style="props.style" 
                class="share-icon" 
                src="@/assets/share-poster-icon.png" 
                v-else
            />
        </div>
        <div class="poster-mask" v-if="show||showPoster" @click="showPoster=false" @touchmove.prevent></div>
        <div class="loading-box" v-if="show">
            <img class="load-img" src="@/assets/loading.png"/>
            <div>海报生成中...</div>
        </div>
        <img v-if="showPoster" ref="imgDom" class="poster-img" :src="posterImg" />
    </div>
</template>

<style lang="scss" scoped>
.share-poster-wrap{
    .share-icon{
        position: fixed;
        bottom: 150px;
        right: 36px;
        z-index: 1000;
        width: 50px;
        height: 50px;
        display: block;
    }
    .chart-icon{
        float: right;
        width: 40px;
        height: 40px;
        margin-left: 30px;
    }
    .poster-mask{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1001;
    }
    .loading-box{
        background-color: #fff;
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 1002;
        transform: translate(-50%,-50%);
        width: 417px;
        height: 261px;
        text-align: center;
        padding-top: 80px;
        font-size: 16px;
        font-weight: bold;
        .load-img{
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 91px;
            height: 91px;
            animation: circle 1s linear infinite;
        }
        @keyframes circle {
            0%{
                transform: rotateZ(0);
            }
            100%{
                transform: rotateZ(360deg);
            }
        }
    }
    .poster-img{
        width: 400px;
        display: block;
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 1002;
        transform: translate(-50%,-50%);
        border-radius: 16px;
    }
}
</style>
