<template>
  <view class="agreement-mask" v-if="show" @click="closePopup">
    <view class="agreement-popup" @click.stop>
      <view class="popup-content">
        <!-- 动态图标 -->
        <image v-if="showIcon && icon" :src="icon" mode="aspectFit" class="svg"></image>
        <view class="text-content">
          <!-- 动态标题 -->
          <view class="popup-Title" v-if="title">{{ title }}</view>
          <!-- 动态消息内容 -->
          <view class="popup-Message" v-if="message">{{ message }}</view>
        </view>
      </view>
      <!-- 按钮组 -->
      <view class="popup-buttons">
        <button v-if="showCancel" class="btn cancelBtn" @click="handleCancel">{{ cancelText }}</button>
        <button class="btn agreeBtn" @click="handleConfirm">{{ confirmText }}</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 控制显示
    show: {
      type: Boolean,
      default: false
    },
    // 标题内容（可选）
    title: {
      type: String,
      default: ''
    },
    // 消息内容
    message: {
      type: String,
      default: ''
    },
    // 确认按钮文本
    confirmText: {
      type: String,
      default: '确定'
    },
    // 取消按钮文本
    cancelText: {
      type: String,
      default: '取消'
    },
    // 是否显示取消按钮
    showCancel: {
      type: Boolean,
      default: false
    },
    // 是否显示图标
    showIcon: {
      type: Boolean,
      default: true
    },
    // 图标路径（支持网络和本地路径）
    icon: {
      type: String,
      default: ''
    },
    // 图标样式
    iconStyle: {
      type: Object,
      default: () => ({
        width: '58rpx',
        height: '62rpx',
        marginBottom: '20rpx'
      })
    }
  },
  methods: {
    handleConfirm() {
      this.$emit('confirm')
      this.$emit('update:show', false)
    },
    handleCancel() {
      this.$emit('cancel')
      this.$emit('update:show', false)
    },
    closePopup() {
      this.$emit('close')
      this.$emit('update:show', false)
    }
  }
}
</script>

<style scoped>
/* 遮罩层 */
.agreement-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* 弹窗主体 */
.agreement-popup {
  width: 60%;
  background-color: rgb(42, 42, 42);
  border-radius: 40rpx;
  padding: 30rpx;
  text-align: center;
  border: 1px solid rgba(255, 200, 78, 0.3);
}

.popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-content {
  width: 100%;
}

.popup-Title {
  color: rgba(255, 255, 255, 0.86);
  text-align: center;
  padding: 30rpx 0 10rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.popup-Message {
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 10rpx 20rpx 30rpx;
  font-size: 28rpx;
  line-height: 1.5;
}

/* 图标样式 */
.svg {
  width: 72rpx;
  height: 60rpx;
  margin-bottom: v-bind('iconStyle.marginBottom');
}

/* 按钮组 */
.popup-buttons {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}

/* 按钮基础样式 */
.btn {
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 40rpx;
  font-size: 24rpx;
  margin: 0 10rpx;
  padding: 0 30rpx;
  min-width: 170rpx;
}

/* 确认按钮 */
.agreeBtn {
  background: rgba(187, 230, 0, 1);
  color: #232323;
  border: none;
}

/* 取消按钮 */
.cancelBtn {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
</style>