<template>
  <view class="agreement-modal" v-if="visible">
    <view class="agreement-content">
      <view class="agreement-header">
        <text class="agreement-title">用户须知</text>
      </view>
      
      <!-- 用普通view替代scroll-view -->
      <view class="agreement-body">
        <view class="agreement-inner">
          <view class="agreement-section">
            <view class="section-title">1 年龄与身份</view>
            <text class="section-item">1.1 本人已年满 18 周岁，具备完全民事行为能力；</text>
            <text class="section-item">1.2 本人承诺不得让未成年人接触或使用本平台内容及成人用品；</text>
          </view>
          
          <view class="agreement-section">
            <view class="section-title">2 AIGC 生成规范</view>
            <text class="section-item">2.1 不得生成、发布或传播淫秽色情（含未成年人或性交易）、赌博、暴力恐怖、歧视仇恨、危害国家安全、违法诈骗等信息；</text>
            <text class="section-item">2.2 不得输出侵犯知识产权、肖像权、隐私权或其他合法权益的内容；</text>
            <text class="section-item">2.3 应自行甄别生成内容的真实性与准确性，不得用生成内容冒充官方信息或误导他人；</text>
            <text class="section-item">2.4 不得上传或指令模型生成他人身份证号、联系方式、人脸图像等可识别个人信息，除非已获得合法授权；</text>
            <text class="section-item highlight-item">2.5 不得尝试逆向工程、导出模型权重或利用注入攻击规避审查；</text>
            <text class="section-item highlight-item">2.6 发现输出违规或存在安全隐患时，应立即停止使用并通过平台渠道反馈；</text>
          </view>
          
          <view class="agreement-section">
            <view class="section-title">3 其他遵守事项</view>
            <text class="section-item">3.1 成人用品仅供个人私密场景使用，应按说明书清洁、消毒并适度使用，如有疾病史应先咨询医生；</text>
            <text class="section-item">3.2 违反本须知或《AIGC 平台及成人用品中国境内用户使用规范》将导致警告、限制功能、封禁账号或配合监管调查；</text>
            <text class="section-item">3.3 若不同意本须知，请立即退出并停止使用本平台及相关产品。</text>
          </view>
        </view>
      </view>
      
      <view class="agreement-footer">
        <view 
          class="btn-disagree" 
          :class="{ 'btn-disabled': isProcessing }"
          @click.stop.prevent="handleDisagree" 
          @tap.stop.prevent="handleDisagree"
        >
          {{ isProcessing ? '处理中...' : '暂不进入' }}
        </view>
        <view 
          class="btn-agree" 
          :class="{ 'btn-disabled': isProcessing }"
          @click.stop.prevent="handleAgree" 
          @tap.stop.prevent="handleAgree"
        >
          {{ isProcessing ? '处理中...' : '确定' }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['agree', 'disagree']);

// 防止重复点击的状态
const isProcessing = ref(false);

// 组件挂载时的调试信息
onMounted(() => {
  console.log('UserAgreement component mounted, visible:', props.visible);
});

// 防抖处理函数
const debounce = (func, wait) => {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
};

// 处理同意事件
const handleAgree = debounce(async () => {
  if (isProcessing.value) {
    console.log('UserAgreement: handleAgree already processing, skipping');
    return;
  }
  
  isProcessing.value = true;
  console.log('UserAgreement: handleAgree clicked');
  
  try {
    console.log('About to emit agree event');
    emit('agree');
    console.log('Agree event emitted');
    
    // 确保DOM更新完成
    await nextTick();
  } catch (error) {
    console.error('Error in handleAgree:', error);
  } finally {
    // 延迟重置状态，避免快速连续点击
    setTimeout(() => {
      isProcessing.value = false;
    }, 300);
  }
}, 300);

// 处理不同意事件
const handleDisagree = debounce(async () => {
  if (isProcessing.value) {
    console.log('UserAgreement: handleDisagree already processing, skipping');
    return;
  }
  
  isProcessing.value = true;
  console.log('UserAgreement: handleDisagree clicked');
  
  try {
    console.log('About to emit disagree event');
    emit('disagree');
    console.log('Disagree event emitted');
    
    // 确保DOM更新完成
    await nextTick();
  } catch (error) {
    console.error('Error in handleDisagree:', error);
  } finally {
    // 延迟重置状态，避免快速连续点击
    setTimeout(() => {
      isProcessing.value = false;
    }, 300);
  }
}, 300);
</script>

<style scoped>
.agreement-modal {
  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: 99999;
  pointer-events: auto;
}

.agreement-content {
  width: 80%;
  max-width: 600rpx;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  pointer-events: auto;
}

.agreement-header {
  padding: 20rpx 0;
  text-align: center;
  border-bottom: 1rpx solid #EEEEEE;
}

.agreement-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #FF9800;
}

.agreement-body {
  max-height: 70vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.agreement-inner {
  padding: 20rpx 35rpx 20rpx 30rpx;
}

.agreement-section {
  margin-bottom: 18rpx;
  display: flex;
  flex-direction: column;
}

.section-title {
  font-size: 28rpx;
  font-weight: 600;
  margin-bottom: 10rpx;
  color: #333333;
  letter-spacing: 2rpx;
}

.section-item {
  font-size: 22rpx;
  color: #666666;
  line-height: 1.8;
  margin-bottom: 12rpx;
  letter-spacing: 3.5rpx;
  display: block;
  text-align: left;
  white-space: pre-wrap;
  text-justify: inter-character;
  max-width: 520rpx;
}

.highlight-item {
  font-weight: 500;
  color: #333333;
}

.agreement-footer {
  display: flex;
  border-top: 1rpx solid #EEEEEE;
  margin-top: auto;
}

.btn-disagree, .btn-agree {
  flex: 1;
  height: 86rpx;
  line-height: 86rpx;
  text-align: center;
  font-size: 30rpx;
  margin: 0;
  border-radius: 0;
  border: none;
  outline: none;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  transition: all 0.2s ease;
}

.btn-disagree {
  background: #FFFFFF;
  color: #999999;
  border-right: 1rpx solid #EEEEEE;
}

.btn-disagree:hover {
  background: #f5f5f5;
}

.btn-disagree:active {
  background: #eeeeee;
}

.btn-agree {
  background: #FF9800;
  color: #FFFFFF;
}

.btn-agree:hover {
  background: #e68900;
}

.btn-agree:active {
  background: #cc7700;
}

.btn-disabled {
  background: #cccccc;
  color: #999999;
  cursor: not-allowed;
}
</style> 