<!--pages/user/dingdan.wxml-->
<view class="swiper-tab">
  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">待付款</view>
  <!-- <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">待发货</view> -->
  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">待收货</view>
  <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">已完成</view>
  <view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swichNav">退款/售后</view>
</view>
<view class="c_t60"></view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:1000px" bindchange="bindChange">
  <!-- 待付款 -->
  <swiper-item> 
    <view class="search_no" wx:if="{{!orderList0.length}}">
        <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view>
        <text>没有可用订单/(ㄒoㄒ)/~~</text>
    </view>
<block wx:for="{{orderList0}}">  
   <view class="bianti"> 
   <image class="ims"  src="../../images/dianpu.png"></image>
   {{item.dianming}}</view>  
     <view class="shop df" >  
        <image class="sh_slt" src="{{item.ImgUrl}}"></image>
        <view class="df_1">            
            <view class="sp_text">
                <navigator url="../index/detail?productId={{item.ProID}}" hover-class="changestyle">
                    <view class="sp_tit ovh1">{{item.productName}}</view>
                </navigator>
                <view class="sp_neb">数量：×{{item.BuyCount}}</view>
                <view class="sp_jg">￥：{{item.price}}</view>
                <view class="font_12 red fl_r" bindtap="payOrderByWechat" data-order-id="{{item.OrderID}}" wx:if="{{item.PayType==1}}">微信支付</view>
                <navigator class="font_12 red fl_r" url="../order/downline?orderId={{item.OrderID}}" wx:if="{{item.PayType==0}}">线下支付</navigator>

                <view class="font_12 red fl_r mr_5" bindtap="removeOrder" data-order-id="{{item.OrderID}}">取消订单</view>
                <navigator url="../order/detail?orderId={{item.OrderID}}" class="font_12 red fl_r mr_5">订单详情</navigator>

               </view>
           </view>        
       </view>    
  </block>             
  </swiper-item>

  <!-- 待发货 -->
  <swiper-item>
    <view class="search_no" wx:if="{{!orderList1.length}}">
        <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view>
        <text>没有可用订单/(ㄒoㄒ)/~~</text>
    </view>
    <view class="shop df" wx:for="{{orderList1}}">
        <image class="sh_slt" src="{{item.ImgUrl}}"></image>
        <view class="df_1">            
            <view class="sp_text">
                <navigator url="../index/detail?productId={{item.ProID}}" hover-class="changestyle">
                    <view class="sp_tit ovh1">{{item.productName}}</view>
                </navigator>
                <view class="sp_neb">数量：×{{item.BuyCount}}</view>
                <view class="sp_jg">￥：{{item.price}}</view>
                <view class="font_12 c9 fl_r">等待发货</view>

                <navigator url="../order/detail?orderId={{item.OrderID}}" class="font_12 red fl_r mr_5">订单详情</navigator>
            </view>
        </view>
    </view>
    <!-- <view class="shop df">        
        <image class="sh_slt" src="/images/sp_slt02.png"></image>
        <view class="df_1">            
            <view class="sp_text">
                <view class="sp_tit ovh1">冰种阳绿蛋面戒指蛋</view>
                <view class="sp_neb">数量：×1</view>
                <view class="sp_jg">￥：2000</view>
                <view class="font_12 c9 fl_r">等待发货</view>
            </view>
        </view>
    </view>
    <view class="shop df">       
        <image class="sh_slt" src="/images/sp_slt03.png"></image>
        <view class="df_1">            
            <view class="sp_text">
                <view class="sp_tit ovh1">冰种阳绿蛋面戒指蛋</view>
                <view class="sp_neb">数量：×1</view>
                <view class="sp_jg">￥：2000</view>
                <view class="font_12 c9 fl_r">等待发货</view>
            </view>
        </view>
    </view>
    <view class="shop df">        
        <image class="sh_slt" src="/images/sp_slt04.png"></image>
        <view class="df_1">            
            <view class="sp_text">
                <view class="sp_tit ovh1">冰种阳绿蛋面戒指蛋</view>
                <view class="sp_neb">数量：×1</view>
                <view class="sp_jg">￥：2000</view>
                <view class="font_12 c9 fl_r">等待发货</view>
            </view>
        </view>
    </view> 
    <view class="shop df">        
        <image class="sh_slt" src="/images/sp_slt04.png"></image>
        <view class="df_1">            
            <view class="sp_text">
                <view class="sp_tit ovh1">冰种阳绿蛋面戒指蛋</view>
                <view class="sp_neb">数量：×1</view>
                <view class="sp_jg">￥：2000</view>
                <view class="font_12 c9 fl_r">等待发货</view>
            </view>
        </view>
    </view>  -->
  </swiper-item>

  <!-- 待收货 -->
  <swiper-item>
        <view class="search_no" wx:if="{{!orderList2.length}}">
            <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view>
            <text>没有可用订单/(ㄒoㄒ)/~~</text>
        </view>
        <view class="shop df" wx:for="{{orderList2}}">        
        <image class="sh_slt" src="{{item.ImgUrl}}"></image>
        <view class="df_1">            
            <view class="sp_text">
                <navigator url="../index/detail?productId={{item.ProID}}" hover-class="changestyle">
                    <view class="sp_tit ovh1">{{item.productName}}</view>
                </navigator>
                <view class="sp_neb">数量：×{{item.BuyCount}}</view>
                <view class="sp_jg">￥：{{item.price}}</view>
                <view class="font_12 c9 fl_r">货已发出..</view>

                <navigator url="../order/detail?orderId={{item.OrderID}}" class="font_12 red fl_r mr_5">订单详情</navigator>
            </view>
        </view>
    </view>
    <!-- <view class="shop df">        
        <image class="sh_slt" src="/images/sp_slt02.png"></image>
        <view class="df_1">            
            <view class="sp_text">
                <view class="sp_tit ovh1">冰种阳绿蛋面戒指蛋</view>
                <view class="sp_neb">数量：×1</view>
                <view class="sp_jg">￥：2000</view>
                <view class="font_12 c9 fl_r">货已发出..</view>
            </view>
        </view>
    </view>
    <view class="shop df">       
        <image class="sh_slt" src="/images/sp_slt03.png"></image>
        <view class="df_1">            
            <view class="sp_text">
                <view class="sp_tit ovh1">冰种阳绿蛋面戒指蛋</view>
                <view class="sp_neb">数量：×1</view>
                <view class="sp_jg">￥：2000</view>
                <view class="font_12 c9 fl_r">货已发出..</view>
            </view>
        </view>
    </view>
    <view class="shop df">        
        <image class="sh_slt" src="/images/sp_slt04.png"></image>
        <view class="df_1">            
            <view class="sp_text">
                <view class="sp_tit ovh1">冰种阳绿蛋面戒指蛋</view>
                <view class="sp_neb">数量：×1</view>
                <view class="sp_jg">￥：2000</view>
                <view class="font_12 c9 fl_r">货已发出..</view>
            </view>
        </view>
    </view> 
    <view class="shop df">        
        <image class="sh_slt" src="/images/sp_slt04.png"></image>
        <view class="df_1">            
            <view class="sp_text">
                <view class="sp_tit ovh1">冰种阳绿蛋面戒指蛋</view>
                <view class="sp_neb">数量：×1</view>
                <view class="sp_jg">￥：2000</view>
                <view class="font_12 c9 fl_r">货已发出..</view>
            </view>
        </view>
    </view>  -->

  </swiper-item>

  <!-- 待评论-->
  <swiper-item>
    <view class="search_no" wx:if="{{!orderList3.length}}">
            <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view>
            <text>没有可用订单/(ㄒoㄒ)/~~</text>
        </view>

    <view class="shop df" wx:for="{{orderList3}}">   
        <image class="sh_slt" src="{{item.ImgUrl}}"></image>
        <view class="df_1">            
            <view class="sp_text">
                <navigator url="../index/detail?productId={{item.ProID}}" hover-class="changestyle">
                    <view class="sp_tit ovh1">{{item.productName}}</view>
                </navigator>
                <view class="sp_neb">数量：×{{item.BuyCount}}</view>
                <view class="sp_jg">￥：{{item.price}}</view>
                <navigator class="font_12 red fl_r" url="tuihuo?orderId={{item.OrderID}}">退货</navigator>
                
                <navigator url="../order/detail?orderId={{item.OrderID}}" class="font_12 red fl_r mr_5">订单详情</navigator>
            </view>
        </view>
    </view>
    <!-- <view class="shop df">        
        <image class="sh_slt" src="/images/sp_slt02.png"></image>
        <view class="df_1">            
            <view class="sp_text">
                <view class="sp_tit ovh1">冰种阳绿蛋面戒指蛋</view>
                <view class="sp_neb">数量：×1</view>
                <view class="sp_jg">￥：2000</view>
                <view class="font_12 c9 fl_r">等待评论</view>
            </view>
        </view>
    </view>
    <view class="shop df">       
        <image class="sh_slt" src="/images/sp_slt03.png"></image>
        <view class="df_1">            
            <view class="sp_text">
                <view class="sp_tit ovh1">冰种阳绿蛋面戒指蛋</view>
                <view class="sp_neb">数量：×1</view>
                <view class="sp_jg">￥：2000</view>
                <view class="font_12 c9 fl_r">等待评论</view>
            </view>
        </view>
    </view>
    <view class="shop df">        
        <image class="sh_slt" src="/images/sp_slt04.png"></image>
        <view class="df_1">            
            <view class="sp_text">
                <view class="sp_tit ovh1">冰种阳绿蛋面戒指蛋</view>
                <view class="sp_neb">数量：×1</view>
                <view class="sp_jg">￥：2000</view>
                <view class="font_12 c9 fl_r">等待评论</view>
            </view>
        </view>
    </view> 
    <view class="shop df">        
        <image class="sh_slt" src="/images/sp_slt04.png"></image>
        <view class="df_1">            
            <view class="sp_text">
                <view class="sp_tit ovh1">冰种阳绿蛋面戒指蛋</view>
                <view class="sp_neb">数量：×1</view>
                <view class="sp_jg">￥：2000</view>
                <view class="font_12 c9 fl_r">等待评论</view>
            </view>
        </view>
    </view>  -->

  </swiper-item>

  <!-- 退款/售后 -->
  <swiper-item>
    <view class="search_no" wx:if="{{!orderList4.length}}">
        <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view>
        <text>没有可用订单/(ㄒoㄒ)/~~</text>
    </view>

    <view class="shop df" wx:for="{{orderList4}}">
        <image class="sh_slt" src="{{item.ImgUrl}}"></image>
        <view class="df_1">            
            <view class="sp_text">
                <navigator url="../index/detail?productId={{item.ProID}}" hover-class="changestyle">
                    <view class="sp_tit ovh1">{{item.productName}}</view>
                </navigator>
                <view class="sp_jg">￥：{{item.TotalMoney}}</view>
                <view class="font_12 fl_r">退货中...</view>

                <navigator url="../order/detail?orderId={{item.OrderID}}" class="font_12 red fl_r mr_5">订单详情</navigator>
            </view>
        </view>
    </view>
    <!-- <view class="shop df">        
        <image class="sh_slt" src="/images/sp_slt02.png"></image>
        <view class="df_1">            
            <view class="sp_text">
                <view class="sp_tit ovh1">冰种阳绿蛋面戒指蛋</view>
                <view class="sp_neb">数量：×1</view>
                <view class="sp_jg">￥：2000</view>
                <view class="font_12 red fl_r">等待处理</view>
            </view>
        </view>
    </view>
    <view class="shop df">       
        <image class="sh_slt" src="/images/sp_slt03.png"></image>
        <view class="df_1">            
            <view class="sp_text">
                <view class="sp_tit ovh1">冰种阳绿蛋面戒指蛋</view>
                <view class="sp_neb">数量：×1</view>
                <view class="sp_jg">￥：2000</view>
                <view class="font_12 red fl_r">等待处理</view>
            </view>
        </view>
    </view>
    <view class="shop df">        
        <image class="sh_slt" src="/images/sp_slt04.png"></image>
        <view class="df_1">            
            <view class="sp_text">
                <view class="sp_tit ovh1">冰种阳绿蛋面戒指蛋</view>
                <view class="sp_neb">数量：×1</view>
                <view class="sp_jg">￥：2000</view>
                <view class="font_12 red fl_r">等待处理</view>
            </view>
        </view>
    </view> 
    <view class="shop df">        
        <image class="sh_slt" src="/images/sp_slt04.png"></image>
        <view class="df_1">            
            <view class="sp_text">
                <view class="sp_tit ovh1">冰种阳绿蛋面戒指蛋</view>
                <view class="sp_neb">数量：×1</view>
                <view class="sp_jg">￥：2000</view>
                <view class="font_12 red fl_r">等待处理</view>
            </view>
        </view>
    </view>  -->

  </swiper-item>
</swiper>

/* pages/user/dingdan.wxss */
.swiper-tab{  
    width: 100%;  
    border-bottom: 1px solid #eee;  
    text-align: center;  
    line-height: 80rpx;
    background: #fff;  
    position: fixed;
    top: 0;  
    z-index: 999;
    }  
.swiper-tab-list{  
  font-size: 12px;  
  display: inline-block;  
  width: 20%;  
  color: #666;  
  }  
.on{ 
  color: #dd2727;  
  border-bottom: 5rpx solid #dd2727;
  }  
  
.swiper-box{ 
  display: block; 
  height: 100%; 
  width: 100%; 
  overflow: hidden; 
  }  

.clearbutton{
    background: #fff; 
    display: inline-block;
    margin:3% 3% 2% 3%; 
    color: #dd2727;
    font-size: 14px;
    width: 94%;
}
.shop{
    background: #fff;
    padding: 4%;
    margin-bottom: 10px;
}
.shop checkbox{ 
    margin-top: 27px;
    }
.sh_slt{
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 5px;
    margin-right: 4%;
    float: left;
}
.sp_text{
    float: left;
    line-height: 20px;
    width: 100%;
    text-align: left;
    }
.sp_tit{
    width: 100%;
    overflow: hidden;
    font-size: 14px;
}
.sp_neb{
    width: 100%;
    overflow: hidden;
    font-size: 12px;
    color: #999;
}
.sp_jg{
    width: 100%;
    overflow: hidden;
    font-size: 14px;
    color: #fc0628;
}
.dle{
    color: #999;
    font-size: 12px;
    float: right;
}
.dle image{
    width: 18px;
    height: 18px;
    vertical-align: sub;
}
.jk_bottom{
    position: fixed;
    bottom: 0;
    background: #fff;
    width: 100%; 
    display: inline-flex;
    border-bottom: 1px solid #eee; 
    font-size: 14px;
    color: #999;       
}
.jk_bottom checkbox{
    margin: 4% 0 4% 4%;    
}
.jk_bottom .heji{
    margin-top: 5.5%;
    width: 30%; 
    text-align: right;   
}
.jk_bottom .all{
    margin-top: 5.5%;
    padding-left: 2%;  
}
.jk_bottom .js_button{
    background: #dd2727;
    float: right;
    color: #fff;
    font-size: 16px;
    text-align: center;
    width: 40%;
    position: absolute;
    right: 0;
    line-height: 50px;
}
.c_t60{
    clear: both;
    height: 1px;
    padding-top: 48px;
}
.blue{
  color: #42b1ff;
}
.mr_5{
    margin-right: 5px;
}
.bianti{
    margin-left:30rpx; 
}
.ims{
    width: 50rpx;
    height: 50rpx;
}
.df{
    border-bottom:1px solid #eee ;
}
.swiper-box{
    margin-bottom: 250rpx;
}

// pages/user/dingdan.js
//index.js  
//获取应用实例  
var app = getApp();
var common = require("../../utils/common.js");
Page( {  
  data: {  
    winWidth: 0,  
    winHeight: 0,  
    // tab切换  
    currentTab: 0,  
    isStatus:1,//1待付款，2待收货，3已完成
    page:1,
    orderList0:[
      {
        dianming:'二恶烷让发顺丰'
      }
    ],
    orderList2:[],
    orderList3:[],
    orderList4:[],
  },  
  onLoad: function(options) {  
    this.initSystemInfo();
    this.setData({
      currentTab: parseInt(options.currentTab),
    });
    this.setData({
      isStatus: this.getOrderStatus(),
    });
    console.log(options);

    if(this.data.currentTab == 4){
      this.loadReturnOrderList();
    }else{
      this.loadOrderList();
    }
  },  
  getOrderStatus:function(){
    return this.data.currentTab == 0 ? 1 : this.data.currentTab == 2 ?2 :this.data.currentTab == 3 ? 3:0;
  },
  loadOrderList: function(){
    var that = this;
    console.log(this.data);
    wx.request({
      url: app.d.hostUrl + '/ztb/orderZBT/GetOrderZBTList',
      method:'post',
      data: {
        userId:app.d.userId,
        isStatus:that.data.isStatus,
        pageindex:that.data.page,
        pagesize:10,
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        //--init data        
        var data = res.data.data;
        console.log(data);
        that.initOrderList(data);
        switch(that.data.currentTab){
          case 0:
            that.setData({
              orderList0: that.data.orderList0.concat(data),
            });
            break;
          case 2:
            that.setData({
              orderList2: that.data.orderList2.concat(data),
            });
            break;
          case 3:
            that.setData({
              orderList3: that.data.orderList3.concat(data),
            });
            break;
        }
        //endInitData
        console.log(that.data);
      },
    });
  },
  initOrderList:function(data){
    for(var i=0; i<data.length; i++){
      console.log(data[i]);
      var item = data[i];

      item.ImgUrl = app.d.hostImg + item.ImgUrl;
      item.price = item.price/100;
      item.BuyMoney = item.BuyMoney/100;
      item.TotalAmount = item.TotalAmount/100;
      item.TotalMoney = item.TotalMoney/100;
      item.ProductImgUrl = app.d.hostImg + item.ProductImgUrl;
    }
  },
  loadReturnOrderList:function(){
    var that = this;
    console.log(this.data);
    wx.request({
      url: app.d.hostUrl + '/ztb/orderZBT/GetReturnListZBT',
      method:'post',
      data: {
        userId:app.d.userId,
        pageindex:that.data.page,
        pagesize:10,
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        //--init data        
        var data = res.data.data;
        console.log(data);
        that.initOrderList(data);
        that.setData({
            orderList4: that.data.orderList4.concat(data),
          });
        //endInitData
      },
    });
  },
  removeOrder:function(e){
    var that = this;
    var orderId = e.currentTarget.dataset.orderId;
    wx.showModal({
      title: '提示',
      content: '你确认移除吗',
      success: function(res) {

        res.confirm && wx.request({
          url: app.d.hostUrl + '/ztb/orderZBT/ReMoveOrderZBT',
          method:'post',
          data: {
            orderId: orderId,
          },
          header: {
            'Content-Type':  'application/x-www-form-urlencoded'
          },
          success: function (res) {
            //--init data
            var data = res.data;
            console.log(data);
            //todo
            if(data.result == 'ok'){
              //that.data.productData.length =0;
              switch(that.data.currentTab){
                case 0:
                  that.data.orderList0.length = 0;
                  break;
                case 2:
                  that.data.orderList2.length = 0;
                  break;
                case 3:
                  that.data.orderList3.length = 0;
                  break;
              }
              that.loadOrderList();
            }
          },
        });

      }
    });
  },
  // returnProduct:function(){
  // },
  initSystemInfo:function(){
    var that = this;  
  
    wx.getSystemInfo( {
      success: function( res ) {  
        that.setData( {  
          winWidth: res.windowWidth,  
          winHeight: res.windowHeight  
        });  
      }    
    });  
  },
  bindChange: function( e ) {  
  
    var that = this;  
    that.setData( { currentTab: e.detail.current });  
  
  },  
  swichNav: function( e ) {  
  
    var that = this;  
  
    if( this.data.currentTab === e.target.dataset.current ) {  
      return false;  
    } else {  
      that.setData({
        currentTab: parseInt(e.target.dataset.current),
      });
      that.setData( {  
        isStatus: this.getOrderStatus(),
      });

      //没有数据就进行加载
      switch(that.data.currentTab){
          case 0:
            !that.data.orderList0.length && that.loadOrderList();
            break;
          case 2:
            !that.data.orderList2.length && that.loadOrderList();
            break;
          case 3:
            !that.data.orderList3.length && that.loadOrderList();
            break;
          case 4:
            that.data.orderList4.length = 0;
            that.loadReturnOrderList();
            break;
        }
    };
  },
  /**
   * 微信支付订单
   */
  payOrderByWechat: function(event){
    var orderId = event.currentTarget.dataset.orderId;
    this.prePayWechatOrder(orderId);
    var successCallback = function(response){
      console.log(response);
    }
    common.doWechatPay("prepayId", successCallback);
  },

  /**
   * 调用服务器微信统一下单接口创建一笔微信预订单
   */
  prePayWechatOrder: function(orderId){
    var uri = "/ztb/userZBT/GetWxOrder";
    var method = "post";
    var dataMap = {
      SessionId: app.globalData.userInfo.sessionId,
      OrderNo: orderId
    }
    console.log(dataMap);
    var successCallback = function (response) {
      console.log(response);
    };
    common.sentHttpRequestToServer(uri, dataMap, method, successCallback);
  }
})