<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/dist/wxs/utils.wxs"></script>
<script module="getters" lang="wxs" src="@/node_modules/@vant/weapp/dist/progress/index.wxs"></script>
<script>
import { VantComponent } from '../common/component';
import { BLUE } from '../common/color';
export default {
    data() {
        return {};
    },
    props: {
        inactive: Boolean,
        percentage: Number,
        pivotText: String,
        pivotColor: String,
        trackColor: String,
        showPivot: {
            type: Boolean,
            default: true
        },
        color: {
            type: String,
            default: BLUE
        },
        textColor: {
            type: String,
            default: '#fff'
        },
        strokeWidth: {
            type: null,
            default: 4
        }
    }
};
</script>
<style>
@import './index.css';
</style>
