<template>
    <view class="popup-tip" >
        <view class="tip-panel-modal"
          :style="{
            background: `url(${$baseUrl}integral/1022/addTipsPanalBg${bgIndex}.png) no-repeat center/contain`
          }"
        @click.stop>
      <!-- 弹窗背景 -->
      <!-- <image 
        class="modal-bg"
        :src="`${$baseUrl}integral/1022/addTipsPanalBg${bgIndex}.png`"
        mode="aspectFit"
      /> -->
      
      <!-- 弹窗内容 -->
      <view class="modal-content">
        
        <!-- 添加按钮 -->
        <view 
          class="add-button"
          :style="{
            background: `url(${$baseUrl}integral/1022/shengriliBtnBg${bgIndex}.png) no-repeat center/contain`
          }"
          @click="handleAddClick"
        >
          <text class="button-text">去添加</text>
        </view>
      </view>
        <image 
            class="close-button"
            :src="`${$baseUrl}integral/1022/closeBtn.png`"
            mode="aspectFit"
            @click="handleOverlayClick"
        />
    </view>
    </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// 定义组件名称
defineOptions({
  name: 'shengrili-tip-panel'
})

// 定义组件属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  bgIndex: {
    type: Number,
    default: 2,
    validator: (value) => [2, 3, 4].includes(value)
  }
})

// 定义组件事件
const emit = defineEmits(['close', 'add'])

// 处理遮罩层点击
const handleOverlayClick = () => {
    console.log('handleOverlayClick')
  emit('close')
}

// 处理添加按钮点击
const handleAddClick = () => {
    emit('add')
    emit('close')
}
</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.7);
    display: flex;
    justify-content: center;
    align-items: center;

    .tip-panel-modal {
        position: relative;
        width: 640rpx;
        height: 368rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        // background-color: #ebe7f1;
        // border-radius: 25rpx;
        // .modal-bg {
        //     position: absolute;
        //     top: 0;
        //     left: 0;
        //     width: 100%;
        //     height: 100%;
        //     z-index: 1;
        // }

        .modal-content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            .add-button {
                width: 442rpx;
                height: 85rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 200rpx;
                .button-text {
                    font-size: 28rpx;
                    color: #ffffff;
                    font-weight: bold;
                    text-align: center;
                }
            }
        }

        .close-button {
            z-index: 3;
            position: absolute;
            width: 50rpx;
            height: 50rpx;
            margin-top: 480rpx;
        }
    }
    
}
</style>