<template>
    <div class="replica-page vh100 flex-col bgmr hidden">
        <header class="replica-header flex-between bg-fff px-28">
            <div class="project-info flex-items-center gap-14">
                <el-icon class="fs-18 color-333 pointer" @click="goBack">
                    <Back />
                </el-icon>
                <div>
                    <div class="flex-items-center gap-8">
                        <span class="fs-14 fw-700 color-000">新项目</span>
                        <el-icon class="fs-14 color-888 pointer">
                            <Edit />
                        </el-icon>
                    </div>
                    <div class="flex-items-center gap-12 fs-12 color-666">
                        <span class="flex-items-center gap-4">
                            <span class="ratio-icon wide"></span>
                            16:9
                        </span>
                        <span class="divider"></span>
                        <span>720p</span>
                        <span class="divider"></span>
                        <span class="flex-items-center gap-4">
                            <img :src="styleImg" alt="现代都市通用" class="style-thumb wh-16 round-4 cover" />
                            现代都市通用
                        </span>
                        <span class="divider"></span>
                        <span>目标语言：中文</span>
                    </div>
                </div>
            </div>

            <div class="step-nav flex-1 flex-center">
                <template v-for="(item, index) in steps" :key="item.stepn">
                    <div class="step-item flex-col flex-center pointer" :class="{
                        active: item.stepn === selectStep,
                        disabled: item.stepn > currentStep,
                    }" @click="lookStep(item)">
                        <div class="step-icon flex-center h-34 w-60 round-100">
                            <el-icon class="fs-16">
                                <component :is="item.icon" />
                            </el-icon>
                            <span class="fs-12 lh-20 fw-700">{{ item.name }}</span>
                        </div>
                    </div>
                    <div v-if="index < steps.length - 1" class="step-line w-28"></div>
                </template>
            </div>

            <div class="point-box flex-items-center gap-12 h-34 px-14 round-8">
                <span class="flex-items-center gap-4 color-main fs-12 fw-700">
                    <el-icon>
                        <MagicStick />
                    </el-icon>
                    5,010
                </span>
                <span class="flex-items-center gap-4 fs-12 color-666">
                    <el-icon>
                        <Clock />
                    </el-icon>
                    265小时13分9秒
                </span>
                <el-icon class="fs-12 color-888">
                    <InfoFilled />
                </el-icon>
            </div>
        </header>

        <main class="flex-1 over-y-auto hide-scroll">
            <Step1 v-if="selectStep === 1" @next="goStep(2)" />
            <Step2 v-else-if="selectStep === 2" @next="goStep(3)" />
            <Step3 v-else-if="selectStep === 3" />
            <Step4 v-else />
        </main>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Back, Clock, Document, Edit, Files, InfoFilled, MagicStick, Setting, VideoCamera } from '@element-plus/icons-vue';
import Step1 from './components/Step-1.vue';
import Step2 from './components/Step-2.vue';
import Step3 from './components/Step-3.vue';
import Step4 from './components/Step-4.vue';
import styleImg from '@/static/image/meinv.png';

type StepItem = {
    name: string;
    icon: typeof VideoCamera;
    stepn: number;
};

const router = useRouter();
const currentStep = ref(1);
const selectStep = ref(1);
const steps: StepItem[] = [
    { name: '原片', icon: VideoCamera, stepn: 1 },
    { name: '设定', icon: Setting, stepn: 2 },
    { name: '分镜', icon: Files, stepn: 3 },
    { name: '视频', icon: Document, stepn: 4 },
];

const goBack = () => {
    router.push('/burst');
};

const lookStep = (item: StepItem) => {
    if (currentStep.value < item.stepn) {
        return;
    }
    selectStep.value = item.stepn;
};

const goStep = (step: number) => {
    currentStep.value = Math.max(currentStep.value, step);
    selectStep.value = step;
};
</script>

<style scoped lang="scss">
.replica-header {
    flex: 0 0 60px;
    border-bottom: 1px solid #dce6f2;
}

.divider {
    width: 1px;
    height: 12px;
    background: #dce6f2;
}

.ratio-icon {
    display: inline-block;
    width: 14px;
    height: 8px;
    border: 1px solid #536883;
    border-radius: 2px;
}

.step-item {
    color: #b8c1d2;

    &.active {
        color: rgba(var(--main-color), 1);

        .step-icon {
            border-color: rgba(var(--main-color), 1);
            background: rgba(var(--main-color), .06);
        }
    }

    &.disabled {
        cursor: not-allowed;
    }
}

.step-icon {
    border: 1px solid #edf2f7;
    background: #f8fafc;
}

.step-line {
    height: 1px;
    margin: 0 8px 0px;
    background: #dce6f2;
}

.point-box {
    justify-content: flex-end;
    background: #f8fafc;
}
</style>
