<template>
    <view class="van-progress custom-class" :style="'height: ' + utils.addUnit(strokeWidth) + '; ' + (trackColor ? 'background: ' + trackColor : '')">
        <view class="van-progress__portion" :style="'width: ' + percentage + '%; background: ' + (inactive ? '#cacaca' : color)">
            <view
                v-if="showPivot && getters.text(pivotText, percentage)"
                :style="'color: ' + textColor + '; background: ' + (pivotColor ? pivotColor : inactive ? '#cacaca' : color)"
                class="van-progress__pivot"
            >
                {{ getters.text(pivotText, percentage) }}
            </view>
        </view>
    </view>
</template>
<script module="utils" lang="wxs" src="@/node_modules/@vant/weapp/lib/wxs/utils.wxs"></script>
<script module="getters" lang="wxs" src="@/node_modules/@vant/weapp/lib/progress/index.wxs"></script>
<script>
'use strict';
Object.defineProperty(exports, '__esModule', {
    value: true
});
var component_1 = require('../common/component');
var color_1 = require('../common/color');
component_1.VantComponent({
    props: {
        inactive: Boolean,
        percentage: Number,
        pivotText: String,
        pivotColor: String,
        trackColor: String,
        showPivot: {
            type: Boolean,
            value: true
        },
        color: {
            type: String,
            value: color_1.BLUE
        },
        textColor: {
            type: String,
            value: '#fff'
        },
        strokeWidth: {
            type: null,
            value: 4
        }
    }
});
</script>
<style>
@import './index.css';
</style>
