<script setup lang="ts">
import { ref, watch, computed, nextTick } from 'vue'

const props = defineProps<{
  videoUrl: string | null
}>()

const videoRef = ref<HTMLVideoElement | null>(null)
const playing = ref(false)
const paused = ref(false)

watch(() => props.videoUrl, async (url) => {
  await nextTick()
  if (!videoRef.value || !url) return
  videoRef.value.src = url
  playing.value = false
  paused.value = false
})

function togglePlay() {
  if (!videoRef.value) return
  if (videoRef.value.paused) {
    videoRef.value.play().catch(() => {})
    playing.value = true
  } else {
    videoRef.value.pause()
    playing.value = false
  }
}
</script>

<template>
  <div class="preview-panel">
    <div class="preview-header">预览</div>
    <div class="preview-video" v-if="videoUrl">
      <video ref="videoRef" preload="auto" />
      <div class="preview-controls">
        <button @click="togglePlay">{{ playing ? '暂停' : '播放' }}</button>
      </div>
    </div>
    <div class="preview-empty" v-else>
      <span>选择场景节点以预览视频</span>
    </div>
  </div>
</template>

<style scoped>
.preview-panel {
  width: 320px;
  height: 100%;
  background: #141428;
  border-left: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
}

.preview-header {
  padding: 14px 16px;
  font-size: 14px;
  color: #888;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.preview-video {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preview-video video {
  width: 100%;
  background: #000;
  border-radius: 4px;
}

.preview-controls {
  display: flex;
  justify-content: center;
}

.preview-controls button {
  padding: 6px 20px;
  font-size: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #ddd;
  border-radius: 3px;
  cursor: pointer;
}

.preview-controls button:hover {
  background: rgba(255,255,255,0.15);
}

.preview-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #444;
  font-size: 13px;
}
</style>
