<template>
  <div>
    <div class="common-progress" :class="{'common-progress2':needTextFlag}">
      <div v-if="percent < 30" class="common-progress-bg1" :style="'width:' + percent + '%'" ></div>
      <div v-else-if="percent >= 30 && percent < 60" class="common-progress-bg2" :style="'width:' + percent + '%'" ></div>
      <div v-else-if="percent >= 60 && percent < 90" class="common-progress-bg3" :style="'width:' + percent + '%'" ></div>
      <div v-else-if="percent >= 90 && percent < 100" class="common-progress-bg4" :style="'width:' + percent + '%'" ></div>
      <div v-if="needTextFlag === '1'" class="common-progress-text">{{percent+ '%'}}</div>
      <div v-if="needTextFlag === '2'" class="common-progress-text">{{needText}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['percent', 'needTextFlag', 'needText']
};
</script>
<style scoped>
  .common-progress {
    width:100%; height: 4px;
    background-color: #ccc;
    position: relative;
  }
  .common-progress2 {
    height: 22px;
  }
  .common-progress-bg1 {
    position: absolute; top: 0; left: 0; z-index: 1;
    height: 100%;
    background-color: #ff474e;
  }
  .common-progress-bg2 {
    position: absolute; top: 0; left: 0; z-index: 1;
    height: 100%;
    background-color: #ff7326;
  }
  .common-progress-bg3 {
    position: absolute; top: 0; left: 0; z-index: 1;
    height: 100%;
    background-color: #fad932;
  }
  .common-progress-bg4 {
    position: absolute; top: 0; left: 0; z-index: 1;
    height: 100%;
    background-color: #4086ff;
  }
  .common-progress-text {
    position: absolute; top: 0; left: 0; z-index: 2;
    width: 100%; height: 22px; line-height: 22px; vertical-align: middle;
    color: #fff; text-align: center;
  }
</style>
