<template>
    <popup class="sucess-popup" v-model:show="showPopup" @close="handleClose">
        <div class="sucess-title">
            <div class="title-text">
                <img class="title-star" src="@/assets/img/guard/star.png" alt="" />
                幸赴中大之约
            </div>
            <div>以初心相护，朝夕温情相伴</div>
        </div>
        <div class="sucess-content">
            <img class="top-star" src="@/assets/img/guard/star.png" alt="" />
            <img class="right-star" src="@/assets/img/guard/star.png" alt="" />
            <img class="left-star" src="@/assets/img/guard/star.png" alt="" />
            <div class="card" v-if="treeObj && treeObj.treeImages && treeObj.treeImages.length > 0">
                <img class="img" v-lazyload="getImageUrl(treeObj.treeImages[0].filename)" alt="" />
                <div class="code">{{ treeObj.buyList[0].code }}</div>
            </div>
        </div>
    </popup>
</template>

<script setup>
import { Popup } from "vant";
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import { base_img_url2 } from "@/api/config.js";
const resize = "?x-oss-process=image/resize,w_1000";
const router = useRouter();

const props = defineProps({
    show: {
        type: Boolean,
        defalut: false,
    },
    treeObj: {
        type: Object,
        defalut: () => {},
    },
});

const getImageUrl = (filename) => {
    if (filename.startsWith("https")) {
        return filename; // 直接使用完整 URL
    } else {
        return base_img_url2 + filename + resize; // 拼接基础 URL
    }
};

const formatDate = (dateStr) => {
    return dateStr.split(" ")[0].replace(/-/g, ".");
};

const userInfo = ref({});

const showPopup = ref(false);

const handleClose = () => {
    showPopup.value = false;
};

watch(
    () => props.show,
    () => {
        showPopup.value = true;
    },
);
</script>

<style lang="less" scoped>
.sucess-popup {
    width: 90%;
    background: transparent;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .sucess-title {
        font-size: 28px;
        text-align: center;
        // background: url("@/assets/img/lj_home/ribbon.png") no-repeat center center / 100% 100%;
        margin-bottom: 23px;
        font-family: "PangMenZhengDao";
        // padding: 12px 23px 0;
        .title-text {
            position: relative;
            width: fit-content;
            margin: 0 auto;
            padding: 6px 20px 0 20px;
            .title-star {
                position: absolute;
                top: 0;
                left: 0;
                width: 21px;
                height: 20px;
            }
        }
    }
    .sucess-content {
        width: 88%;
        border-radius: 20px;
        padding: 9px;
        background: rgba(255, 255, 255, 0.15);
        box-shadow: 0 0 6px 0 rgba(255, 255, 255, 0.63) inset;
        box-sizing: border-box;
        backdrop-filter: blur(4px);
        position: relative;
        .top-star {
            width: 21px;
            height: 20px;
            position: absolute;
            top: -20px;
            right: 50px;
        }
        .right-star {
            width: 28px;
            height: 27px;
            position: absolute;
            top: 55px;
            right: -19px;
        }
        .left-star {
            width: 32px;
            height: 31px;
            position: absolute;
            top: 140px;
            left: -18px;
        }
        .card {
            position: relative;
            color: #000;
            border-radius: 16px;

            .img {
                border-radius: 16px;
                width: 100%;
                height: 323px;
                object-fit: cover;
            }
            .code {
                position: absolute;
                top: 0;
                left: calc(50% - 170px / 2);
                background: rgba(26, 26, 26, 0.6);
                font-size: 12px;
                color: #fff;
                padding: 6px 15px;
                border-radius: 2px 2px 10px 10px;
            }
        }
    }
    .button {
        font-size: 16px;
        color: #fff;
        padding: 10px 72px;
        border: 1px solid #fff;
        border-radius: 25px;
        text-align: center;
        margin: 35px 0 20px;
        background-image: linear-gradient(120deg, #00d4ff, #008eff);
    }

    .close-icon {
        width: 26px;
        height: 26px;
    }
}
</style>
