<template>
  <transition :name="isShow ? 'evluatbox':''">
    <div class="top-evaluat"  v-if="isShow">
      <div class="evaluat-info">
        <span class="evaluat-icon">
          <img src='../../images/552064153@2x.png'/>
        </span>
        <span class="evaluat-persent">您的学习速度战胜了本院内{{setStyle(parmObj.gradePKToHospital)}}%的医生</span>
      </div>
      <div class="evaluat-part">
        <span class="part-throw"><img src='../../images/grey-throw.png'/></span>
        <div class="part-item part-finish">
          <div class="item-num">
            <span class="fs16">{{parmObj.courseOverNumOfSelf}}</span><span class="fs15">/</span><span class="fs14">{{parmObj.courseOverNumOfHospital}}</span>
          </div>
          <div class="item-persent">
            <span :style="'width:'+setStyle(parmObj.courseOverNumOfSelf/parmObj.courseOverNumOfHospital)+'%'"></span>
          </div>
          <div class="item-txt">已完成课程</div>
        </div>
        <div class="part-item part-pass">
          <div class="item-num">
            <span class="fs16">{{parmObj.examOverNumOfSelf}}</span><span class="fs15">/</span><span class="fs14">{{parmObj.examOverNumOfHospital}}</span>
          </div>
          <div class="item-persent">
            <span :style="'width:'+setStyle(parmObj.examOverNumOfSelf/parmObj.examOverNumOfHospital)+'%'"></span>
          </div>
          <div class="item-txt">已通过考试</div>
        </div>
        <div class="part-item part-get">
          <div class="item-num">
            <span class="fs16">{{parmObj.certificateAcquireNumOfSelf}}</span><span class="fs15">/</span><span class="fs14">{{parmObj.certificateAcquireNumOfHospital}}</span>
          </div>
          <div class="item-persent">
            <span :style="'width:'+setStyle(parmObj.certificateAcquireNumOfSelf/parmObj.certificateAcquireNumOfHospital)+'%'"></span>
          </div>
          <div class="item-txt">已获得证书</div>
        </div>
      </div>
      <div class="push-up" @click="toggleFun">
        <img src='../../images/push.png'/>
        <span>收起</span>

      </div>

    </div>
  </transition>
</template>

<script>
export default {
  props: {
    isShowEvluat:{
      default:false,
      type:Boolean

    }
  },
  data () {
    return {
      isShow:false,
      parmObj:{}
      //mockUrl:'http://sosoapi.yunqueyi.com/sosoapi-web/pass/mock/39/'
    }
  },
  mounted(){
    
    this.getData();
  },
  methods: {
    setStyle:function(num){
      var str = '';
      if(num == NaN){
        return 0
      }
      num = num*100 + '';
      if(num.indexOf(".")>-1){
        num = num + '';
        str = num.substring(0,num.indexOf(".") + 3);
      }else{
        str = num;
      }
      
      return str;

    },
    getData:function(){
      let _this = this, para = {
          sysCode: 27, 
          token: _this.token,
          setEntry: 'headers'
      }
      this.GET('contents/gp/v1/homepage', para).then(res => {
          if(res.code == '000000'){

            _this.parmObj = res.data || {};
            _this.isShow =  _this.parmObj.showFlag;
            let isPullIndex = _this.isShow ? '1' : '2';
            _this.$emit('evluatFun',{isPull:isPullIndex});
          }
      })
    },

    toggleFun:function(){
      
      this.$emit('evluatFun',{isPull:'0'});
      this.isShow = !this.isShow;
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
 .evluatbox-leave-active,.evluatbox-enter-active{
      transition:  all 1s ease; 
  }
  .evluatbox-leave-active,.evluatbox-enter{
      height:0px !important;
  }
  .evluatbox-leave,.evluatbox-enter-active{
      height: px2rem(225px);
  }
  .top-evaluat{
    animation: myfirst 1.2s;
  }
  @keyframes myfirst
  {
    from {height: 0;}
    to {height:px2rem(225px)}
  }

  .top-evaluat{
    position: fixed;
    z-index: 105;
    left: 0;
    top:0;
    width: 100%;
    height: px2rem(225px);
    overflow:hidden;
    @include bis('../../images/evaluatBg.png');
    padding:0 px2rem(10px);
    .evaluat-info{
      margin-top: px2rem(33px);
      .evaluat-icon{
        height: px2rem(26px);
        width: px2rem(26px);
        border-radius: 50%;
        background: #D7E0EC;
        display: inline-block;
        vertical-align: middle;
        img{
          margin-top:px2rem(3px);
          height: px2rem(23px);
          width: px2rem(26px);
          display: inline-block;
          border-radius: 50%;
        }
      }
      
      .evaluat-persent{
        font-size: px2rem(13px);
        color:#AA813B;
      }
    }
    .push-up{
      text-align: center;
      height: px2rem(14px);
      line-height: px2rem(14px);
      margin-top:px2rem(23px);
      span{
         color: #A8997F;
         font-size: px2rem(12px);
         display: inline-block;
      }
     
      img{
        width: px2rem(11px);
        height: px2rem(11px);
        display: inline-block;
      }
    }

    .evaluat-part{
      background: #fff;
      border:px2rem(1px) solid RGBA(179, 139, 72, 0.45);
      border-radius: px2rem(3px);
      padding:px2rem(14px) 0 px2rem(14px) px2rem(14px);
      margin-top: px2rem(15px);
      position: relative;
      .part-throw{
        position: absolute;
        display: inline-block;
        width:  px2rem(16px);
        height:  px2rem(16px);
        top:50%;
        right:  px2rem(7px);;
        margin-top: -(px2rem(8px));
        img{
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .part-item{
        width:px2rem(84px);
        display: inline-block;
        margin-right: px2rem(20px);
        .item-num{
          font-size: px2rem(16px);
          font-weight: bold;
          .fs16{
            font-size: 16px;
            
          }
          .fs15{
            font-size: 15px;
           
          }
          .fs14{
            font-size: 14px;
            
          }
        }
        
        .item-txt{
          padding-top:px2rem(10px);
          font-size: px2rem(13px);
          color: #888
        }
      }
      .part-get{
        margin:0;
      }
      .part-finish .item-num{
        .fs16{
           
            color: RGBA(74, 135, 212, 1)
          }
          .fs15{
           
            color: RGBA(74, 135, 212, 1)
          }
          .fs14{
            
            color: RGBA(74, 135, 212, 0.6)
          }
      }
      .part-pass .item-num{
         .fs16{
            
            color: #449284
          }
          .fs15{
           
           color: #449284
          }
          .fs14{
           
            color: RGBA(68, 146, 132, 0.6)
          }
      }
      .part-get .item-num{
         .fs16{
           
            color: #CAA861
          }
          .fs15{
           
           color: #CAA861
          }
          .fs14{
            
            color: RGBA(202, 168, 97, 0.6)
          }
      }
     .part-item .item-persent{
          width: px2rem(84px);
          height: px2rem(7px);
          margin-top: px2rem(6px);
          border: 1px solid #5890DD;
          border-radius: px2rem(4px);
          position: relative;
          span{
            position: absolute;
            top:-(px2rem(1px));
            left: 0;
            width:0;
            display: inline-block;
            background: -webkit-linear-gradient(left, #8FC1E6, #5890DD); 
            background: -o-linear-gradient(right, #8FC1E6, #5890DD); 
            background: -moz-linear-gradient(right, #8FC1E6, #5890DD);
            background: linear-gradient(to right, #8FC1E6, #5890DD); 
            height: px2rem(7px);
            border-radius: px2rem(4px);
            box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(103, 153, 217, 0.3);
          }
        }
       .part-pass .item-persent{
          border-color: #449284;
          span{
            
            background: -webkit-linear-gradient(left, #8DC5BB, #449284); 
            background: -o-linear-gradient(right, #8DC5BB, #449284); 
            background: -moz-linear-gradient(right,#8DC5BB, #449284);
            background: linear-gradient(to right, #8DC5BB, #449284); 
            box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(94, 136, 128, 0.3);
          }
        }
       .part-get .item-persent{
          border-color: #CAA861;
          span{
            
            background: -webkit-linear-gradient(left, #F6DDA9,#CCAB65); 
            background: -o-linear-gradient(right, #F6DDA9,#CCAB65); 
            background: -moz-linear-gradient(right,#F6DDA9,#CCAB65);
            background: linear-gradient(to right, #F6DDA9,#CCAB65); 
          
            box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(207, 174, 106, 0.3);
          }
        }

    }

  }
</style>
