text: import { VantComponent } from '../common/component';
  import { BLUE } from '../common/color';
  VantComponent({
      props: {
          inactive: Boolean,
          percentage: Number,
          pivotText: String,
          pivotColor: String,
          showPivot: {
              type: Boolean,
              value: true
          },
          color: {
              type: String,
              value: BLUE
          },
          textColor: {
              type: String,
              value: '#fff'
          }
      },
      data: {
          pivotWidth: 0,
          progressWidth: 0
      },
      watch: {
          pivotText: 'getWidth',
          showPivot: 'getWidth'
      },
      computed: {
          portionStyle() {
              const width = (this.data.progressWidth - this.data.pivotWidth) * this.data.percentage / 100 + 'px';
              const background = this.getCurrentColor();
              return `width: ${width}; background: ${background}; `;
          },
          pivotStyle() {
              const color = this.data.textColor;
              const background = this.data.pivotColor || this.getCurrentColor();
              return `color: ${color}; background: ${background}`;
          },
          text() {
              return this.data.pivotText || this.data.percentage + '%';
          }
      },
      mounted() {
          this.getWidth();
      },
      methods: {
          getCurrentColor() {
              return this.data.inactive ? '#cacaca' : this.data.color;
          },
          getWidth() {
              this.getRect('.van-progress').then(rect => {
                  this.set({
                      progressWidth: rect.width
                  });
              });
              this.getRect('.van-progress__pivot').then(rect => {
                  this.set({
                      pivotWidth: rect.width || 0
                  });
              });
          }
      }
  });
  