<template>
  <div class="camera-preview" :class="{ loading: loading, error: hasError }">
    <!-- 加载中 -->
    <div v-if="loading" class="preview-loading">
      <div class="loading-spinner"></div>
      <span>摄像头加载中...</span>
    </div>

    <!-- 错误状态 -->
    <div v-else-if="hasError" class="preview-error">
      <div class="error-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
          <circle cx="12" cy="13" r="4" />
          <line x1="1" y1="1" x2="23" y2="23" />
        </svg>
      </div>
      <span>摄像头不可用</span>
    </div>

    <!-- 预览画面 -->
    <video
      v-else-if="streamUrl"
      ref="videoRef"
      class="preview-video"
      autoplay
      playsinline
      muted
    >
      <source :src="streamUrl" type="application/x-mpegURL" />
    </video>

    <!-- 默认状态 -->
    <div v-else class="preview-placeholder">
      <div class="placeholder-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
          <circle cx="12" cy="13" r="4" />
        </svg>
      </div>
      <span>摄像头预览</span>
    </div>

    <!-- 边框效果 -->
    <div class="preview-frame">
      <span class="frame-corner top-left"></span>
      <span class="frame-corner top-right"></span>
      <span class="frame-corner bottom-left"></span>
      <span class="frame-corner bottom-right"></span>
    </div>
  </div>
</template>

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

const props = defineProps({
  streamUrl: {
    type: String,
    default: ''
  },
  autoPlay: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['ready', 'error'])

const videoRef = ref(null)
const loading = ref(true)
const hasError = ref(false)

let mediaStream = null

const initCamera = async () => {
  try {
    // 尝试获取本地摄像头用于预览
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      mediaStream = await navigator.mediaDevices.getUserMedia({
        video: {
          width: { ideal: 640 },
          height: { ideal: 480 },
          facingMode: 'user'
        }
      })
      if (videoRef.value) {
        videoRef.value.srcObject = mediaStream
      }
    }
    loading.value = false
    emit('ready')
  } catch (error) {
    console.error('Camera error:', error)
    loading.value = false
    hasError.value = true
    emit('error', error)
  }
}

onMounted(() => {
  if (props.autoPlay) {
    initCamera()
  }
})

onUnmounted(() => {
  if (mediaStream) {
    mediaStream.getTracks().forEach(track => track.stop())
  }
})
</script>

<style scoped>
.camera-preview {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: var(--bg-page);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.preview-loading,
.preview-error,
.preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 14px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.error-icon,
.placeholder-icon {
  width: 48px;
  height: 48px;
  color: var(--text-light);
}

.error-icon svg,
.placeholder-icon svg {
  width: 100%;
  height: 100%;
}

.preview-error {
  color: var(--danger);
}

.preview-error .error-icon {
  color: var(--danger);
}

/* 边框效果 */
.preview-frame {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  pointer-events: none;
}

.frame-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--primary);
  border-style: solid;
}

.frame-corner.top-left {
  top: 0;
  left: 0;
  border-width: 3px 0 0 3px;
  border-radius: 4px 0 0 0;
}

.frame-corner.top-right {
  top: 0;
  right: 0;
  border-width: 3px 3px 0 0;
  border-radius: 0 4px 0 0;
}

.frame-corner.bottom-left {
  bottom: 0;
  left: 0;
  border-width: 0 0 3px 3px;
  border-radius: 0 0 0 4px;
}

.frame-corner.bottom-right {
  bottom: 0;
  right: 0;
  border-width: 0 3px 3px 0;
  border-radius: 0 0 4px 0;
}
</style>
