<template>
    <div class="p-6 w-30 h-30 rounded-full flex items-center justify-center" :class="iconStatus">
        <img class="w-19 " v-if="type === 0" src="@/assets/images/account-status-1.png" alt="">
        <img class="w-19 " v-if="type === 1" src="@/assets/images/account-status-2.png" alt="">
        <img class="w-17 " v-if="type === 2" src="@/assets/images/account-status-3.png" alt="">
    </div>
</template>
<script lang="ts" setup>
defineOptions({
    name: 'stepIcon'
})

const props = defineProps({
    type: {
        type: Number,
        default: 0
    },
    currentStep: {
        type: Number,
        default: 0
    }
})
const {type, currentStep} = toRefs(props)
const iconStatus = computed(() => {
    if (currentStep.value > type.value) {
        // 已完成
        return 'bg-666'
    } else if (currentStep.value === type.value) {
        // 当前状态
        return 'bg-00B386 w-40 h-40 ml--5'
    } else {
        return 'bg-ccc'
    }
})
</script>
<style scoped lang="less">
.bg-666{
    background-color: #666;
}
.bg-ccc{
    background-color: #ccc;
}
.bg-00B386{
    background-color: #00B386;
}
</style>