<import src="../../templates/toast/toast.wxml" />
<template name="order-cell">
    <view class="order-cell">
        <view class="cell-status">
        {{refund_status==="没有售后" ? order_status : "售后处理中"}}
        </view>
        <navigator url="../order-detail/order-detail?subOrderSn={{sub_order_sn}}" hover-class="none" class="cell-item">
            <view class="{{goods.length===1?'':'hide'}}">
                <image class="good-thumb" src="{{goods[0].thumb_url}}" alt="item"/>
                <view class="item-content">
                    <view class="content-name">{{goods[0].goods_name}}</view>
                    <view class="content-attr">{{goods[0].goods_attr}}</view>
                    <view class="content-count">￥{{goods[0].sum_price}}<view class="content-amount">×{{goods[0].goods_number}}</view></view>
                </view>
            </view>
            <scroll-view scroll-x="true" class="{{goods.length===1?'hide':''}}">
                <view style="display:inline-block;" wx:for="{{goods}}"><image class="good-thumb" src="{{item.thumb_url}}"></image></view>
            </scroll-view>
        </navigator>
        <view class="cell-count">
            <view class="count-amount">共{{goods.length}}件商品</view>
            <view class="count-price">￥{{total_amount}}</view>
            <view class="count-carriage">运费：<text>￥{{shipping_price}}</text></view>
        </view>
        <view class="cell-btn" hidden="{{order.isButtonShow}}">
            <!-- <button class="btn-order btn-solid-red">去支付</button> 
            <button class="btn-order btn-hollow-gray" data-order-id="{{order_sn}}" bindtap="cancalOrder">取消订单</button> -->

            <button class="btn-order btn-solid-red" wx:if="{{ order.orderStatus==='待支付' }}" bindtap="payOrder" data-order-sn="{{order.orderSn}}">去支付</button>

            <button class="btn-order btn-hollow-gray" wx:if="{{ order.orderStatus==='待支付' }}" bindtap="cancelOrder" data-order-sn="{{order.orderSn}}">取消订单</button>

            <button class="btn-order btn-hollow-gray" wx:if="{{ order.orderStatus==='待发货'&&refund_status === '没有售后' }}" bindtap="drawbackOrder" data-order-sn="{{order.subOrderSn}}">申请退款</button>

            <button class="btn-order btn-hollow-gray" wx:if="{{ order.orderStatus==='待收货' }}" bindtap="logistics" data-order-sn="{{order.subOrderSn}}">查看物流</button>

            <button class="btn-order btn-solid-red" wx:if="{{ order.orderStatus==='待收货' }}" bindtap="confirmOrder" data-order-sn="{{order.subOrderSn}}">确认收货</button>

            <button wx:if="{{ order.orderStatus==='交易成功'||order.orderStatus==='交易关闭'||order.orderStatus==='订单关闭'}}" bindtap="order.deleteOrder({ subOrderSn:order.data.sub_order_sn })">删除订单</button>
        </view>
    </view>
</template>

<view class="nav-header">
    <view wx:for="{{navs}}" class="nav-cell {{item.alias==activeNav?'active':''}}" bindtap="changeList" data-alias="{{item.alias}}">{{item.text}}</view>
</view>

<view class="orders-wrap" hidden="{{loading}}">
    <scroll-view scroll-y="true" class="orders">
        <view class="order-list {{orderList.length===0?'hide':''}}">
            <block wx:for="{{orderList}}">
                <template is="order-cell" data="{{...item}}"></template>
            </block>
        </view>
        <view class="empty {{orderList.length===0?'':'hide'}}">
            <image class="empty-img" src="images/empty.png"></image>
            <view>您还没有相关的订单</view>
            <view>可以去看看有哪些想买的</view>
            <navigator open-type="switchTab" url="../home/home" hover-class="none" class="btn-to-home btn-solid-red" >随便逛逛</navigator>
        </view>
    </scroll-view>
     <template is="toast" data="{{...toast}}" />
</view>
<loading hidden="{{!loading}}">正在加载中...</loading>

.hide {
    display: none;
}
.orders-wrap {
    font-size: 28.12rpx;
    height: 100%;
}
.orders {
    height: 100%;
}

.nav-header {
    font-size: 28.12rpx;
    display: -webkit-box;
    text-align: center;
    background: #fff;
    padding: 0 16.41rpx;
    height: 100.77rpx;
    line-height: 100.77rpx;
}
.nav-cell {
    -webkit-box-flex: 1;
}
.nav-cell.active {
    color: #ff4b2d;
    border-bottom: #ff4b2d 4.69rpx solid;
}

.order-cell {
    margin-top: 23.44rpx;
    background: #fff;
    padding: 0 16.41rpx;
    overflow: hidden;
}
.cell-status {
    text-align: right;
    padding: 23.44rpx 18.74rpx;
    color: #ff2d4b;
}
.cell-item {
    padding-bottom: 35.15rpx;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    height:175.77rpx;
}
.item-content {
    margin-left: 212.35rpx;
    margin-right: 17.84rpx;
    height: 175.77rpx;
    position: relative;
}
.content-name {
    font-size: 23.44rpx;
    line-height: 32.81rpx;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.content-attr {
    margin-top: 11.72rpx;
    font-size: 23.44rpx;
    color: #a0a0a0;
    line-height: 32.81rpx;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.content-count {
    position: absolute;
    bottom: 0;
    overflow: hidden;
    width: 100%;
}
.content-amount {
    float: right;
}
.cell-count {
    border-top: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
    overflow: hidden;
    padding: 23.44rpx 18.74rpx;
}
.count-amount {
    float: left;
}
.count-carriage {
    float: right;
}
.count-price {
    float: right;
    margin-left: 28.12rpx;
    color: #ff2b4d;
}
.count-price::before {
    content: "实付：";
    color: #000;
}
.cell-btn {
    padding: 17.58rpx 18.74rpx;
    overflow: hidden;
}

.empty {
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 28.12rpx;
    color: #a0a0a0;
    line-height: 48rpx;
}
.empty-img {
    width: 187.49rpx;
    height: 187.49rpx;
    margin-top: 164.05rpx;
    margin-bottom: 23.44rpx;
}
.btn-to-home {
    margin-top: 35.15rpx;
    width: 337.48rpx;
    height: 79.68rpx;
    line-height: 79.68rpx;
    border-radius: 11.72rpx;
    display: inline-block;
}

import request from '../../lib/request';
import resource from '../../lib/resource';
import serviceData from '../../data/config';
import Promise from '../../lib/promiseEs6Fix';


const app = getApp();
Page({
  data: {
    loading: false,
    activeNav: 'all',
    navs: [{
      text: '全部',
      alias: 'all'
    }, {
      text: '待付款',
      alias: 'unpaid'
    }, {
      text: '待发货',
      alias: 'undelivered'
    }, {
      text: '待收货',
      alias: 'unreceived'
    }],
    orderList: []
  },
  onLoad(options) {
    const that = this;
    if (options.t) {
      this.setData({
        activeNav: options.t
      });
    }
    this.getList().then((res) => {
      that.setOrderData(res.data);
      that.setData({
        orderList: res.data,
        loading: false
      });
    });
  },
  setOrderData(data) {
    data.forEach((itm) => {
      itm.order = {
        orderStatus: itm.order_status,
        orderSn: itm.order_sn,
        subOrderSn : itm.sub_order_sn,
        isButtonHidden : itm.order_status == "待支付" ? true: false,
      };
    });
    return data;
  },
  changeList(e) {
    const that = this;
    const alias = e.target.dataset.alias;

    if (alias !== this.data.activeNav) {
      this.setData({
        activeNav: e.target.dataset.alias,
        loading: true
      });
      this.getList().then((res) => {
        that.setOrderData(res.data);
        that.setData({
          orderList: res.data,
          loading: false
        });
      });
    }
  },
  getList() {
    const data = {
      type: this.data.activeNav,
      per_page: 10
    };
      //模拟请求数据
      var $promise = new Promise(function(resolve,reject) {
          resolve({statusCode:200, data:serviceData.orderData});
      });
      return $promise;
    return request({ path: '/clientOrder', data });
  },
  cancelOrder(e) {
    const that = this;
    console.log(that)
    const orderSn = e.target.dataset.orderSn;
    wx.showModal({
    content: '你是否需要取消订单',
    showCancel: true,
    success: (res) => {
       if(res.confirm == 0) {
          return;
        }
        resource.cancalOrder(orderSn).then((res) => {
           if (res.statusCode === 200 ) {
              this.data.orderList.forEach((item,key) => {
              if(item.order_sn == orderSn && that.data.activeNav != "all") {
                  this.data.orderList.splice(key, 1);
              } else {
                 item.order_status = '订单取消';
              }
             })
              resource.showTips(that, '订单取消成功');
              this.setData({orderList :this.setOrderData(this.data.orderList)});

           } else {
              resource.showTips(that, '订单取消失败');
           }
        });
      }
    });
    // resource.cancalOrder(orderSn).then((res) => {
    //   console.log(res);
    //   if (res.statusCode === 200) {
    //     resource.successToast(() => {
    //       that.setOrderData(res.data);
    //       that.setData({
    //         orderList: res.data
    //       });
    //     });
    //   }
    // });
  },
  drawbackOrder(e) {
    const that = this;
    const orderSn = e.target.dataset.orderSn;
    wx.showModal({
    content: '亲，你是否确定退款',
    showCancel: true,
    success: (res) => {
       if(res.confirm == 0) {
          return;
        }
        resource.drawbackOrder(orderSn).then((res) => {
          if (res.statusCode === 200) {
            this.data.orderList.forEach((item,key) => {
              if(item.order_sn == orderSn) {
                  item.refund_status = "待审核";
              }
            })
            resource.showTips(that, '退款操作成功');
            this.setData({orderList :  this.data.orderList});
          } else {
             resource.showTips(that, '退款操作失败');
          }
        });
        
      }
    });
  },
   confirmOrder(e) {
    const that = this;
    console.log(that)
    const orderSn = e.target.dataset.orderSn;
    wx.showModal({
    content: '确定收货',
    showCancel: true,
    success: (res) => {
       if(res.confirm == 0) {
          return;
        }
        resource.confirmOrder(orderSn).then((res) => {
           if (res.statusCode === 200 ) {
              this.data.orderList.forEach((item,key) => {
              if(item.order_sn == orderSn && that.data.activeNav != "all") {
                  this.data.orderList.splice(key, 1);
              } else {
                 item.order_status = '交易成功';
              }
             })
              resource.showTips(that, '确认收货成功');
              this.setData({orderList :this.setOrderData(this.data.orderList)});

           } else {
              resource.showTips(that, '确认收货失败');
           }
        });
      }
    });
   },
  payOrder(e) {
    const orderSn = e.target.dataset.orderSn;
    resource.getPaySign({ out_trade_no: orderSn, AppID: app.globalData.appId })
      .then((payRes) => {
        if (Number(payRes.statusCode) === 200) {
          const wechatData = payRes.data.payment;
          wx.requestPayment({
            appId: wechatData.appId,
            timeStamp: wechatData.timeStamp,
            nonceStr: wechatData.nonceStr,
            package: wechatData.package,
            signType: 'MD5',
            paySign: wechatData.paySign,
            success(res) {
              if (res.errMsg === 'requestPayment:ok') {
                app.globalData.type = 'success';
                wx.navigateTo({
                  url: '../result/result'
                });
              } else if (res.errMsg === 'requestPayment:cancel') {
                app.globalData.type = 'fail';
                wx.navigateTo({
                  url: '../orders/orders?t=unpaid'
                });
              }
            },
            fail() {
            },
            complete(res) {
              console.log(res);
            }
          });
        } else {
          this.setData({
            toast: {
              toastClass: 'yatoast',
              toastMessage: '获取支付验证错误!'
            }
          });
          setTimeout(() => {
            this.setData({
              toast: {
                toastClass: '',
                toastMessage: ''
              }
            });
          }, 2000);
        }
      });
  }
});