<template>
  <div>
    <Myheader></Myheader>
    <div class="rc-top"></div>
    <div class="online bold"></div>
    <div class="usercontshow rc-max-width--xl">
      <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="online bold" style="height:8px;margin-top:0"></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 useralllist" :key="index">
        <div class="rc-usermaina">
          <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" >
            <div class="rc-image">
              <img :src="item.catimage" alt="" />
            </div>
            <div class="rc-right" @click="usertiaozhuan(item)">
              <div class="rc-usercenter">
                <em>{{ item.usereat }}</em>
                <div class="rc-userright">
                  <span>规格:{{ item.num }}</span>
                </div>
              </div>
              <div class="rc-userbottom">
                <span>数量:{{ item.pcs }}件</span>
                <i>￥{{  }}</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="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 class="online" style="display:none"></div>
            <div class="rc-usermain rc-price">
               <div class="rc-price priceleft">
                 <span>数量:</span>
                 <em>共{{item.lengthnum}}件商品</em>
               </div>
               <div class="rc-price priceright">
                 <strong>总计:</strong>
                 <i>￥{{item.salesAmount}}</i>
               </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 class="online bold"></div>
 
      </div>
    </div>
      <MyFooter></MyFooter>
  </div>
</template>

<script>
import Myheader from "~/components/header.vue";
import MyFooter from '~/components/rc-footer.vue'
import { customerorders, userindent, canceldanhao,generateOrderWX } from "../../ajax/getData";
export default {
  data() {
    return {
      activeIndex: 0,
      userstype:'',
      alllist:[],
      obligation:[],//待付款
      pending:[],//待发货
      receiving :[],//待收货
      allmessage:[],
      useralllist: [],
      usertitle:'',
      useraliset:[],
      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"),
        },

        {
          ordernumber: "1111111111111111111",

          usereat: "每年4次免积分产品试吃",
          ordernum: 0,
          buttontitle: "再次购买",
          catimage: require("../../assets/image/usereat.png"),
          orderstype: 2,
          userprice: "167.00",
        },
        {
          ordernumber: "1111111111111111111",
          usereat: "尊享订单免邮服务（指点商品）",
          ordernum: 0,
          buttontitle: "取消订单",
          catimage: require("../../assets/image/usercar.png"),
          orderstype: 3,
          userprice: "167.00",
        },
        {
          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",
        },
        {
          ordernumber: "1111111111111111111",
          usereat: "行业大咖专业养宠知识",
          ordernum: 3,
          catimage: require("../../assets/image/rc-book.png"),
          orderstype: 3,
          userprice: "167.00",
        },
        {
          ordernumber: "1111111111111111111",
          usereat: "爱宠生活定制活动高级养宠宝典",
          ordernum: 3,
          catimage: require("../../assets/image/userself.png"),
          orderstype: 3,
          userprice: "167.00",
        },
        {
          usereat: "每年积分兑换1次价值288元的免费体检及100元医院绝育券",
          ordernum: 4,
          catimage: require("../../assets/image/rc-health.png"),
          orderstype: 3,
          userprice: "167.00",
        },
      ],
    };
  },

  mounted() {
    let user = JSON.parse(localStorage.getItem("userInfo"));
    this.userdata = user.data.mobile;
    let stype = this.$route.query.stype;
    this.userstype=this.$route.query.stype;
    console.log(stype);
    if (user == "" || user == null) {
      this.$message({
        type: "warning",
        message: "请先去登录",
      });
      return;
    } else {
      this.indet(this.userdata, stype);
    }
  },
  components: {
    Myheader,
    MyFooter
  },
  methods: {
    async indet(mobile, stype) {
      let data = await userindent(mobile);
      this.activeIndex = stype;
      this.goldmedal = data;
      for (let i = 0; i < this.goldmedal.length; i++) {
        this.useralllist.push(this.goldmedal[i].orderDetailList[0]);
         this.alllist.push(this.goldmedal[i].orderDetailList[0])
        this.allmessage.push(this.goldmedal[i].orderDetailList[0])
        if(this.goldmedal[i].status==0){
          console.log("+++++++++++++");
          this.obligation.push(this.goldmedal[i].orderDetailList[0]);
          
        }else if(this.goldmedal[i].status==1){
          this.receiving.push(this.goldmedal[i].orderDetailList[0]);
        }
        else if(this.goldmedal[i].status==4){
          this.pending.push(this.goldmedal[i].orderDetailList[0]);
        }
      }
        for (var i = 0; i < this.useralllist.length; i++) {
        this.useralllist[i].orderNumber = this.goldmedal[i].orderNumber;
        this.useralllist[i].status = this.goldmedal[i].status;
         this.useralllist[i].addressUserName = this.goldmedal[i].addressUserName;
           this.useralllist[i].phoneNumber = this.goldmedal[i].phoneNumber;
        this.useralllist[i].salesAmount = this.goldmedal[i].salesAmount;
        this.useralllist[i].lengthnum=this.goldmedal[i].orderDetailList.length
      }
      console.log(this.obligation)
         if(this.userstype==1){
         this.useralllist=this.obligation
       }else if(this.userstype==2){
           this.useralllist=this.pending
       }
       else if(this.userstype==0){
           this.useralllist=this.allmessage
       }
         else if(this.userstype==3){
           this.useralllist=this.receiving
       }
    
    
    },

    //订单立即支付
       async getwei(item) {
      let postData = [];
        //   let oneProduct = {
        //   productName: item.productName,
        //   buyCount: item.buyCount,
        //   productId: item.productCode,
        //   payAmount: item.productPrice,
        //   memberId: item.memberId,
        //   phoneNumber: item.mobile,
        //   orderAddress: {
        //     addressPhoneNumber: orderAddress[0].recipientPhone,
        //     addressUserName: orderAddress[0].recipient,
        //     addressProvinceName: orderAddress[0].provinceName,
        //     addressCityName: orderAddress[0].cityName,
        //     addressCountyName: orderAddress[0].districtName,
        //     addressDetailInfo: orderAddress[0].detailAddress,
        //   },
        // };
         postData.push(oneProduct);
    let res = await generateOrderWX(postData);
           let userPayData = {
          orderId: res.data,
          userprice: item.salesAmount, //订单总价
          userinformation:
           item.addressUserName+   //姓名
            " " +
           item.phoneNumber, //电话
          wxPay: "weixin://wxpay/bizpayurl?pr=4RJbokxzz",
        };
             this.$router.push({
          path: "/personal/userpay",
          query: {
            userPayData:JSON.stringify(userPayData),
          },
        });
    },

    usertiaozhuan(item){
            this.$router.push({
        path: "/myorder/usertion",
        query: {
          stype: item.status,
          orderNumber: item.orderNumber,
        },
      });
    },

    async canceldanhao(orderNumber) {
      let data = await canceldanhao(this.userdata,orderNumber);
      if (data) {
        this.$message({
          type: "warning",
          message: "取消订单成功",
        });
        setTimeout(() => {
            this.indet();
        }, 500);
         
      }
    },

    userpay(item, index) {
      if (item.status == 0) {
        this.canceldanhao(item.orderNumber);
      }
      if (item.buttontitle == "立即支付") {
        this.$router.push({
          path: "/personal/userpay",
          query: {
            stype: 1,
          },
        });
      } else if (item.status == 3) {
       	this.$router.push({
				path: "/productdetails/producted",
				query: {
					stype: 1,
					productCode:item.productId
				},
			});
      }
    },
    selectGoods(item, index) {
      let list=[]
  
      this.activeIndex = index;
      if(item.title=='待付款'){
        list=this.obligation
      }
      else if(item.title=='待收货'){
       list=this.receiving

      }else if(item.title=='待发货'){
        this.useralllist=this.pending
        list=this.pending
      }

      else if(item.title=='全部'){
         list=this.alllist
      }
      console.log(this.useralllist);
              for (var i = 0; i < this.useralllist.length; i++) {
        this.useralllist[i].orderNumber =this.goldmedal[i].orderNumber;
        this.useralllist[i].status = this.goldmedal[i].status
         this.useralllist[i].addressUserName =this.goldmedal[i].addressUserName;
           this.useralllist[i].phoneNumber = this.goldmedal[i].phoneNumber;
        this.useralllist[i].salesAmount = this.goldmedal[i].salesAmount;
        this.useralllist[i].lengthnum=this.goldmedal[i].orderDetailList.length
      }
      this.useralllist=list

    },
    userfind(item) {
      if(item.status==0){
        this.getwei(item);
      }else{
             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/orderquantity.less");
</style>