<template>
  <view v-if="visible" class="xingmalabconfirmpop" @click="handleOverlayClick">
    <!-- 背景遮罩 -->
    <view class="mask"></view>
    
    <!-- 弹窗内容 -->
    <view class="popup-content">
      <image class="xingmalabconfirmpopbg" :src="`${$baseUrl}${XINGMALAB_IMAGES.CONFIRM.BG}`" mode="aspectFit"></image>
      <image class="xingmalabconfirmpopconfirmbtn" :src="`${$baseUrl}${XINGMALAB_IMAGES.CONFIRM.CONFIRM_BTN}`"
        mode="aspectFit" @click="handleConfirm"></image>
      <image class="xingmalabcancelbtn" :src="`${$baseUrl}${XINGMALAB_IMAGES.CONFIRM.CANCEL_BTN}`" mode="aspectFit"
        @click="handleCancel"></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: '确认'
  },
  confirmText: {
    type: String,
    default: '确认'
  },
  cancelText: {
    type: String,
    default: '取消'
  }
})

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

// 确认按钮点击事件
const handleConfirm = () => {
  emit('confirm')
}

// 取消按钮点击事件
const handleCancel = () => {
  emit('cancel')
}

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

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

.xingmalabconfirmpop {
  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: 557rpx;
    z-index: 1;
  }

  .xingmalabconfirmpopbg {
    width: 618rpx;
    height: 557rpx;
    left: 0rpx;
    top: 0rpx;
    position: absolute;
  }

  .xingmalabconfirmpopconfirmbtn {
    width: 275rpx;
    height: 97rpx;
    left: 318rpx;
    top: 408rpx;
    position: absolute;
    transition: transform 0.2s ease;

    &:active {
      transform: scale(0.95);
    }
  }

  .xingmalabcancelbtn {
    width: 279rpx;
    height: 101rpx;
    left: 28rpx;
    top: 406rpx;
    position: absolute;
    transition: transform 0.2s ease;

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