<template>
<div>
<Myheader></Myheader>
 <!-- <tabs></tabs> -->
<div class="rc-top"></div>
  <div class="rc-layout-container rc-one-column rc-full-width ts-mypersonal">
    <div class="rc-column">
      <!-- <div class="rc-title">
        <img src="../../assets/image/rc-cat.png" alt="" />
        <span>{{ userorder }}</span>
      </div> -->
	  <div class="rc-max-width--xl">
		<div class="rc-center">
			<img :src='userimage'  />
		</div>
	  </div>
	  <div class="rc-max-width--xl ts-special-padding">
		<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/`" class="ts-right-arr">
					<span>会员权益</span>
				</nuxt-link>
			</div>
		</div>
    </div>
	<div class="online bold"></div>
	<div class="rc-max-width--xl ts-special-padding">
	  <div class="usercord">
		<em>当前积分:{{ rcrcord }}</em>
		<span class="ts-right-arr" @click="userinter">积分明细</span>
	  </div>

	  <div class="rc-cordd">
		<span>距离升级还差:</span> <span class="lackOfPoint">{{ rcvalue }}</span>
		<div class="block">
			<div class="ts-point-tag rc-md-up">0</div>
			<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>
	<div class="online bold"></div>
	
	<div class="rc-max-width--xl ts-special-padding">
      <div class="rc-order">
        <em>我的订单</em>

       
        <span class="ts-right-arr" @click="findall" >查看全部</span>
          
      </div>
      <div class="rc-obligation rc-max-width--lg">
        <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>
	
	<div class="online bold"></div>
	
	<div class="rc-max-width--xl ts-special-padding">
    <div class="rc-usermain">
      <h2>服务工具</h2>
          <div class="rc-buymain rc-max-width--lg ts-special-padding">
      <div class="rc-buy" v-for="(item, index) in personallist" :key="index" @click="openaddress(item,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 class="online bold"></div>
    </div>
  </div>

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

       </div>

       <div class="userer">
         <img src="/images/qrcode-aichong.jpg" alt="" class="rc-margin-y--xs">
         <span>微信扫一扫，识别二维码</span>
       </div>
    </div>


  </el-dialog>


	<FixRight></FixRight>
  <MyFooter></MyFooter>
  </div>


  
</template>

<script>
import Myheader from '~/components/header.vue' 
import MyFooter from '~/components/rc-footer.vue'
import FixRight from "~/components/fixed-right.vue";
import tabs from "@/components/tabs.vue";
export default {
	middleware: 'metaTitle',
	// middleware: 'metaTitle',
	meta: {title: '个人中心'},
  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,
		MyFooter,
		tabs,
		FixRight
	},
	watch:{

	},
  methods: {
userinter(){
   let user= localStorage.getItem("userInfo");
   if(user==undefined||user==null||user==''){
      this.$message({
                                type: 'warning',
                                message: '您还未登录'
                            });
                            return 
       
      }else{
             this.$router.push({
        path: "/personal/integral/",
        query: {
          stype: 1,
        },
      });
      }
},
    findall(){
      console.log('PPP');
      console.log(this.userid.length);
      
 let user= localStorage.getItem("userInfo");
      if(user==undefined||user==null||user==''){
            this.$message({
                                type: 'warning',
                                message: '您还未登录'
                            });
                            return 
     
      }else{
            this.$router.push({
        path: "/personal/useraddress/",
        query: {
          stype: 0,
        },
      });
      }
    
    },
     //地址的跳转
obligation(item,index){
  console.log(index);
  console.log(item);
    let user= localStorage.getItem("userInfo");
   if(user==undefined||user==null||user==''){
      this.$message({
                                type: 'warning',
                                message: '您还未登录'
                            });
                            return 
        
   
      }else{
               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,
        },
      });
     }
      }

},



    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)) {
      if(this.userlog==true){
         this.usermessage='关注皇家爱宠荟，修改个人资料',
       this.dialogInfo1=true;
      }else{
          this.dialogInfo1=false;
            this.usermessage='关注皇家爱宠荟，兑换更多福利';
      }
      
    }else{
    this.dialogInfo1=false;
	window.location.href="weixin://dl/business/?t=BE1OA2AngRs";
}
  },
    openaddress(item,index){
      console.log(item,index);
         let user= localStorage.getItem("userInfo");
         if(user==undefined||user==null||user==''){
             console.log('---=');
         this.$message({
                                type: 'warning',
                                message: '您还未登录'
                            });
                            return 
   
      }else{
                      if(item.title=='收货地址'){
                        
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('这是地址的跳转');
  
        
      }
      }
 
    },

    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+'%';
			let tagEle=document.querySelector('.ts-point-tag');
			if(tagEle){
				tagEle.innerText=this.userid.availiblePoint;
				let tagEleLeft=userwidth-1;
				if(tagEleLeft<=0)
					tagEleLeft=0;
				tagEle.style.left=tagEleLeft+"%";
			}
        }   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>
@import url("@/assets/css/global.less");
@import url("@/assets/css/mypersonal.less");
</style>