<template>
   <div>
       <Myheader></Myheader>
        <div class="rc-header">
                 <div class="rc-main">
                    
                 <div class="rc-center" >
                   <van-swipe @change="onChange">
  <van-swipe-item v-for="(banner, index) in banners" :key="index">
    <img :src="banner.src"  class="useraimg"/>
  </van-swipe-item>
</van-swipe>
      <!-- <img :src='userimage' /> -->
      </div>
            <div class="rc-order">
                 <span>当前等级：{{userorder}}</span>
            </div>
                 <div class="rc-cordd">
        <span>距离升级还差:{{ rcvalue }} </span>
        <div class="block">
          <div class="r-block" ref="userblock"></div>
      
          <!-- <el-slider v-model="value" range show-stops :max="10"> </el-slider> -->
           

        </div>
           <div class="rc-value">
                 <span>新手铲屎官</span>
                 <span>资深铲屎官</span>
                 <span>金牌铲屎官</span>
          </div>
      </div>

      <div class="usermember" v-for="(item,index) in newlist" :key="index">
          <div class="rc-image">
         <img :src="item.catimage" alt="" />
         </div>
         <div class="rc-userorder">
        <em>{{item.title}}</em>
          <span>{{item.usereat}}</span>
          </div>
      </div>
      </div>
        </div>
  
   </div>

</template>

<script>
import Myheader from '~/components/header.vue' 
export default {
data(){
  
    return{
              banners:[
                {src:require("../../assets/image/rc-new.png"),link:""},
                {src:require("../../assets/image/rc-new1.png"),link:""},
                {src:require("../../assets/image/rc-new2.png"),link:""},
            ],
          userid:null,
          userimage:require("../../assets/image/rc-new.png"),
          userorder:'新手铲屎官',
          rcvalue:5000,
          uservalue:0,
          usrnewlist:[],
          newlist:[],
            newlista:[
                   {
          title: "产品试吃",
          usereat:'每年4次免积分产品试吃',
          ordernum: 0,
          catimage: require("../../assets/image/usereat.png"),
        },
        {
           title: "成长工具",
          usereat:'365天专属养宠工具',
          ordernum: 1,
          catimage: require("../../assets/image/rc-growth.png"),
        },
        {
          title: "1V1咨询",
            usereat:'10年专业团队1v1咨询',
          ordernum: 2,
          catimage: require("../../assets/image/consult.png"),
        },
           {
          title: "知识课堂",
            usereat:'行业大咖专业养宠知识',
          ordernum: 3,
          catimage: require("../../assets/image/rc-book.png"),
        },
           {
          title: "健康服务",
            usereat:'每年积分兑换1次价值288元的免费体检及100元医院绝育券',
          ordernum: 4,
          catimage: require("../../assets/image/rc-health.png"),
        },
            ],
                 senior:[
                   {
          title: "会员奖励",
          usereat:'专属升级奖励',
          ordernum: 0,
          catimage: require("../../assets/image/rc-win.png"),
        },

                    {
          title: "产品试吃",
          usereat:'每年4次免积分产品试吃',
          ordernum: 0,
          catimage: require("../../assets/image/usereat.png"),
        },
        {
           title: "成长工具",
          usereat:'365天专属养宠工具',
          ordernum: 1,
          catimage: require("../../assets/image/rc-growth.png"),
        },
        {
          title: "1V1咨询",
            usereat:'10年专业团队1v1咨询',
          ordernum: 2,
          catimage: require("../../assets/image/consult.png"),
        },
           {
          title: "知识课堂",
            usereat:'行业大咖专业养宠知识',
          ordernum: 3,
          catimage: require("../../assets/image/rc-book.png"),
        },
           {
          title: "专属定制",
            usereat:'爱宠生活定制活动高级养宠宝典',
          ordernum: 3,
          catimage: require("../../assets/image/userself.png"),
        },
           {
          title: "健康服务",
            usereat:'每年积分兑换1次价值288元的免费体检及100元医院绝育券',
          ordernum: 4,
          catimage: require("../../assets/image/rc-health.png"),
        },
            ],


            goldmedal :[
                   {
          title: "会员奖励",
          usereat:'专属升级奖励',
          ordernum: 0,
          catimage: require("../../assets/image/rc-win.png"),
        },

                    {
          title: "产品试吃",
          usereat:'每年4次免积分产品试吃',
          ordernum: 0,
          catimage: require("../../assets/image/usereat.png"),
        },
                      {
          title: "产品包邮",
          usereat:'尊享订单免邮服务（指点商品）',
          ordernum: 0,
          catimage: require("../../assets/image/usercar.png"),
        },
        {
           title: "成长工具",
          usereat:'365天专属养宠工具',
          ordernum: 1,
          catimage: require("../../assets/image/rc-growth.png"),
        },
        {
          title: "1V1咨询",
            usereat:'10年专业团队1v1咨询',
          ordernum: 2,
          catimage: require("../../assets/image/consult.png"),
        },
           {
          title: "知识课堂",
            usereat:'行业大咖专业养宠知识',
          ordernum: 3,
          catimage: require("../../assets/image/rc-book.png"),
        },
           {
          title: "专属定制",
            usereat:'爱宠生活定制活动高级养宠宝典',
          ordernum: 3,
          catimage: require("../../assets/image/userself.png"),
        },
           {
          title: "健康服务",
            usereat:'每年积分兑换1次价值288元的免费体检及100元医院绝育券',
          ordernum: 4,
          catimage: require("../../assets/image/rc-health.png"),
        },
            ]


    }
},
methods:{
  onChange(index){
       console.log(index);
       if(index==0){
          this.newlist=this.newlista;
       }else if(index==1){
 this.newlist=this.senior
       }else if(index==2){
   this.newlist=this.goldmedal
       }
       console.log(this.newlist)
  }

},
components:{
Myheader
},
mounted(){
      console.log(this.$refs.userblock);
        let userwidth=0;
      let user= JSON.parse(localStorage.getItem("userInfo"));
  
       if(user!==null){
             this.userid=user.data;
            let userlength=this.userid.availiblePoint.toString().length;
      console.log(this.userid.availiblePoint);
      if(this.userid.memberLevel==1){
             this.userimage=require('../../assets/image/rc-new.png');
             this.userorder='新手铲屎官';
             this.newlist=this.newlista;
             this.uservalue=5000;  //新手总积分
               this.rcvalue=this.uservalue-this.userid.availiblePoint;  //新手总积分减去本身的积分
               if(userlength==1||userlength==2||userlength==3||userlength==4){
                   userwidth=this.userid.availiblePoint/100
                   console.log(userwidth);
               }
             console.log(userwidth)
      }else if( this.userid.memberLevel==2){
                 this.userimage=require('../../assets/image/rc-new2.png');
                   this.userorder='资深铲屎官';
                     this.newlist=this.senior
                         this.uservalue=10000;
                         this.rcvalue=this.uservalue-this.userid.availiblePoint;
                          userwidth=this.userid.availiblePoint/100
                       console.log('---2222')
      }else if( this.userid.memberLevel==3){
           this.userimage=require('../../assets/image/rc-new1.png');
            this.userorder='金牌铲屎官';
            this.newlist=this.goldmedal;
               userwidth=100
      } 
       this.$refs.userblock.style.width=userwidth+'%'      
       }else{
          console.log('---');
          this.userid=[];
       }
    

}
}
</script>

<style lang="less" scoped>
ul li ol li em strong i {
  list-style: none;
  font-style: normal;
}
.rc-header {
  width: 100%;
}
  //手机端
@media screen and (max-width: 768px) {
  .rc-main {
    width: 92%;
    margin: 0 auto;
    overflow: hidden;
       .rc-center {
      width: 100%;
      height: 180px;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
   
    }
    .rc-userorder{
        display: flex;
        align-items: center;
        height: 100%;
        
    }

    .rc-order{
        padding: 16px 0 16px 0 ;
         width: 100%;
         display: flex;
         align-items: center;
         font-size: 14px;
         color: #333333;
         font-weight: 500;
         border-bottom: 1px solid #D8D8D8;
         margin-top: 22px;

  }

   .rc-cordd{
   color:#666666;
   font-size: 14px;
   margin-top: 16px;
     span{
        display: block;
        margin-top: 16px;
     }
     .block{
          height: 8px;
   background: #D7D7D7;
   margin-top: 16px;
   border-radius: 4px;
   .r-block{
     width: 0%;
     height: 100%;
     background: #008900;
   }
   
  
     }
      .rc-value{
        display: flex;
        justify-content: space-between;
   }
 }

  .usermember{
      width: 100%;
      height: 80px;
      border-bottom: 1px solid #D8D8D8;
      display: flex;
      align-items: center;
      .rc-image{
          height: 100%;
          display: flex;
          align-items: center;
      }
      img{
          width: 48px;
          height: 48px;
          display: block;
      }
      em{
          font-style: normal;
          font-size: 16px;
        display: block;
        margin-left:16px;
       font-weight: bold;
       color: #531c1c;
      }
      span{
          color: #666666;
           font-size: 14px;
           margin-left: 8px;
          
      }
  }
}
}

@media screen and (min-width: 768px) and (max-width: 1920px) {
    
  .rc-main {
    width: 92%;
    margin: 0 auto;
    overflow: hidden;
       .rc-center {
      width: 100%;
      height: 180px;
      display: none;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
   
    }

    .rc-order{
        padding: 16px 0 16px 0 ;
         width: 100%;
         display: flex;
         align-items: center;
         font-size: 26px;
         color: #333333;
         font-weight: 500;
        

  }
   .rc-cordd{
   color:#666666;
   margin-top: 16px;
     span{
        display: block;
        margin-top: 16px;
        font-size: 16px;
     }
     .block{
          height: 8px;
   background: #D7D7D7;
   margin-top: 16px;
   border-radius: 4px;
   .r-block{
     width: 0%;
     height: 100%;
     background: #008900;
   }
   
  
     }
      .rc-value{
        display: flex;
        justify-content: space-between;
   }
 }

  .usermember{
      width: 23%;
      float: left;
      height: 160px;
      border: 1px solid #D7D7D7;
      margin-top: 80px;
      margin-left: 19px;
      .rc-image{
          float: right;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    margin-right:20px;
 
      }
      img{
          width: 80px;
          height: 80px;
          display: block;
      }
      em{
        font-style: normal;
        font-size: 20px;
        display: block;
       
        font-weight: 500;
        color: #333333;
      }
      span{
          color: #999999;
           font-size: 14px;
         
      }
  }
  .rc-userorder{
      width: 60%;
      float: left;
      height: 100%;
    display: flex;
    flex-direction: column;
       justify-content: center;
       align-items: center;
       span{
           margin-top: 8px;
           width: 54%;
       }
  }
}

}

</style>