<!-- 重绘源视频面板，负责源视频选择、上传状态和预览展示。 -->
<script setup lang="ts">
import { Upload, VideoCamera } from "@element-plus/icons-vue";
import type { RedrawSource } from "@/api/creative";
import VideoPlayer from "@/components/creative/VideoPlayer.vue";

defineProps<{ source?: RedrawSource; uploading?: boolean; dragging?: boolean }>();
const emit = defineEmits<{ upload: [file: File] }>();

/** 读取用户选择的源视频并通知父组件上传。 */
function choose(event: Event) {
  const input = event.target as HTMLInputElement;
  const file = input.files?.[0];
  input.value = "";
  if (file) emit("upload", file);
}
</script>

<template>
  <section
    class="redraw-column source-column"
    :class="{ dragging }"
  >
    <header><strong>原视频上传</strong></header>
    <div class="source-body">
      <VideoPlayer
        v-if="source?.source_video_url"
        :src="source.source_video_url"
        :media-id="source.source_video_asset_id"
        aspect-ratio="9:16"
        transparent-controls
      />
      <label
        v-else
        class="source-empty"
      >
        <input
          type="file"
          accept="video/mp4,video/webm,video/quicktime,video/x-m4v,.mp4,.webm,.mov,.m4v"
          :disabled="uploading"
          @change="choose"
        />
        <el-icon><VideoCamera /></el-icon>
        <strong>{{ uploading ? "正在上传" : "上传原视频" }}</strong>
        <span>支持 MP4、WebM、MOV、M4V</span>
        <span>最大 50MB，时长不超过 3 分钟</span>
      </label>
      <label
        v-if="source?.source_video_url"
        class="replace-video"
      >
        <input
          type="file"
          accept="video/mp4,video/webm,video/quicktime,video/x-m4v,.mp4,.webm,.mov,.m4v"
          :disabled="uploading"
          @change="choose"
        />
        <el-button
          :icon="Upload"
          :loading="uploading"
          >重新上传</el-button
        >
      </label>
    </div>
  </section>
</template>

<style scoped lang="scss">
.source-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.source-column.dragging {
  border-color: var(--web-upload-hover-line);
  background: var(--web-surface);
}
.source-body {
  min-height: 0;
  padding: 12px;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
}
.source-body :deep(.video-player) {
  min-height: 0;
  flex: 1;
}
.source-empty {
  min-height: 320px;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--web-text-tertiary);
  background: var(--web-surface-soft);
  border: 1px dashed var(--web-line-strong);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
}
.source-empty input,
.replace-video input {
  display: none;
}
.source-empty .el-icon {
  color: var(--web-accent-dark);
  font-size: 36px;
}
.source-empty strong {
  color: var(--web-text);
  font-size: 16px;
}
.source-empty span {
  font-size: 12px;
}
.replace-video {
  display: block;
}
.replace-video .el-button {
  width: 100%;
}
</style>
