<template>
    <div class="">
        <van-overlay :show="show" @touchstart="handelTouchstart" @touchmove="handelTouchmove" @touchend="handelTouchend"/>
        <img src="@/assets/images/share/tip.png" alt="" class="tip" v-if="show" @click="$emit('closeShare')">
        <img src="@/assets/images/share/ai.gif" alt="" class="ai" v-if="show">
        <img src="@/assets/images/share/shadow.png" alt="" class="shadow">
    </div>
</template>

<script>

export default {
    name: 'SvgIcon',
    data() {
        return {
            time: null,
            flag:false
        }
    },
    props: {
        show: {
            type: Boolean,
            required: false
        },
    },
    computed: {

    },
    methods: {
        handelTouchstart() {
            this.flag = true;
            clearTimeout(this.time)
            this.time = setTimeout(()=>{
                if(this.flag){
                    this.$emit('closeShare')
                }
            },1500)
        },
        handelTouchmove(){
            this.flag = false;
        },
        handelTouchend(){
            this.flag = false;
        }
    },
    destroyed(){
        clearInterval(this.time)
    },
}
</script>

<style scoped>
.tip {
    position: absolute;
    top: 30px;
    left: 90px;
    z-index: 2;
    width: 270px;
    height: 206px;
}

.ai {
    position: absolute;
    top: 50px;
    left: 70px;
    z-index: 2;
    width: 106px;
    height: 92px;
}

.shadow {
    position: absolute;
    top: 125px;
    left: 95px;
    z-index: 2;
    width: 60px;
    height: 25px;
}
</style>