<template>
<div>
<Myheader></Myheader>
  <div class="rc-header">
    <div class="rc-main">
      <!-- <div class="rc-title">
        <img src="../../assets/image/rc-cat.png" alt="" />
        <span>{{ userorder }}</span>
      </div> -->
      <div class="rc-center">
      <img :src='userimage'  />
      </div>
      <div class="rc-login">
        <div class="rc-unlogin">
        <div class="rc-people" @click="opendialog()">
          <img src="../../assets/image/rc-people.png" alt="" />
        </div>
        <div class="rc-userlogin">
          <div v-if="!islogin">
        <span>{{usertitle}}</span>
          <em>{{userorder}}</em>
          </div>
           <nuxt-link :to="`/userlogin/login/`">
           <span v-if="islogin">登录/注册</span>
            </nuxt-link>
        </div>
        </div>
          <div class="rc-islogin">
              <nuxt-link :to="`/personal/usermember/`">
         <span>会员权益</span>
            </nuxt-link>
      </div>
      </div>
    
      <div class="usercord">
        <em>当前积分:{{ rcrcord }}</em>
        <span @click="userinter">积分明细</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>0</span>
                 <span>5000</span>
                 <span>10000</span>
          </div>
      </div>

      <div class="rc-order">
        <em>我的订单</em>

       
        <span @click="findall" >查看全部</span>
          
      </div>
      <div class="rc-obligation">
        <ul>
          <li v-for="(item, index) in prefecture" :key="index" @click="obligation(item,index)">
            <img :src="item.catimage" alt="" />
            <span>{{ item.title }}</span>
          </li>
        </ul>
      </div>
          <div class="rc-usermain">
      <h2>服务工具</h2>
          <div class="rc-buymain">
      <div class="rc-buy" v-for="(item, index) in personallist" :key="index" @click="openaddress(index)">
        <div class="rc-cord">
          <img :src="item.buyimage" alt="" />
          <em>{{ item.title }}</em>
        </div>
        <div class="rc-load">
          <span>{{ item.usertitle }}</span>
              <img src="../../assets/image/rc-left.png" alt="" />
        </div>
      </div>
      </div>
      </div>
    </div>
  </div>

    <el-dialog
    :visible.sync="dialogInfo1"
    hegight="700px"
    :before-close="handleClose"
    @open="open"
  >
    <div class="rc-header">
      <div class="rc-title">
     <img src="../../assets/error.png" alt="">
     </div> 
       <div class="rc-logmain">
            <h3>温馨提示</h3>
            <span>{{usermessage}}</span>

       </div>

       <div class="userer">

         <img src="../../assets/image/rc-discount.png" alt="">
         <span>微信扫一扫，识别二维码</span>
       </div>
    </div>


  </el-dialog>



  
  </div>


  
</template>

<script>
import Myheader from '~/components/header.vue' 
export default {
  data() {
    return {
      userlog:false,
      islogin:false,
      dialogInfo1:false,
          userid:null,
      usertitle:'',
      rcvalue:5000,
         usermessage:'关注皇家爱宠荟，修改个人资料',
       userimage:require("../../assets/image/rc-new.png"),
      userlogin:'登录注册',
         userorder: "新手铲屎官",
      prefecture: [
        {
          title: "待付款",
          ordernum: "2",
          catimage: require("../../assets/image/rc-obligation.png"),
        },
        {
          title: "待发货",
          ordernum: "2",
          catimage: require("../../assets/image/rc-pending.png"),
        },
        {
          title: "待收货",
          ordernum: "2",
          catimage: require("../../assets/image/rc-wait.png"),
        },
      ],
     
      personallist: [
        {
          title: "积分商城",
          ordernum: "0",
          buyimage: require("../../assets/image/rc-integral.png"),
          usertitle: "点击进入爱宠荟",
        },
        {
          title: "优惠券",
          ordernum: "1",
          buyimage: require("../../assets/image/rc-discount.png"),
          usertitle: "查看详情",
        },
        {
          title: "收货地址",
          ordernum: "2",
          buyimage: require("../../assets/image/rc-address.png"),
          usertitle: "查看详情",
        },
      ],
      rcrcord: '',
      value: [4, 8],
   
    };

  },
    components: {
    Myheader,
  },
  watch:{

},
  methods: {
userinter(){
  console.log(this.userid);
   if(this.userid!==null||this.userid!==undefined){
           this.$router.push({
        path: "/personal/integral/",
        query: {
          stype: 1,
        },
      });
      }else{
          this.$message({
                                type: 'warning',
                                message: '您还未登录'
                            });
                            return 
      }
},
    findall(){
      console.log('PPP');
      console.log(this.userid.length);
      if(this.userid!==null||this.userid!==undefined){
           this.$router.push({
        path: "/personal/useraddress/",
        query: {
          stype: 0,
        },
      });
      }else{
          this.$message({
                                type: 'warning',
                                message: '您还未登录'
                            });
                            return 
      }
    
    },
     //地址的跳转
obligation(item,index){
  console.log(index);
  console.log(item);
   
   if(this.userid!==null||this.userid!==undefined){
          if(item.title=='待付款'){
             this.$router.push({
        path: "/personal/useraddress",
        query: {
          stype: 1,
        },
      });
   
     }

     else if(item.title=='待发货'){
                   this.$router.push({
        path: "/personal/useraddress",
        query: {
          stype: 2,
        },
      });
     }
         else if(item.title=='待收货'){
                   this.$router.push({
        path: "/personal/useraddress",
        query: {
          stype: 3,
        },
      });
     }
   
      }else{
             this.$message({
                                type: 'warning',
                                message: '您还未登录'
                            });
                            return 
      }

},



    handleClose(){
         this.dialogInfo1=false;
         console.log(this.dialogInfo1);
    },
    open(){
         
    },
      ifadroind(){
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
 
    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
      console.log("当前是电脑打开")
      if(this.userlog==true){
         this.usermessage='关注皇家爱宠荟，修改个人资料',
       this.dialogInfo1=true;
      }else{
          this.dialogInfo1=false;
            this.usermessage='关注皇家爱宠荟，兑换更多福利';
      }
      
    }else{
  console.log("当前是手机打开")
    this.dialogInfo1=false;
}
  },
    openaddress(index){
      console.log(index);
         if(this.userid!==null||this.userid!==undefined){
                if(index==2){
this.$router.push({
      path: `/useraddress/openaddress/`
   })
        console.log('这是地址的跳转');
  
      }
      if(index==0){
        this.userlog=true
        this.ifadroind();
      }

          if(index==1){
   this.$router.push({
      path: `/personal/discount/`
   })
        console.log('这是地址的跳转');
  
        
      }
      }else{
        console.log('---=');
         this.$message({
                                type: 'warning',
                                message: '您还未登录'
                            });
                            return 
      }
 
    },

    opendialog(){

   this.ifadroind();
    }
  },
  mounted() {
    console.log(this.islogin)
    console.log(this.userid);
        let userwidth=0;
        this.ifadroind();
        let user= JSON.parse(localStorage.getItem("userInfo"));
        console.log(user)
        if(user!==null){
          console.log('11')
            this.userid=user.data;
            console.log(this.userid);
      this.usertitle=this.userid.memberName;
      
      this.rcrcord=this.userid.availiblePoint;

          if(this.userid.memberLevel==1){
          let userlength=this.userid.availiblePoint.toString().length;
          this.userimage=require('../../assets/image/rc-new.png');
          this.userorder='新手铲屎官';
           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);
               }
       }
       else if(this.userid.memberLevel==2){
           this.userimage=require('../../assets/image/rc-new2.png');
               this.userorder='资深铲屎官';
                this.uservalue=10000;
                         this.rcvalue=this.uservalue-this.userid.availiblePoint;
                          userwidth=this.userid.availiblePoint/100
       }else if( this.userid.memberLevel==3){
       this.userimage=require('../../assets/image/rc-new1.png');
          this.userorder='金牌铲屎官';
               this.usrnewlist=this.goldmedal;
               userwidth=100
       }
       this.$refs.userblock.style.width=userwidth+'%' 
        }   else{
          console.log('---');
          this.userid=[];
        }
     
      if(this.userid==undefined ||this.userid==''||this.userid==null){
        console.log(this.userid)
        this.islogin=true;
      }
   

  },


};
</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) {


/deep/.el-dialog {
 width: 352px;
 height: 500px;
}

.rc-header{
 display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    h3{
      color:#333333;
      font-size: 26px;
    }
  .rc-title{
     img{
       width: 96px;
       height: 96px;

     }
  }
  .userer{
    img{
      width: 210px;
      height: 210px;
      display: flex;
    justify-content: center;
    flex-direction: column;

    }
  }
}
  .rc-main {
    width: 92%;
    margin: 0 auto;
    overflow: hidden;
       .rc-usermain{
        h2{
        display: none;
        }
        
      }
    .rc-center {
      width: 100%;
      height: 180px;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
   
    }

    .rc-login {
      width: 100%;
      height: 112px;
     display: flex;
    justify-content: space-between;
    align-items: center;
  .rc-unlogin{
    display: flex;
    align-items: center;
  }
      .rc-userlogin{
            margin-left: 16px;
     
      span{
    font-size: 18px;
   color: #333333;
   display: block;
      }
      em{
        font-size: 14px;
        color:#666666;
        font-style: normal;
        display: block;
        margin-top: 8px;
      }
 
       }
            .rc-islogin{
        span{
          color: #E1001A;
    font-size: 14px;
    display: block;
    border-bottom: 1px solid #E1001A;
        }
      }
      .rc-people {
        width: 64px;
        height: 64px;
        display: flex;
        align-items: center;
        border: 2px solid #d7d7d7;
        border-radius: 50%;
        img {
          width: 48px;
          height: 48px;
          display: block;
          margin: 0 auto;
        }
      }
    }
    .usercord{
        display: flex;
        justify-content: space-between;
         height: 32px;
         align-items: center;
         border-bottom: 1px solid #D8D8D8;
         padding-bottom: 17px
;

        em{
            font-style: normal;
            color: #333333;
            font-weight: bold;

        }
        span{
            color:#E1001A;
              font-size: 14px;
              display: block;
              border-bottom: 1px solid #E1001A;
        }
    }
 .rc-cordd{
   color:#666666;
   font-size: 14px;

     span{
        display: block;
        margin-top: 16px;
        text-align: left;
     }
     .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;
   }
 }
    .rc-order{
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
        border-bottom: 1px solid #D8D8D8;
        padding-bottom: 16px;
        em{
            font-style: normal;
            font-size: 14px;
              font-weight: bold;
            color: #333333;
        }
          span{
            color:#E1001A;
              font-size: 14px;
              display: block;
              border-bottom: 1px solid #E1001A;
        }
    }

    .rc-obligation{
      margin-top: 16px;
        ul{
        display: flex;
        justify-content: space-between;
            li{
                float: left;

            }
            img{
                width: 44px;
                height: 44px;
                display: block;
            }
        }
    }
    .rc-buy{
        width: 100%;
        height: 64px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #D8D8D8;
        margin-top: 24px;
        .rc-cord{
            display: flex;
            align-items: center;
        }
        img{
            width: 32px;
            height: 32px;
            display: block;
        }
        em{
            font-style: normal;
            font-size: 14px;
            color: #333333;
            margin-left: 16px;

        }
        .rc-load{
            display: flex;
            align-items: center;
            font-size: 14px;
             color: #666666;
             span{
                  display: block;
                  margin-right: 8px;
                  margin-top: -4px;
             }
             img{
               width: 8px;
               height: 16px;
               display: block;
             }
        }
    }
  }
}
//pc端

@media screen and (min-width: 768px) and (max-width: 1920px) {
  /deep/.el-dialog {
 width: 440px;
 height: 652px;
}

.rc-header{
 display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    h3{
      color:#333333;
      font-size: 26px;
    }
  .rc-title{
     img{
       width: 96px;
       height: 96px;

     }
  }
  .userer{
    img{
      width: 210px;
      height: 210px;
      display: flex;
    justify-content: center;
    flex-direction: column;

    }
  }
}
    .rc-main {
    width: 92%;
    margin: 0 auto;
    .rc-center {
      width: 100%;
      height: 180px;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
      display: none;
    }

    .rc-login {
  width: 100%;
      height: 112px;
     display: flex;
    justify-content: space-between;
    align-items: center;
  .rc-unlogin{
    display: flex;
    align-items: center;
  }
      .rc-userlogin{
            margin-left: 16px;
     
      span{
    font-size: 18px;
   color: #333333;
   display: block;
      }
      em{
        font-size: 14px;
        color:#666666;
        font-style: normal;
        display: block;
        margin-top: 8px;
      }
 
       }
            .rc-islogin{
        span{
          color: #E1001A;
    font-size: 18px;
    display: block;
        }
      }
      .rc-people {
        width: 64px;
        height: 64px;
        display: flex;
        align-items: center;
        border: 2px solid #d7d7d7;
        border-radius: 50%;
        img {
          width: 48px;
          height: 48px;
          display: block;
          margin: 0 auto;
        }
      }
    }
    .usercord{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80px;
        border-bottom: 1px solid #D7D7D7;
        em{
            font-style: normal;
            color: #333333;
            font-weight: bold;
            font-size: 18px;

        }
        span{
            color:#E1001A;
              font-size: 18px;
              display: block;
        }
    }
 .rc-cordd{
   color:#333333;
   font-size: 18px;
   height: 133px;
   margin-top: 32px;

 color:#666666;
   font-size: 14px;
     span{
       margin-top: 16px;
        font-size: 18px;
           text-align: left;
           display: block;
     }
     .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;
   }

 }
    .rc-order{
        display: flex;
        justify-content: space-between;
            border-bottom: 1px solid #D8D8D8;
            padding-bottom: 28px;
            margin-top: 20px;
        em{
            font-style: normal;
            font-size: 26px;
            color: #333333;
        }
          span{
            color:#E1001A;
              font-size: 18px;
              display: block;
            
        }
    }

    .rc-obligation{
      margin-top: 16px;
        ul{
        display: flex;
        justify-content: space-between;
        width: 80%;
        margin: 0 auto;
        text-align: center;
            li{
                float: left;

            }
            img{
                width: 96px;
                height: 96px;
                display: block;
            }
        }
        span{
          font-size: 18px;
        }
    }
    .rc-usermain{
      h2{
    color: #333333;
    font-size: 26px;
    font-weight: normal;
    display: block;
    padding-bottom: 28px;
    border-bottom: 1px solid #D8D8D8;
    text-align: left;

      }
    }
    .rc-buymain{
      display: flex;
      justify-content: space-between;
      width: 80%;
      margin: 0 auto;
    }
    .rc-buy{
        display: flex;
        justify-content: space-between;
          text-align: center;
        margin-top: 24px;
      
        img{
            width: 96px;
            height: 96px;
            display: block;
        }
        em{
            font-style: normal;
            font-size: 18px;
            color: #333333;
        }
        .rc-load{
            display: flex;
            align-items: center;
            font-size: 14px;
             color: #666666;
             span{
                  display: block;
                  margin-right: 8px;
                  margin-top: -4px;
             }
             img{
               width: 8px;
               height: 16px;
               display: block;
             }
             display: none;
        }
    }
  }


}
</style>