<template>
  <div>
    <Myheader></Myheader>
	<div class="rc-top"></div>
    <div class="rc-full-width rc-layout-container">
      <div class="rc-main">
        <div class="rc-headera">
          <span
            v-for="(item, index) in discountlist"
            :key="index"
            @click="selectGoods(item, index)"
            :class="activeIndex == index ? 'active' : 'unactive'"
          >
           {{item.title}}
          </span>
     
        </div>
        <div class="rc-userheader">
         <span  v-for="(item, index) in message" :key="index">
           {{item.title}}
         </span>
       
        </div>
        <div class="rc-center" v-for="(item, index) in goldmedal" :key="index">
          <div class="rc-usermaina" v-for="(userlist,index) in item.orderDetailList" :key="index" >
          <div class="rc-title">
              <div>
            <i>订单编号:</i><span>{{ item.orderNumber }}</span>
          
            </div>
            <div class="rc-usertitle">
             <strong>订单状态:</strong> <em>{{item.status=='0'?'待付款':item.status=='1'?'待收货':item.status=='2'?'已完成':item.status=='3'?'已取消':'异常订单'}}</em>
             </div>
          </div>
          <div class="rc-usermain" @click="userfind(item)">
            <div class="rc-image">  

              <img :src="item.catimage" alt="" />
            </div>
            <div class="rc-right">
              <div class="rc-usercenter">
              <em>{{ item.usereat }}</em>
              <div class="rc-userright">
                <span>规格:{{ userlist.num }}</span>
              </div>
              </div>
              <div class="rc-userbottom">
                <span>数量:{{ userlist.pcs}}件</span>
                <i>￥{{ userlist.ecPrice }}</i>
              </div>


                  <div class="rc-userbottomm">
               <i>￥{{ item.userprice }}</i>
                 <span>{{item.orderstype}}</span>
                <i>￥{{ item.userprice }}</i>
              </div>
            </div>

             <div class="pc-bottom">
            <span @click="usertwo()">再次购买</span>
            <span @click="userfind()">查看订单</span>
          </div>
          </div>
          <!-- <div class="rc-bottom">
            <span @click="userpay(item,index)">{{item.status=='0'?'取消订单':item.status=='1'?'确认收货':item.status=='2'?'再次购买':item.status=='3'?'再次购买':'异常订单'}}</span>
            <span @click="userfind(item)">{{item.status=='0'?'立即支付':item.status=='1'?'查看订单':item.status=='2'?'查看订单':item.status=='3'?'查看订单':'异常订单'}}</span>
          </div> -->
        </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { List } from 'vant';
import Myheader from "~/components/header.vue";
import { customerorders,userindent,canceldanhao } from "../../ajax/getData";
export default {
  data() {
    return {
      activeIndex: 0,
      userdata:[],
       buttontitle:'再次购买',
      discountlist: [
        {
          title: "全部",
        },
        {
          title: "待付款",
        },
        {
          title: "待发货",
        },
        {
          title: "待收货",
        },
      ],

       message: [
        {
          title: "商品",
        },
        {
          title: "单价/元",
        },
        {
          title: "数量",
        },
        {
          title: "实付款/元",
        },
        {
          title: "操作",
        },
      ],

      goldmedal: [
        {
			ordernumber: "1111111111111111111",
			orderstype: 1,
			usereat: "专属升级奖励",
			ordernum: 0,
			num: "5kg",
			specification: "1",
			buttontitle:'立即支付',
			userprice: "167.00",
			catimage: require("../../assets/image/rc-win.png"),
			orderDetailList:{
				userlist:{
					num:10,
					pcs:10,
					ecprice:167
				}
			}
        },

        {
			ordernumber: "1111111111111111111",
			usereat: "每年4次免积分产品试吃",
			ordernum: 0,
			buttontitle:'再次购买',
			catimage: require("../../assets/image/usereat.png"),
			orderstype: 2,
			userprice: "167.00",
			orderDetailList:{
				userlist:{
					num:10,
					pcs:10,
					ecprice:167
				}
			}
        },
        {
          ordernumber: "1111111111111111111",
          usereat: "尊享订单免邮服务（指点商品）",
          ordernum: 0,
            buttontitle:'取消订单',
          catimage: require("../../assets/image/usercar.png"),
          orderstype: 3,
          userprice: "167.00",
		  orderDetailList:{
		  	userlist:{
		  		num:10,
		  		pcs:10,
		  		ecprice:167
		  	}
		  }
        },
        {
          ordernumber: "1111111111111111111",
          usereat: "365天专属养宠工具",
          ordernum: 1,
          catimage: require("../../assets/image/rc-growth.png"),
          orderstype: 1,
          userprice: "167.00",
        },
        {
          ordernumber: "1111111111111111111",
          usereat: "10年专业团队1v1咨询",
          ordernum: 2,
          catimage: require("../../assets/image/consult.png"),
          orderstype: 2,
          userprice: "167.00",
		  orderDetailList:{
		  	userlist:{
		  		num:10,
		  		pcs:10,
		  		ecprice:167
		  	}
		  }
        },
        {
          ordernumber: "1111111111111111111",
          usereat: "行业大咖专业养宠知识",
          ordernum: 3,
          catimage: require("../../assets/image/rc-book.png"),
          orderstype: 3,
          userprice: "167.00",
		  orderDetailList:{
		  	userlist:{
		  		num:10,
		  		pcs:10,
		  		ecprice:100
		  	}
		  }
        },
        {
          ordernumber: "1111111111111111111",
          usereat: "爱宠生活定制活动高级养宠宝典",
          ordernum: 3,
          catimage: require("../../assets/image/userself.png"),
          orderstype: 3,
          userprice: "167.00",
		  orderDetailList:{
		  	userlist:{
		  		num:10,
		  		pcs:10,
		  		ecprice:100
		  	}
		  }
        },
        {
          usereat: "每年积分兑换1次价值288元的免费体检及100元医院绝育券",
          ordernum: 4,
          catimage: require("../../assets/image/rc-health.png"),
          orderstype: 3,
          userprice: "167.00",
		  orderDetailList:{
		  	userlist:{
		  		num:10,
		  		pcs:10,
		  		ecprice:100
		  	}
		  }
        },
      ],
    };
  },

    mounted() {
		let user= JSON.parse(localStorage.getItem("userInfo"));
		this.userdata=user;
		let stype=this.$route.query.stype
		if(user=='' ||user==null){
			this.$message({
			type: 'warning',
			message: '请先去登录'
			});
			return
		}else{
			this.indet(user.data.mobile,stype);
		}
  },  
  components: {
		Myheader,
  },
  methods: {
	async indet(mobile,stype){
		let data=await userindent(mobile,);
		this.activeIndex=stype;
		//this.goldmedal=data;
		let list=[];
		let fahuolist=[];
		console.log(this.goldmedal);
		for(let i=0;i<this.goldmedal.length;i++){
			list.push(this.goldmedal[i].orderDetailList);
		}
	},


	async canceldanhao(orderNumber){
		let data=await canceldanhao(orderNumber);
		console.log(data);
		if(data){
			this.$message({
				type: 'warning',
				message: '取消订单成功'
			});
			this.indet(this.userdata.data.mobile);
		}
	},

	userpay(item,index){
		console.log(item);
		if(item.status==0){
			this.canceldanhao(item.orderNumber);
		}
		console.log(item.buttontitle);
		if(item.buttontitle=='立即支付'){
			this.$router.push({
				path: "/personal/userpay",
				query: {
					stype: 1,
				},
			});
		}else if(item.buttontitle=='再次购买'){
			this.$router.push({
			path: "/myorder/userrecord",
			query: {
				stype: 1,
			},
			});
		}
	},
    selectGoods(item, index) {
      this.activeIndex = index;
      if(index==1){
     
      }
           if(index==2){
      
      }
    },
    userfind(item){
       console.log('--');
       console.log(item.orderNumber);
       this.$router.push({
        path: "/myorder/usertion",
        query: {
          stype: item.status,
          orderNumber:item.orderNumber
        },
      });
    },
    usertwo(){
                 this.$router.push({
        path: "/myorder/userrecord",
        query: {
          stype: 1,
        },
      });
    },
    
  },

};
</script>

<style lang="less" scoped>
@import url("../../assets/css/global.less");
@import url("../../assets/css/useraddress.less");
</style>