<template>
    <div class="vh100 hidden flex-col">
        <div class="flex-center bg-fff py-10">
            <div class="flex-center gap-10 mr-100 bg-eee round-100 p-4">
                <div v-for="(item, index) in steps" :key="index" class="flex-items-center gap-10 default"
                    :class="{ finish: item.stepn < currentStep, active: item.stepn === currentStep, select: selectStep === item.stepn }"
                    @click="lookStep(item)">
                    <div class="flex-items-center px-10 py-2 gap-6 round-100 fs-12 pointer color-888 name">
                        <el-icon>
                            <component :is="item.icon" />
                        </el-icon>
                        <span>{{ item.name }}</span>
                    </div>
                    <div v-if="index < steps.length - 1" class="w-30 h-2 line"></div>
                </div>
            </div>
        </div>
        <div class="flex-1 p-20 hidden">
            <Step1 v-if="selectStep === 1" />
            <!-- <div class="bg-fff h-full over-y-auto round-12">
                <div v-for="value in 100">发的发生大是</div>
            </div> -->
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Edit } 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';


const title = ref('商品分析信息')
const currentStep = ref(4)
const selectStep = ref(1)
const steps = ref([
    { name: '原片', icon: Edit, stepn: 1, desc: '商品分析信息' },
    { name: '设定', icon: Edit, stepn: 2, desc: '创意与分镜' },
    { name: '分镜', icon: Edit, stepn: 3, desc: '视频预览' },
    { name: '视频', icon: Edit, stepn: 4, desc: '视频成片' },
])

const lookStep = (item: any) => {
    if (currentStep.value < item.stepn) return
    selectStep.value = item.stepn
    title.value = item.desc
}
</script>

<style scoped lang="scss">
.default {
    .name {
        &:hover {
            background-color: #eee;
        }
    }

    .line {
        background: #ddd;
    }

    &.finish {
        .name {
            color: #01b95d;
        }
    }

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

    &.select {
        .name {
            color: #fff;
            background-color: rgba(var(--main-color), 1);
        }
    }
}
</style>