<template>
  <div class="status-wrapper">
    <div class="status-text">
      <span :class="{'no-login': !isLogin}" v-html="htmlText"></span>
    </div>
    <div class="status-bar-wrapper">
      <div class="line"></div>
      <div class="line-2" :style="{'width': activeWidth}"></div>
      <div class="circle-wrapper">
        <div class="circle">
          <div>
            <span class="score-text">勤奋值</span>
          </div>
          <div v-for="(item, index) in statusTextList" :key="index">
            <span class="circle" :class="{'active': activeNum >= (index + 1)}"></span>
            <span class="score" :class="{'active': activeNum >= (index + 1)}">{{item}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
export default {
  name: 'StatusBar',
  props: {
    minValue: {
      type: Number | String,
      default: 0
    },
    maxValue: {
      type: Number | String,
      default: 300
    },
    statusTextList: {
      type: Array,
      default: () => ['100勤奋分', '200勤奋分', '300勤奋分']
    },
    userMobile: {
      type: String,
      default: ''
    }
  },
  watch: {
    userMobile(n, o) {
      this.isLogin = n ? true : false;
      this.init();
    },
    minValue(n, o) {
      if(n) {
        this.init();
      }
    }
  },
  data() {
    return {
      isLogin: false,
      activeNum: 0,
      activeWidth: '0%',
      htmlText: '登录后完成任务，就能获得瓜分云鹊豆的资格啦！'
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let htmlText = '登录后完成任务，就能获得瓜分云鹊豆的资格啦！';
      if(!this.isLogin) return htmlText;
      let minValue = this.minValue, activeNum = 0, activeWidth; 
      if(minValue < 100 ) {
        htmlText = `还差<span style="color">${100 - minValue}</span>分，就有资格瓜分<span style="color: #FFE8A5">100</span>万云鹊豆啦！`
      } else if(minValue < 200) {
        htmlText = `已经有资格瓜分<span style="color: #FFE8A5">100</span>万云鹊豆啦，继续努力还能瓜分<span style="color: #FFE8A5">200</span>万！`
      } else if(minValue < 300) {
        htmlText = `已经有资格瓜分<span style="color: #FFE8A5">300</span>万云鹊豆啦，继续努力还能瓜分<span style="color: #FFE8A5">200</span>万！`
      } else {
        htmlText = `天啦撸，你有资格瓜分500万云鹊豆哦！`
      }
      activeNum = Math.floor(minValue / 100);
      if(activeNum <= 0) {
        activeNum = 0;
      } else if(activeNum >= 3) {
        activeNum = 3
      }
      this.activeNum = activeNum;
      activeWidth = (this.minValue * 100 / this.maxValue).toFixed(2);
      if(activeWidth >= 100) {
        activeWidth = 100;
      }
      this.activeWidth = activeWidth + '%';
      this.htmlText = htmlText;
    }
  },
}
</script>
<style lang="less" scoped>
  .status-wrapper {
    background: #9A1F36;
    height: 88px;
    .status-text {
      text-align: center;
      font-size: 12px;
      padding: 10px 0 13px;
      color: #fff;
      .no-login {
        color: #FFE8A5
      }
    }
    .status-bar-wrapper {
      position: relative;
      top: 0;
      left: 0;
      width: 90%;
      display: flex;
      flex-direction: column;
      .line {
        width: 100%;
        height: 3px;
        background:rgba(115,15,33,1);
        border-radius: 1.5px;
      }    
      .line-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 30%;
        height: 3px;
        background:linear-gradient(360deg,rgba(255,160,33,1) 0%,rgba(255,232,165,1) 100%);
        border-radius: 1.5px;
      }
      .circle-wrapper {
        position: relative;
        top: -10px;
        left: 0;
        // margin-right: 80px;
        .circle {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          div {
            position: relative;
            top: 0;
            left: 0;
            .circle {
              // position: relative;
              width: 10px;
              height: 10px;
              border: 4px solid #730F21;
              border-radius: 10px;
              background: #9A1F36;
            }
            .score-text {
              display: inline-block;
              width: 60px;
              position: absolute;
              top: 26px;
              left: 0;
              font-size: 12px;
              color: #730F21;
            }
            .score {
              position: absolute;
              top: 23px;
              left: -29px;
              width: 70px;
              height: 20px;
              line-height: 20px;
              font-size: 12px;
              text-align: center;
              // background: linear-gradient(360deg,rgba(255,160,33,1) 0%,rgba(255,232,165,1) 100%);
              border-radius: 10px;
              border: 1px solid rgba(115,15,33,1);
              color: #730F21;
              &.active {
                color: #730F21;   
                background: linear-gradient(360deg,rgba(255,160,33,1) 0%,rgba(255,232,165,1) 100%);
              }
            }
          }
          .circle.active {
            border: 4px solid #FFE8A5;
            // background: rgba(255, 200, 100, 1);
            background: linear-gradient(360deg,rgba(255,160,33,1) 0%,rgba(255,232,165,1) 100%);
          }
        }
      }
    }
  }
</style>