<template>
  <div class="p-4 bg-white rounded-lg shadow-md min-h-[500px]">
    <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-2">
      TidySlide 任务结果预览 (ID: {{ taskId }})
    </h2>

    <div v-if="loading" class="flex justify-center items-center h-64">
      <el-icon class="is-loading text-4xl text-blue-500"><Loading /></el-icon>
      <span class="ml-2 text-gray-500">加载中...</span>
    </div>

    <div v-else-if="taskResult" class="space-y-6">
      <!-- 基本信息卡片 -->
      <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="flex items-center">
            <span class="font-bold text-gray-600 w-24">任务ID:</span>
            <span class="text-gray-800">{{ taskResult.videoTaskId }}</span>
          </div>
          <div class="flex items-center">
            <span class="font-bold text-gray-600 w-24">VOD VideoId:</span>
            <span class="font-mono text-blue-600 bg-blue-50 px-2 py-1 rounded">{{ taskResult.videoId }}</span>
          </div>
          <div class="flex items-center">
            <span class="font-bold text-gray-600 w-24">创建时间:</span>
            <span class="text-gray-800">{{ formatDate(taskResult.createTime) }}</span>
          </div>
          <div class="flex items-center">
            <span class="font-bold text-gray-600 w-24">媒体地址:</span>
            <span v-if="taskResult.mediaUrl" class="text-gray-800 truncate max-w-xs" :title="taskResult.mediaUrl">{{ taskResult.mediaUrl }}</span>
            <span v-else class="text-gray-400 italic">暂无播放地址</span>
          </div>
        </div>
      </div>

      <!-- 播放器区域 (如果有播放地址) -->
      <div v-if="taskResult.mediaUrl" class="mt-6">
        <h3 class="text-lg font-semibold mb-3 text-gray-700">视频预览</h3>
        <div class="aspect-w-16 aspect-h-9 bg-black rounded-lg overflow-hidden shadow-lg">
          <video 
            controls 
            class="w-full h-full object-contain"
            :src="taskResult.mediaUrl"
          >
            您的浏览器不支持 HTML5 视频。
          </video>
        </div>
      </div>
      
      <div v-else class="mt-6 p-8 text-center bg-yellow-50 rounded-lg border border-yellow-100">
        <el-icon class="text-yellow-500 text-3xl mb-2"><Warning /></el-icon>
        <p class="text-yellow-700">
          该视频已上传至 VOD，但尚未生成播放地址。<br/>
          请前往阿里云 VOD 控制台查看 VideoId: <strong>{{ taskResult.videoId }}</strong>
        </p>
      </div>
    </div>

    <div v-else class="flex flex-col justify-center items-center h-64 text-gray-400">
      <el-icon class="text-5xl mb-4"><DocumentDelete /></el-icon>
      <span>未找到相关任务结果</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { ShowTidySlideTaskInfo } from "@/api/videoTask";
import { message } from "@/utils/message";
import { isEmpty } from "@pureadmin/utils";
import { Loading, Warning, DocumentDelete } from "@element-plus/icons-vue";

defineOptions({
  name: "showTidySlideTask",
});

const route = useRoute();
const loading = ref(false);
const taskId = ref("");
const taskResult = ref<any>(null);

function formatDate(dateString: string) {
  if (!dateString) return "-";
  return new Date(dateString).toLocaleString();
}

onMounted(async () => {
  const data = isEmpty(route.params) ? route.query : route.params;
  
  if (isEmpty(data.id) || data.id == null) {
    message("无效的任务ID", { type: "warning" });
    return;
  }

  taskId.value = data.id.toString();
  loading.value = true;

  try {
    const res = await ShowTidySlideTaskInfo(taskId.value);
    if (res) {
      taskResult.value = res;
    } else {
      message("未找到任务结果数据", { type: "info" });
    }
  } catch (error) {
    console.error(error);
    message("获取任务结果失败", { type: "error" });
  } finally {
    loading.value = false;
  }
});
</script>

<style scoped>
/* 使用 Tailwind CSS 类，无需额外样式 */
</style>
