<template>
    <div class="status-box">
        <!-- 待生成，灰色 -->
        <div class="box flex-items">
            <div :class="'dot'+strs[num].index"></div>
            <span>{{strs[num].title}}</span>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            num: {
                type: Number,
                default: 0
            },
            strs: {
                type: Array,
                default: () => [
                    { title: '待解析', index: 0 },
                    { title: '解析中', index: 1 },
                    { title: '解析成功，待导入', index: 2 },
                    { title: '解析失败', index: 3 },
                    { title: '成功', index: 4 }
                ]
            }
        },
        data() {
            return {

            }
        },
        computed: {
        },
        mounted() {
        },
        methods: {
        }
    }
</script>
<style scoped lang="less">
    .box {
        color: #333333;
        text-align: left;
    }

    .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 6px;
    }

    .dot0 {
        background-color: gray;
        .dot()
    }

    .dot1 {
        background-color: rgb(24, 144, 255);
        .dot()
    }

    .dot2 {
        background-color: orange;
        .dot()
    }

    .dot3 {
        background-color: red;
        .dot()
    }

    .dot4 {
        background-color: green;
        .dot()
    }
</style>