<template>
    <section class="step-one maxw-1200 mx-auto">
        <div class="notice-box flex-items-center gap-10 h-48 px-18 round-8 mb-26">
            <el-icon class="color-main fs-16">
                <InfoFilled />
            </el-icon>
            <span class="fs-12 color-000">
                说明：确认剧集视频后，系统将对原视频进行资产解析，提取主要的人物、场景、道具资产，用于后续替换
            </span>
        </div>

        <div class="flex-between mb-26">
            <h2 class="fs-20 fw-700 color-000">原片剧集</h2>
        </div>

        <div class="flex-between mb-14">
            <div class="flex-items-center gap-16 fs-12 color-536">
                <span class="flex-items-center gap-4">
                    <el-icon>
                        <VideoCamera />
                    </el-icon>
                    全部剧集<span class="color-000 fw-700">{{ episodes.length }}</span>
                </span>
                <span>已上传<span class="color-main fw-700">{{ uploadedCount }}</span></span>
                <span>上传中<span class="color-main fw-700">{{ uploadingCount }}</span></span>
                <span>上传失败<span class="danger-text fw-700">{{ failedCount }}</span></span>
            </div>
            <el-button class="h-32 px-18 fs-12" @click="addEpisode">
                <el-icon>
                    <Plus />
                </el-icon>
                <span>新增视频</span>
            </el-button>
        </div>

        <el-table :data="episodes" class="episode-table w-full" row-key="id">
            <el-table-column label="剧集信息" min-width="420">
                <template #default="{ row }">
                    <div class="flex-items-center gap-12 py-8">
                        <img :src="row.cover" :alt="row.name" class="episode-cover w-48 h-32 round-4 cover" />
                        <div class="flex-col">
                            <span class="fs-14 fw-700 color-000 lh-22">{{ row.name }}</span>
                            <span class="fs-12 color-666 lh-20">{{ row.filename }}</span>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="duration" label="时长" width="150" />
            <el-table-column prop="size" label="大小" width="170" />
            <el-table-column label="状态" width="170">
                <template #default="{ row }">
                    <span class="flex-items-center gap-6 fs-12 color-333">
                        <span class="status-dot wh-8 round" :class="row.status"></span>
                        {{ row.statusText }}*
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="190">
                <template #default>
                    <el-button type="primary" link class="fs-12">重新上传</el-button>
                    <el-button type="danger" link class="fs-12">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="fixed bottom-10 left-0 flex-center w-full">
            <el-button type="primary" class="start-btn h-44 round-140 border-none mt-24" @click="goNext">
                <el-icon>
                    <MagicStick />
                </el-icon>
                <span>进入下一步</span>
                <el-icon>
                    <ArrowRight />
                </el-icon>
            </el-button>
        </div>
    </section>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { ArrowRight, InfoFilled, MagicStick, Plus, VideoCamera } from '@element-plus/icons-vue';
import coverImg from '@/static/image/huaban.png';

type EpisodeStatus = 'done' | 'uploading' | 'failed';

type EpisodeItem = {
    id: string;
    name: string;
    filename: string;
    duration: string;
    size: string;
    status: EpisodeStatus;
    statusText: string;
    cover: string;
};

const emit = defineEmits<{
    (e: 'next'): void;
}>();

const episodes = ref<EpisodeItem[]>([
    {
        id: 'episode-1',
        name: '第 1 集',
        filename: 'r_cde1602bd05a40f9b3d3606dc531df01.mp4',
        duration: '00:15',
        size: '19.44 MB',
        status: 'done',
        statusText: '已完成',
        cover: coverImg,
    },
]);

const uploadedCount = computed(() => episodes.value.filter((item) => item.status === 'done').length);
const uploadingCount = computed(() => episodes.value.filter((item) => item.status === 'uploading').length);
const failedCount = computed(() => episodes.value.filter((item) => item.status === 'failed').length);

const addEpisode = () => {
    episodes.value.push({
        id: `episode-${Date.now()}`,
        name: `第 ${episodes.value.length + 1} 集`,
        filename: 'new_replica_source.mp4',
        duration: '00:00',
        size: '0 MB',
        status: 'uploading',
        statusText: '上传中',
        cover: coverImg,
    });
};

const goNext = () => {
    emit('next');
};
</script>

<style scoped lang="scss">
.step-one {
    width: 1200px;
    margin: 0 auto;
}

.notice-box {
    border: 1px solid #cfd8ff;
    background: #eef1ff;
}

.color-536 {
    color: #536883;
}

.danger-text {
    color: #f5222d;
}

.episode-table {
    border: 1px solid #dce6f2;
    border-bottom: 0;
}

.episode-cover {
    flex: 0 0 48px;
    background: #f3f6fb;
}

.status-dot.done {
    background: #18b66a;
}

.status-dot.uploading {
    background: rgba(var(--main-color), 1);
}

.status-dot.failed {
    background: #f5222d;
}

:deep(.episode-table .el-table__header th) {
    height: 40px;
    font-size: 12px;
    color: #536883;
    font-weight: 500;
    background: #f8fafc;
}

:deep(.episode-table .el-table__cell) {
    border-color: #dce6f2;
}

:deep(.episode-table .el-table__row) {
    height: 62px;
}
</style>
