<template>
  <view class="notice-container">
    <!-- 标题 -->
    <view class="notice-title">面试注意事项</view>
    <view class="notice-subtitle">为了保障面试顺利进行，请注意以下事项</view>
    
    <!-- 注意事项列表 -->
    <view class="notice-grid">
      <!-- 第一行 -->
      <view class="notice-item">
        <view class="icon-container light">
          <text class="iconfont">☀</text>
        </view>
        <text class="item-text">保持光线良好、干净背景、安静不受打扰</text>
      </view>
      
      <view class="notice-item">
        <view class="icon-container smile">
          <text class="iconfont">☺</text>
        </view>
        <text class="item-text">保持微笑、声音洪亮、让面试官看清表达</text>
      </view>
      
      <!-- 第二行 -->
      <view class="notice-item">
        <view class="icon-container mic">
          <text class="iconfont">🎤</text>
        </view>
        <text class="item-text">保持声音回传准确、避免使用有线耳机</text>
      </view>
      
      <view class="notice-item">
        <view class="icon-container wifi">
          <text class="iconfont">📶</text>
        </view>
        <text class="item-text">保持网络通畅、避免网络间歇性断开</text>
      </view>
      
      <!-- 第三行 -->
      <view class="notice-item">
        <view class="icon-container forbidden">
          <text class="iconfont">⛔</text>
        </view>
        <text class="item-text">请勿人脸离开屏幕</text>
      </view>
      
      <view class="notice-item">
        <view class="icon-container forbidden">
          <text class="iconfont">⛔</text>
        </view>
        <text class="item-text">请勿录屏/截屏</text>
      </view>
    </view>
    
    <!-- 警告提示 -->
    <view class="warning-tip">
      <text>建议使用开启声音和视频打开模式，避免采用电话/短信等打断面试</text>
    </view>
    
    <!-- 免责声明 -->
    <view class="disclaimer">
      本公司保障您的隐私，根据法律法规和监管要求收集必要的面试信息，下载、存储、使用您的面试视频，仅用于面试评估，过程中不会泄露您的个人信息。
    </view>
    
    <!-- 同意选项 -->
    <view class="agreement">
      <checkbox :checked="isAgreed" @tap="toggleAgreement" />
      <text class="agreement-text">我同意并知晓</text>
    </view>
    
    <!-- 底部按钮 -->
    <button class="start-btn" :disabled="!isAgreed" @click="startInterview">开始面试</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isAgreed: false
    }
  },
  methods: {
    toggleAgreement() {
      this.isAgreed = !this.isAgreed;
    },
    startInterview() {
      if (!this.isAgreed) {
        uni.showToast({
          title: '请先同意面试须知',
          icon: 'none'
        });
        return;
      }
      
      uni.navigateTo({
        url: '/pages/face-photo/face-photo',
        fail: (err) => {
          console.error('页面跳转失败:', err);
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

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

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

.notice-subtitle {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 40rpx;
}

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

.notice-item {
  width: 42%;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

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

.light {
  background-color: #f1c40f;
}

.smile {
  background-color: #2ecc71;
}

.mic {
  background-color: #3498db;
}

.wifi {
  background-color: #9b59b6;
}

.forbidden {
  background-color: #e74c3c;
}

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

.item-text {
  font-size: 24rpx;
  color: #333;
  line-height: 1.4;
}

.warning-tip {
  background-color: #fff8e1;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
  border-left: 8rpx solid #ffc107;
}

.warning-tip text {
  font-size: 26rpx;
  color: #ff9800;
  line-height: 1.4;
}

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

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

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

.start-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #6c5ce7;
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
}

.start-btn[disabled] {
  background-color: #b2b2b2;
  color: #fff;
}
</style> 