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

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

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
    }
}

</script>


<template>
    <div class="share-poster-wrap" @touchmove.prevent>
        <div @click="handleCreatePoster">
            <template v-if="props.isSlot">
                <slot></slot>
            </template>
            <img v-else @click="handleCreatePoster" :style="props.style" class="share-icon" src="@/assets/hzyb/share-poster-icon.png"/>
        </div>
        <!-- <img @click="handleCreatePoster" class="chart-icon" src="@/assets/hzyb/share-poster-chart-icon.png" alt="" v-if="props.shareData.type=='chart_detail'">
        <img v-else @click="handleCreatePoster" :style="props.style" class="share-icon" src="@/assets/hzyb/share-poster-icon.png"/> -->

        <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/hzyb/loading.png"/>
            <div>海报生成中...</div>
        </div>
        <img v-if="showPoster" class="poster-img" :src="posterImg" show-menu-by-longpress />
    </div>
</template>

<style lang="scss" scoped>
.share-poster-wrap{
    .share-icon{
        position: fixed;
        bottom: 100px;
        right: 34px;
        z-index: 50;
        width: 100px;
        height: 100px;
    }
    .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: 998;
    }
    .loading-box{
        background-color: #fff;
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 999;
        transform: translate(-50%,-50%);
        width: 417px;
        height: 261px;
        text-align: center;
        padding-top: 80px;
        font-size: 32px;
        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: 90vw;
        display: block;
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 999;
        transform: translate(-50%,-50%);
        border-radius: 16px;
    }
}
</style>
