<template>
  <view class="notice-container">
    <!-- 标题 -->
    <view class="notice-title">面试注意事项</view>
    <view class="notice-subtitle">为了保障面试顺利进行，请注意以下事项</view>
    
    <!-- 注意事项列表 -->
    <view class="notice-grid">
      <!-- 第一行 -->
      <view class="notice-item light">
        <view class="icon-container">
          <text class="iconfont">☀</text>
        </view>
        <text class="item-text">保持光线良好、干净背景、安静不受打扰</text>
      </view>
      
      <view class="notice-item smile">
        <view class="icon-container">
          <text class="iconfont">☺</text>
        </view>
        <text class="item-text">保持微笑、声音洪亮、正面直视摄像头</text>
      </view>
      
      <!-- 第二行 -->
      <view class="notice-item headphone">
        <view class="icon-container">
          <text class="iconfont">🎧</text>
        </view>
        <text class="item-text">保持声音回音接收正常、建议使用耳机</text>
      </view>
      
      <view class="notice-item wifi">
        <view class="icon-container">
          <text class="iconfont">📶</text>
        </view>
        <text class="item-text">保持网络通畅、面试期间勿断出</text>
      </view>
      
      <!-- 第三行 -->
      <view class="notice-item forbidden">
        <view class="icon-container">
          <text class="iconfont">✖</text>
        </view>
        <text class="item-text">请勿人脸离开屏幕</text>
      </view>
      
      <view class="notice-item forbidden">
        <view class="icon-container">
          <text class="iconfont">✖</text>
        </view>
        <text class="item-text">请勿录屏、截屏</text>
      </view>
    </view>
    
    <!-- 警告提示 -->
    <view class="warning-tip">
      * 建议开启免提模式，避免采用\短信等打断面试
    </view>
    
    <!-- 免责声明 -->
    <!-- <view class="disclaimer">
      本公司保障您的隐私，根据法律法规和监管要求收集必要的面试信息，下载、存储、使用您的面试视频，仅用于面试评估，过程中不会泄露您的个人信息。
    </view> -->
    
    <!-- 同意选项 -->
    <view class="agreement">
      <radio :checked="isAgreed" @tap="toggleAgreement" />
      <text class="agreement-text">我同意并知晓</text>
    </view>
    
    <!-- 添加语音检测组件 -->
    <voice-check-modal 
      :visible="showVoiceCheck"
      @complete="onVoiceCheckComplete"
    />
    
    <!-- 底部按钮 -->
    <button class="next-btn" :disabled="!isAgreed" @click="startInterview">下一步</button>
  </view>
</template>

<script>
import VoiceCheckModal from '../components/voice-check-modal.vue'

export default {
  components: {
    VoiceCheckModal
  },
  data() {
    return {
      isAgreed: false,
      showVoiceCheck: false
    }
  },
  methods: {
    toggleAgreement() {
      this.isAgreed = !this.isAgreed;
    },
    startInterview() {
      if (!this.isAgreed) {
        uni.showToast({
          title: '请先同意面试须知',
          icon: 'none'
        });
        return;
      }
      
      // 显示语音检测弹窗
      this.showVoiceCheck = true;
    },
    
    onVoiceCheckComplete() {
      // 关闭语音检测弹窗
      this.showVoiceCheck = false;
      
      // 跳转到下一个页面
      uni.navigateTo({
        url: '/pages/preview/preview',
        fail: (err) => {
          console.error('页面跳转失败:', err);
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style>
.notice-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #ffffff;
  padding: 30rpx;
}

.notice-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
  color: #333;
}

.notice-subtitle {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.notice-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.notice-item {
  width: 47%;
  height: 180rpx;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

.light {
  background-color: #f0f9eb;
}

.smile {
  background-color: #f0f9eb;
}

.headphone {
  background-color: #f0f9eb;
}

.wifi {
  background-color: #f0f9eb;
}

.forbidden {
  background-color: #fff8e6;
}

.icon-container {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15rpx;
}

.iconfont {
  font-size: 40rpx;
  color: #333;
}

.item-text {
  font-size: 24rpx;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.warning-tip {
  color: #ff9800;
  font-size: 24rpx;
  margin-bottom: 60rpx;
}

.disclaimer {
  font-size: 24rpx;
  color: #999;
  line-height: 1.5;
  margin-bottom: 30rpx;
}

.agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
}

.agreement-text {
  font-size: 28rpx;
  color: #333;
  margin-left: 10rpx;
}

.next-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #0039b3;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
  text-align: center;
}

.next-btn[disabled] {
  background-color: #0039b3;
  color: #fff;
}
</style> 