<!-- 输出历史对话框，负责展示、选择和恢复历史生成结果。 -->
<script setup lang="ts">
import type { GenerationOutput } from "@/api/creative";
import LoadingMedia from "@/components/creative/LoadingMedia.vue";
import { formatDateTime } from "@/utils/datetime";

defineProps<{ modelValue: boolean; outputs: GenerationOutput[]; loading?: boolean; activatingId?: string }>();
const emit = defineEmits<{
  "update:modelValue": [value: boolean];
  activate: [output: GenerationOutput];
  delete: [output: GenerationOutput];
}>();
</script>
<template>
  <el-dialog
    :model-value="modelValue"
    title="分镜历史视频"
    width="min(900px, calc(100vw - 28px))"
    class="web-dialog creative-dialog"
    @close="emit('update:modelValue', false)"
  >
    <div
      v-loading="loading"
      class="output-grid"
    >
      <article
        v-for="output in outputs"
        :key="output.id"
      >
        <LoadingMedia
          type="video"
          :src="output.public_url"
          controls
          preload="metadata"
        />
        <div class="output-meta">
          <span>{{ formatDateTime(output.created_at) }}</span
          ><strong>{{ Number(output.actual_points || output.estimated_points || 0).toFixed(2) }} 积分</strong>
        </div>
        <div class="history-actions">
          <el-button
            :type="output.active ? 'success' : 'default'"
            :disabled="output.active"
            :loading="activatingId === output.id"
            @click="emit('activate', output)"
            >{{ output.active ? "当前使用" : "设为当前结果" }}</el-button
          ><el-button
            type="danger"
            plain
            :disabled="output.active"
            @click="emit('delete', output)"
            >删除</el-button
          >
        </div>
      </article>
      <div
        v-if="!outputs.length && !loading"
        class="output-empty"
      >
        当前分镜还没有已完成的视频结果。
      </div>
    </div>
  </el-dialog>
</template>
<style scoped lang="scss">
.output-grid {
  min-height: 180px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.output-grid article {
  position: relative;
  padding: 10px;
  background: var(--web-surface-soft);
  border: 1px solid var(--web-line-strong);
  border-radius: 8px;
}
.output-grid video,
.output-grid :deep(.loading-media-element) {
  width: 100%;
  height: 250px;
  object-fit: contain;
  background: var(--web-surface-soft);
  border-radius: 5px;
}
.output-meta {
  margin: 9px 0;
  display: flex;
  justify-content: space-between;
  color: var(--web-text-subtle);
  font-size: 11px;
}
.output-meta strong {
  color: var(--web-accent-dark);
}
.history-actions {
  display: grid;
  grid-template-columns: 1fr 70px;
  gap: 8px;
}
.history-actions .el-button {
  width: 100%;
}
.output-empty {
  grid-column: 1/-1;
  display: grid;
  place-items: center;
  color: var(--web-text-tertiary);
}
@media (max-width: 660px) {
  .output-grid {
    grid-template-columns: 1fr;
  }
  .output-grid video,
  .output-grid :deep(.loading-media-element) {
    height: 220px;
  }
}
</style>
