<template>
    <view class="step-wrap">
        <view
            class="step"
            :class="{
                'step-bg': !!topNavBarHasBg,
            }"
        >
            <view class="progress-text">测试进度</view>
            <!-- 进度条 -->
            <view
                v-if="progress && progress.total"
                class="step-process"
            >
                <view
                    class="step-process-inner"
                    :style="{
                        width: (progress.current / progress.total * 100) + '%',
                        backgroundColor: (progress.progressColor ? progress.progressColor : ''),
                    }"
                />
            </view>
            <view class="pro-detail">
                {{ progress.text }}<span v-if="progress.showTotal">/{{ progress.total }}</span>
            </view>
        </view>
        <view class="c-line-superfine-after"/>
        <view
            :style="{
                height: (progress && progress.total) || topNavBarHasBg > 0 ? '.55rem' : '.38rem',
                display: progress && progress.hideLayer ? 'none' : 'block',
            }"
            class="tips-place"
        />
    </view>
</template>

<script>
/**
* @file 问诊-步骤导航
* @author haoyan
* @categories 业务组件
* @tags [component]
*/

export default {
    config: {
        component: true
    },
    props: {
        /**
         * progress
         */
        progress: {
            'type': Object,
            'default'() {
                return {};
            }
        },
        // 头部是否有背景色
        topNavBarHasBg: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            rate: 100
        };
    },
    components: {
    },
    lifetimes: {
        attached() {
        }
    },
    methods: {
    }
};
</script>

<style lang="less" scoped>
.step-bg {
    background: linear-gradient(134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%);
}
.step-wrap {
    width: 100%;
    background: "#f4f4f4";
}
.step {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
    padding: 0 .17rem;
    box-sizing: border-box;
}
.step-process {
    flex: 1;
    background: rgba(0,200,200,0.20);
    border-radius: 3px;
    height: 6px;
    &-inner {
        background-image: linear-gradient(-45deg, #00D3EA 0%, #00CFA3 100%);
        height: 6px;
        transition: width .5s;
        border-radius: 3px;
    }
}
.pro-detail {
    color: #525252;
    margin-left: .09rem;
}

.tips-place {
    background-color: #F4F4F4;
}

.progress-text {
    font-size: 14px;
    color: #525252;
    letter-spacing: 0;
    margin-right: .12rem;
}

</style>
