<template>
  <view v-if="visible" class="popup-mask" @click="handleMaskClick">
    <view class="popup-container" @click.stop>
      <!-- 关闭按钮 -->
      <view v-if="showClose" class="close-btn" @click="handleClose">
        <text>×</text>
      </view>
      
      <!-- 弹窗内容 -->
      <image 
        v-if="imageUrl" 
        class="popup-image" 
        :src="imageUrl" 
        mode="aspectFit"
      />
      <view v-if="title" class="popup-title">{{ title }}</view>
      <view v-if="content" class="popup-content">{{ content }}</view>
      <view class="popup-buttons" v-if="showCancel || buttonText">
        <button v-if="showCancel" class="popup-btn cancel" @click="handleClose">取消</button>
        <button v-if="buttonText" class="popup-btn confirm" @click="handleConfirm">{{ buttonText }}</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Popup',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    imageUrl: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    buttonText: {
      type: String,
      default: ''
    },
    showClose: {
      type: Boolean,
      default: true
    },
    showCancel: {
      type: Boolean,
      default: false
    },
    closeOnMask: {
      type: Boolean,
      default: true
    }
  },
  emits: ['close', 'confirm'],
  methods: {
    handleMaskClick() {
      if (this.closeOnMask) {
        this.handleClose()
      }
    },
    handleClose() {
      this.$emit('close')
    },
    handleConfirm() {
      this.$emit('confirm')
    }
  }
}
</script>

<style lang="scss" scoped>
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.popup-container {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  width: 300px;
  max-width: 90%;
  
  .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    text {
      font-size: 20px;
      color: #999;
    }
  }
  
  .popup-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 10px;
  }
  
  .popup-content {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-bottom: 15px;
    line-height: 1.6;
  }
  
  .popup-image {
    width: 100%;
    height: 150px;
    margin-bottom: 10px;
    border-radius: 6px;
  }
  
  .popup-buttons {
    display: flex;
    gap: 10px;
    
    .popup-btn {
      flex: 1;
      height: 40px;
      line-height: 40px;
      font-size: 15px;
      border-radius: 20px;
      border: none;
      
      &::after {
        border: none;
      }
      
      &.cancel {
        background: #f5f5f5;
        color: #666;
      }
      
      &.confirm {
        background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
        color: #fff;
      }
    }
  }
}
</style>
