<template>
     <div class="mdt-steps">
            <div class="mdt-step" v-for="(item, index) in arr" :key="index" :class="{'is-finished': step > index}">
                <div class="mdt-step-head">
                    <span class="dot"></span>
                    <!-- <div class="line" v-if="index < (arr.length - 1)" :class="{'line-center': item.lineText == '会议中'}">{{item.lineText}}</div> -->
                    <div class="line" v-if="index < (arr.length - 1)">{{item.lineText}}</div>
                </div>
                <div class="mdt-step-main">
                    {{item.name}}
                </div>
            </div>
        </div>
</template>
<script>
export default {
    props: {
        step: {
            type: [String, Number],
            default: 0
        }
    },
    data () {
        return {
            arr: [{
                name: '召集会议',
                lineText: '会议前'
            }, {
                name: '准备会议',
                lineText: ''
            }, {
                name: '进入会议',
                lineText: '会议中'
            }, {
                name: '结束会议',
                lineText: ''
            }, {
                name: '填写小结',
                lineText: '会议后'
            }, {
                name: '归档小结',
                lineText: ''
            }]
        }
    }
}
</script>
<style lang="less" scoped>
.mdt-steps {
    display: flex;
    justify-content: center;
    height: 72px;
    background: #ffffff;
    border-radius: 2px;
    align-items: center;
    margin-bottom: 12px;
    .mdt-step {
        padding-top: 10px;
        width: 120px;
        text-align: center;
        cursor: default;
    }
    .mdt-step.is-finished {
        .dot {
            opacity: 1;
        }
        .line {
             border-bottom: 1px solid #1890ff;
        }
        .line-center {
            border-bottom: 1px solid rgba(0,0,0,0.15);
        }
        .mdt-step-main {
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            text-align: center;
            color: #262626;
        }
    }
    .mdt-step-head {
        position: relative;
        padding-right: 5px;
        .dot {
            display: inline-block;
            width: 6px;
            height: 6px;
            background-color: #1890FF;
            border-radius: 50%;
            opacity: 0.3;
        }
        .line {
            flex: 1;
            margin-left: 7px;
            width: 100px;
            height: 12px;
            line-height: 0;
            border-bottom: 1px solid rgba(0,0,0,0.15);
            position: absolute;
            left: 51%;
            top: 2px;
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Regular;
            text-align: center;
            color: #262626;
        }
    }
    .mdt-step-main {
        color: rgba(0,0,0,0.45);
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
    }
}
</style>
