<template>
    <div :class="bem()">
        <div :class="bem('bar')">
            <i :class="bem('bar-flag')" :style="{ width: value + '%' }"/>
        </div>
        <div :class="bem('info')">
            <em>{{value.toFixed(2)}}</em><span>%</span>
        </div>
    </div>
</template>
<script>
import { createComponentName, componentMixin } from '../_utils/component';

export default {
    name: createComponentName('progress'),
    mixins: [componentMixin],
    props: {
        value: {
            type: Number,
            default: 0,
        },
    },
};
</script>
<style lang="less">
@import '../_styles/base.less';

.@{progress} {
    position: relative;

    &__bar{
        background: #dce4ff;
        border-radius: 4px;
        height: 4px;
        width: 100%;
        position: relative;
    }
    &__bar-flag{
        background-color: #005cf9;
        border-radius: 4px;
        height: 100%;
        width: 1%;
        position: absolute;
        left: 0;
        top: 0;

        transition: width ease .2s;
    }

    &__info{
        display: none;
    }
}
</style>
