<template>
    <view class="popup-tip">
        <view class="popup-tip-content">
            <view class="content-title">
               精选好券领取成功
            </view>
            <!-- <view :class="`content-box sty-${type}`"> -->
            <view class="content-box" :style="{ backgroundImage: `url('${bgImageUrl}')` }">
              <view v-if="isUnlock" class="box-1">
                <!-- :src="$baseUrl +  `integral/${tupianBanben}/shengriPopup/${type}-1.png`" -->
                 <!-- :src="`/static/jingxuan/${type}-1.png`" -->
                <image :src="$baseUrl +  `integral/${tupianBanben}/jingxuan/${type}-1.png`" ></image>
              </view>
              <view class="box-2">
                <image :src="$baseUrl +  `integral/${tupianBanben}/jingxuan/${type}-2.png`" ></image>
              </view>
              <view class="box-3" @click="goUse">
                <image :src="$baseUrl +  `integral/${tupianBanben}/jingxuan/${type}-3.png`" ></image>
              </view>
            </view>
            <view class="content-2" @click="closeBtn" :style="{backgroundImage: `url(${$baseUrl +  `integral/${tupianBanben}/shengriPopup/close.png`})`}">
            </view>
        </view>
    </view>
</template>

<script setup>
import {
    ref,
    onMounted,
    computed,
    defineEmits,
    onUnmounted,
    getCurrentInstance
} from 'vue'
import { useUserStore } from "@/stores/user";
import { jump, JumpType } from '@/utils/index.js'
import md from '../../md';
const { proxy } = getCurrentInstance();
const $baseUrl = proxy.$baseUrl;
// 接受父组件参数
const props = defineProps({
    type: {
        type: String,
        default: '5', // 1 黄金、2 铂金、3 钻石、4 星光、5 星耀
    },
    isUnlock: {
        type: Boolean,
        default: true,  // 是否解锁 商品兑换券
    }
})
const tupianBanben = ref('1016')
const bgImageUrl = computed(() => {
   // 添加$baseUrl存在性检查
  const base = $baseUrl || '';
  return `${base}integral/${tupianBanben.value}/jingxuan/bg-${props.type}-${props.type}.png`
})

// 用户信息
const userStore = useUserStore();

// 回调函数
const emit = defineEmits(['statusChange', 'close'])

// 跳转小程序配置
const configuration ={
//  url: "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot",
    url: "subPackages/shopMainProcess/coupons/couponList",
    type: 2,
    extra: {
        appId: "wx4205ec55b793245e",
        envVersion: "release"
    }
}
// 前往使用按钮
const goUse = () => {
    console.log("🚀 ~ goUse:")
    //    md.sensorLogTake({
    //         xcxClick: "积分服务页-首屏页面点击",
    //         pageName: "积分服务页-首屏",
    //         buttonName: `${item.name}`,
    //     });
    const {url, type, extra} = configuration
    jump({
        type: type,
        url: url,
        extra:extra
    })
    emit('close')
}

// 关闭按钮
const closeBtn = () => {
    emit('close')
}


onMounted(() => {
    console.log('onMounted')
    wx.setPageStyle({
		style: {
			overflow: 'hidden'
		}
	})
})
onUnmounted(() => {
    // 弹窗关闭时恢复背景滚动
    wx.setPageStyle({
		style: {
			overflow: 'auto'
		}
	})
})
</script>

<style lang="scss" scoped>
.popup-tip {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);

    &-content {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        .content-title{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50rpx;
            font-weight: 700;
            color: #fff8e8;
        }
        .content-box {
            margin-top: 20rpx;
            width: 640rpx;
            padding: 55rpx 22rpx 40rpx 25rpx;
            overflow: hidden;
            background-size: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 24rpx;
            overflow: hidden;
            .box-1{
                width: 592rpx;
                height: 206rpx;
                margin-bottom: 30rpx;
                image{
                    width: 100%;
                    height: 100%;
                }
            }
            .box-2{
                width: 591rpx;
                height: 332rpx;
                 image{
                    width: 100%;
                    height: 100%;
                }
            }
            .box-3{
                margin-top: 50rpx;
                width: 442rpx;
                height: 85rpx;
                image{
                    width: 100%;
                    height: 100%;
                }

            }
        }
        // // 黄金
        // .sty-1 {
        //     background-image: url('@/static/jingxuan/bg-1.png');
        // }
        // // 铂金
        // .sty-2 {
        //     background-image: url('@/static/jingxuan/bg-2.png');
        // }
        // // 钻石
        // .sty-3 {
        //     background-image: url('@/static/jingxuan/bg-3.png');
        // }
        // // 星光
        // .sty-4 {
        //     background-image: url('@/static/jingxuan/bg-4.png');
        // }
        // // 星耀
        // .sty-5 {
        //     background-image: url('@/static/jingxuan/bg-5.png');
        // }

        .content-2 {
            margin-top: 65rpx;
            width: 50rpx;
            height: 50rpx;
            // background-image: url('@/static/shengriPopup/close.png');
            background-size: 100%;

        }




    }
}
</style>