<template>
  <view v-if="visible" class="xingmalabnotimepop" @click="handleOverlayClick">
    <!-- 背景遮罩 -->
    <view class="mask"></view>
    
    <!-- 弹窗内容 -->
    <view class="popup-content">
      <image class="xingmalabnotimepopbg" :src="`${$baseUrl}${XINGMALAB_IMAGES.NO_TIME.BG}`" mode="aspectFit"></image>
      <image class="xingmalabnotimepopbtn" :src="`${$baseUrl}${XINGMALAB_IMAGES.NO_TIME.BTN}`" mode="aspectFit" @click="handleButtonClick"></image>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits, getCurrentInstance } from 'vue'
import { XINGMALAB_IMAGES } from './xingmalabImages.js'

// 获取全局属性
const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl

// 定义组件属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '暂无时间'
  }
})

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

// 按钮点击事件
const handleButtonClick = () => {
  emit('button-click')
}

// 遮罩层点击事件
const handleOverlayClick = (event) => {
  // 阻止事件冒泡
  // event.stopPropagation()
  // emit('close')
}
</script>

<style lang="less" scoped>
@import "../../common.less";

.xingmalabnotimepop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .popup-content {
    position: relative;
    width: 618rpx;
    height: 460rpx;
    z-index: 1;
  }

  .xingmalabnotimepopbg {
    width: 618rpx;
    height: 460rpx;
    left: 0rpx;
    top: 0rpx;
    position: absolute;
  }

  .xingmalabnotimepopbtn {
    width: 466rpx;
    height: 97rpx;
    left: 76rpx;
    top: 312rpx;
    position: absolute;
    transition: transform 0.2s ease;

    &:active {
      transform: scale(0.95);
    }
  }
}
</style>