<template>
   <div>
       <Myheader></Myheader>
	   <div class="rc-top"></div>
	   	<tabs :crumbs="crumbs"></tabs>
        <div class="rc-full-width rc-max-width--xl rc-padding-bottom--lg">
			<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 class="rc-styled-link" @click="onChange(0)">新手铲屎官</span>
						<span class="rc-styled-link" @click="onChange(1)">资深铲屎官</span>
						<span class="rc-styled-link" @click="onChange(2)">金牌铲屎官</span>
					</div>
				</div>
				<div class="rc-layout-container">
					<div class="usermember rc-column" 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>
		
		<Myfooter></Myfooter>
   </div>

</template>

<script>
import Myheader from '~/components/header.vue'
import Myfooter from '~/components/rc-footer.vue'
import tabs from "~/components/tabs.vue";
export default {
data(){
  
    return{
			crumbs:[
				{
					path:'/personal/mypersonal',
				},
				{
					path:'/personal/usermember/',
				}
			],
			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:[
                  {
          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"),
        },

          ],
            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,
Myfooter,
tabs
},
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>
@import url("../../assets/css/usermember.less");

</style>