<template>
    <Overlay class="app-reward" :show="show">
        <div class="app-reward__wrapper" @click.stop>
            <img class="image" src="@mobile/assets/images/hongbao.png" @click="showRedEnvelope = true" />
            <div class="content" v-if="!showRedEnvelope">
                <h1>{{ title }}</h1>
            </div>
            <div :class="['content', showRedEnvelope ? 'is-show' : 'is-hide']">
                <h1>恭喜获得红包</h1>
                <p>{{ value?.toFixed(2) }}</p>
            </div>
            <div class="buttons" v-if="showRedEnvelope">
                <Icon name="close" @click="emit('click')" />
            </div>
        </div>
    </Overlay>
</template>

<script lang="ts" setup>
import { shallowRef, watch } from 'vue'
import { Overlay, Icon } from 'vant'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    value: {
        type: Number,
        default: 0
    },
    title: String,
})

const emit = defineEmits(['click'])
const showRedEnvelope = shallowRef(false)

watch(() => props.show, (status) => {
    if (status) {
        showRedEnvelope.value = false
    }
})
</script>

<style lang="less" scoped>
@import './index.less';
</style>