<template>
    <div class="steps">
        <div
            class="step-item"
            :class="{ step: index !== 0, active: index === active, complete: index < active }"
            v-for="(item, index) in list"
            :key="index"
        >
            <el-icon v-show="index < active" class="icon"><CircleCheck /></el-icon>
            {{ item }}
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    active: {
        type: Number,
        defalut: 0,
        required: true,
    },
});
const list = ["选择农事类型", "新增处方"];
</script>

<style lang="scss" scoped>
.steps {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    border-radius: 8px;
    display: flex;
    .step-item {
        flex: 1;
        color: #1D1D1D;
        padding: 8px;
        font-size: 12px;
        width: 109px;
        box-sizing: border-box;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("@/assets/images/components/steps-bg.png") no-repeat center center / 100% 100%;
        .icon{
            font-weight: bold;
            font-size: 14px;
            margin-right: 4px;
        }
        &.step {
            color: #727272;
            background: url("@/assets/images/components/step-item.png") no-repeat center center / 100% 100%;
            &.active {
                color: #1D1D1D;
                background: url("@/assets/images/components/step-item-act.png") no-repeat center center / 100% 100%;
            }
        }
        &.complete {
            color: #FFD489;
            background: url("@/assets/images/components/step-item-ok.png") no-repeat center center / 100% 100%;
        }
    }
}
</style>
