<template>
    <div class="flex items-center relative" @click.stop="like()">
        <div class="absolute bottom-0 left-[-20px]">
            <Vue3Lottie
                ref="likeRef"
                :animationData="likeJSON"
                v-if="showLike"
                @onComplete="showLike = false"
                :loop="false"
                :height="100"
                :width="60"
            />
        </div>
        <img class="w-[24px] animate__animated" ref="imgRef" :src="liked ? likePreImg : likeImg" alt="" />
        <span class="text-[#797A8A] text-xs" :class="{ 'text-[#FF3F71]': liked }">
            <slot></slot>
        </span>
    </div>
</template>

<script setup lang="ts">
import '@/styles/animate.css'
import { ref } from 'vue'
import likePreImg from '@/assets/icon_dianzhan-pre.png'
import likeImg from '@/assets/icon_dianzhan.png'
import { Vue3Lottie } from 'vue3-lottie'
import 'vue3-lottie/dist/style.css'
import likeJSON from '@/assets/lottie/like.json'

const props = defineProps({
    liked: {
        type: Boolean,
        default: false
    }
})

interface Emit {
    (ev: 'like'): void
}
const emit = defineEmits<Emit>()
const imgRef = ref(null as any)
const showLike = ref(false)

function like() {
    if (imgRef.value) {
        imgRef.value.className = imgRef.value.className + ' animate__tada'
        setTimeout(() => {
            imgRef.value.className = imgRef.value.className.replace(/ animate__tada/, '')
        }, 800)
    }
    if (!props.liked) {
        showLike.value = true
    }
    emit('like')
}
</script>

<style lang="less" scoped></style>
