<template>
  <view class="photo-container">
    <!-- 标题 -->
    <view class="photo-header">
      <text class="photo-title">拍摄照片</text>
      <text class="photo-subtitle">我们将用于身份核验，请正对摄像头</text>
    </view>
    
    <!-- 照片预览区域 -->
    <view class="photo-preview">
      <!-- 使用camera组件替代静态图片 -->
      <camera v-if="!photoSrc" device-position="front" flash="auto" class="camera" @error="handleCameraError"></camera>
      <image v-else class="preview-image" :src="photoSrc" mode="aspectFit"></image>
      <view class="face-outline"></view>
    </view>
    
    <!-- 拍照按钮 -->
    <button v-if="!photoSrc" class="capture-btn" @click="takePhoto">拍照</button>
    <view v-else class="btn-group">
      <button class="retry-btn" @click="retakePhoto">重新拍照</button>
      <button class="start-btn" @click="startInterview">开始面试</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      photoSrc: '', // 拍摄的照片路径
      isCameraReady: false,
      cameraContext: null
    }
  },
  onReady() {
    // 相机组件初始化完成后创建相机上下文
    this.cameraContext = uni.createCameraContext();
  },
  methods: {
    // 处理相机错误
    handleCameraError(e) {
      console.error('相机错误:', e);
      uni.showToast({
        title: '相机初始化失败，请检查权限设置',
        icon: 'none'
      });
    },
    
    // 拍照方法
    takePhoto() {
      if (!this.cameraContext) {
        uni.showToast({
          title: '相机未就绪',
          icon: 'none'
        });
        return;
      }
      
      uni.showLoading({
        title: '拍照中...'
      });
      
      this.cameraContext.takePhoto({
        quality: 'high',
        success: (res) => {
          this.photoSrc = res.tempImagePath;
          uni.hideLoading();
        },
        fail: (err) => {
          console.error('拍照失败:', err);
          uni.hideLoading();
          uni.showToast({
            title: '拍照失败，请重试',
            icon: 'none'
          });
        }
      });
    },
    
    // 重新拍照
    retakePhoto() {
      this.photoSrc = '';
    },
    
    startInterview() {
      if (!this.photoSrc) {
        uni.showToast({
          title: '请先完成拍照',
          icon: 'none'
        });
        return;
      }
      
      uni.showLoading({
        title: '验证中...'
      });
      
      // 这里可以添加将照片上传到服务器进行身份验证的代码
      // 例如：this.uploadPhoto();
      
      setTimeout(() => {
        uni.hideLoading();
        uni.navigateTo({
          url: '/pages/camera/camera',
          fail: (err) => {
            console.error('页面跳转失败:', err);
            uni.showToast({
              title: '页面跳转失败',
              icon: 'none'
            });
          }
        });
      }, 1500);
    }
    
    // 上传照片方法（示例）
    /* 
    uploadPhoto() {
      uni.uploadFile({
        url: 'https://your-api-endpoint.com/upload',
        filePath: this.photoSrc,
        name: 'photo',
        success: (res) => {
          const data = JSON.parse(res.data);
          if (data.success) {
            // 验证成功，继续流程
          } else {
            // 验证失败，提示用户
            uni.showToast({
              title: data.message || '验证失败，请重试',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          console.error('上传失败:', err);
          uni.showToast({
            title: '网络错误，请重试',
            icon: 'none'
          });
        }
      });
    }
    */
  }
}
</script>

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

.photo-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}

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

.photo-subtitle {
  font-size: 28rpx;
  color: #666;
}

.photo-preview {
  position: relative;
  width: 100%;
  height: 800rpx;
  background-color: #000;
  border-radius: 20rpx;
  overflow: hidden;
  margin-bottom: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.face-outline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400rpx;
  height: 500rpx;
  border: 4rpx dashed #fff;
  border-radius: 200rpx;
  pointer-events: none;
}

.camera {
  width: 100%;
  height: 100%;
}

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

.btn-group {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 60rpx;
}

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

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