<template>
  <view class="tip-panel-overlay" v-if="visible" @click="handleOverlayClick">
    <view class="tip-panel-modal" @click.stop>
      <!-- 弹窗背景 -->
      <image 
        class="modal-bg"
        :src="`${$baseUrl}integral/1021/addTipsPanalBg${bgIndex}.png`"
        mode="aspectFit"
      />
      
      <!-- 弹窗内容 -->
      <view class="modal-content">
        <!-- 提示文字 -->
        <text class="tip-text">当前没有宝宝信息，无法领取生日礼哦</text>
        
        <!-- 添加按钮 -->
        <view 
          class="add-button"
          :style="{
            background: `url(${$baseUrl}integral/1021/shengriliBtnBg${bgIndex}.png) no-repeat center/contain`
          }"
          @click="handleAddClick"
        >
          <text class="button-text">去添加</text>
        </view>
      </view>
    </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 = () => {
  emit('close')
}

// 处理添加按钮点击
const handleAddClick = () => {
  emit('add')
}
</script>

<style lang="less" scoped>
.tip-panel-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
//   top: 0;
//   left: 0;
//   right: 0;
//   bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.tip-panel-modal {
  position: relative;
  width: 600rpx;
  height: 400rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.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%;
  padding: 60rpx 40rpx;
  box-sizing: border-box;
}

.tip-text {
  font-size: 32rpx;
  color: #503404;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 60rpx;
  font-weight: 500;
}

.add-button {
  width: 300rpx;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 40rpx;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.add-button:active {
  transform: scale(0.95);
}

.button-text {
  font-size: 28rpx;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}
</style>
