<template>
    <view class="tip_popup">
        <uni-popup ref="popupRef" :is-mask-click="false" animation type="center">
            <view class="popup_box">
                <view class="container">
                    <image
                        v-if="showSuccessIcon"
                        :src="
                            type === 'success'
                                ? `${OSS_URL}/iconfont/success_icon.png`
                                : `${OSS_URL}/iconfont/fail_icon.png`
                        "
                        class="icon"
                        mode=""
                    ></image>
                    <view :class="[type === 'success' ? 'success' : 'fail']"> {{ text }} </view>
                    <view v-if="messageTip" class="message_tip" v-html="messageTip"></view>
                </view>
                <view v-if="showBtn" class="btn" @tap="tapBack">
                    {{ btnText }}
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script setup>
import { computed, nextTick, ref, watch } from 'vue';

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    // 类型:success,fail
    type: {
        type: String,
        default: 'success',
    },
    // 是否展示成功图标
    showSuccessIcon: {
        type: Boolean,
        default: true,
    },
    // 是否展示按钮
    showBtn: {
        type: Boolean,
        default: false,
    },
    // 按钮文案
    btnText: {
        type: String,
        default: '返回',
    },
    text: {
        type: String,
        default: '加入成功',
    },
    messageTip: {
        type: String,
        default: '',
    },
});
const emits = defineEmits(['update:modelValue', 'backBtn']);
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const popupRef = ref(null);
// 点击
function tapBack() {
    popupRef.value.close();
    emits('update:modelValue', false);
    emits('backBtn');
}
watch(
    () => props.modelValue,
    () => {
        if (props.modelValue) {
            nextTick(() => {
                popupRef.value.open();
                if (!props.showBtn) {
                    setTimeout(() => {
                        popupRef.value.close();
                        emits('update:modelValue', false);
                    }, 1500);
                }
            });
        }
    },
    {
        immediate: true,
        deep: true,
    },
);
</script>

<style lang="scss" scoped>
.tip_popup {
    .popup_box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 594rpx;
        height: 346rpx;
        background-color: #fff;
        border-radius: 20rpx;
        text-align: center;

        .container {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .icon {
                width: 60rpx;
                height: 60rpx;
            }

            .success {
                margin-top: 30rpx;
                color: #21d17a;
                font-size: 34rpx;
                font-weight: 600;
            }
            .fail {
                margin-top: 30rpx;
                font-size: 34rpx;
                font-weight: 600;
                color: #ff2828;
            }
            .message_tip {
                margin-top: 20rpx;
                font-size: 30rpx;
                color: #333;
            }
        }

        .btn {
            width: 100%;
            height: 108rpx;
            line-height: 108rpx;
            border-top: 1px solid #eeeeee;
            color: #333333;
            font-size: 34rpx;
        }
    }
}
</style>
