<template>
    <div
        class="nus_progress"
        @click="_onClick"
        @tap="_onTap">
        <div
            class="nu_rate"
            :style="{ width: contWidth + '%' }">
        </div>
        <span
            class="nu_rate-text">
            {{progress || 0}}%
        </span>
    </div>
</template>
<script>
import WidgetTmp from '../_comm/WidgetTmp';
export default {
    extends: WidgetTmp,
    name: 'NuProgress',
    props: {
        progress: {
            type: Number,
            default: 0
        }
    },
    computed: {
        /**
         * 计算进度的宽度
         * @returns {Number}
         */
        contWidth() {
            let _rate = this.progress;
            if (_rate < 5 && _rate > 0) {
                _rate = 5;
            }
            return _rate || 0;
        }
    }
};
</script>

<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';

.nus_progress{
    position: relative;
    width: 100%;
    overflow: hidden;
    display: inline-block;
    font-size: $nuprogress-fontSize;
    color: $nuprogress-color;
    background: $bgFce;
    border-radius: 20px;
    height:10px;
    // 后代元素
    .nu_rate{
        height: 100%;
        background: $nuprogress-rate-bg-color;
        border-radius: inherit;
    }
    // 后代元素
    .nu_rate-text{
        position: absolute;
        left: 50%;
        top: 50%;
        transform-origin: 50% 50%;
        transform: translate(-50%,-50%) scale(0.5);
        line-height: 1;
    }
}
</style>
