<import src="../../templates/default-address/default-address.wxml"></import>
<import src="../../templates/item-cell/item-cell.wxml"></import>

<scroll-view scroll-y="true" class="order-detail">
  <template is="default-address" data="{{...address}}"></template>
  <view class="item-list">
    <block wx:for="{{goods}}">
      <template is="item-cell" data="{{...item}}"></template>
    </block>
  </view>

  <view class="item-amount">
    <view>商品总额<text>￥{{order.order_amount}}</text></view>
    <view class="colora0">+运费<text>￥{{order.shipping_price}}</text></view>
    <view>实付款(含运费)<text style="color: #ff2d4b;font-size: 35.15rpx;">￥{{order.total_amount}}</text></view>
    <view class="last-child colora0"><text>订单编号：{{order.order_sn}}</text><text>创建时间：{{order.created_at}}</text></view>
  </view>

  <view class="btn-line" wx:if="{{order.order_status != '订单取消'}}">
    <button hover-class="none" class="btn-solid-red btn-size" catchtap="payOrder">去支付</button>
    <button hover-class="none" class="btn-hollow-gray btn-size" catchtap="cancleOrder">取消订单</button>
  </view>
</scroll-view>

@import "../../templates/default-address/default-address.wxss";
@import "../../templates/item-cell/item-cell.wxss";

.order-detail {
  height: 100%;
  position: relative;
  padding-bottom: 2rpx
}

.item-list {
  padding: 0 18.75rpx;
  background: #fff;
  margin-top: 23.44rpx;
}
.item-amount {
  margin: 23.44rpx 0 150rpx;
  background: #fff;
  padding: 0rpx 18.75rpx;
  font-size: 28.12rpx;
}
.item-amount view {
  border-bottom: 1px solid #efefef;
  padding: 35.15rpx 16.41rpx;
}
.item-amount text {
  float: right;
}
.order-detail .boder-none {
  border: none;
}

.btn-line {
  position: fixed;
  z-index: 100;
  bottom: 0;
  background: #efefef;
  padding: 23.44rpx 0;
  width: 100%;
  font-size: 35.15rpx;
  overflow: hidden;
}
.btn-size {
  width: 182.80rpx;
  float: right;
  margin-right: 16.41rpx;
  padding: 20rpx 15rpx;
  font-size: 36rpx;
  line-height: 36rpx;
}
.order-detail-params{
    float: left;
}

.order-detail-price {
    position: relative;
    float: right;
    width: 92rpx;
}
.order-detail-price text{
    display: block;
}
.order-detail-price .content-amount{
    float: left;
    width: 92rpx;
    text-align: center;
}
.item-amount .last-child {
  border-bottom: none;
}
.item-amount .last-child text {
  display: block;
  float: none;
  margin-bottom: 7rpx;
}
.colora0{
  color: #a0a0a0;
}

import request from '../../lib/request';
import resource from '../../lib/resource';

const app = getApp();
Page({
  data: {
    loading: true
  },
  onLoad({ subOrderSn }) {
    request({ path: `/clientOrderDetail/${subOrderSn}` }).then(({ data }) => {
      let address = { hasData: false };
      address = data.consignee ? {
        hasData: true,
        consignee: data.consignee,
        mobile: data.mobile,
        detail_address: data.detail_address,
        arrowShow: 'display-none'
      } : { hasData: false };
      this.setData({
        address,
        goods: data.goods,
        order: data
      });
    });
  },
  cancleOrder() {
    const outTradeNo = this.data.order.order_sn;
    wx.showModal({
      title: '',
      content: '你是否需要取消订单',
      success(res) {
        const data = {
          out_trade_no: outTradeNo
        };
        if (res.confirm) {
          request({ path: '/abolishment', data, method: 'post' }).then((re) => {
            if (Number(re.statusCode) === 200) {
              wx.navigateTo({
                url: '../orders/orders'
              });
            }
          });
        }
      }
    });
  },
  payOrder() {
    app.globalData.subOrderSn = this.data.order.sub_order_sn;
    app.globalData.price = this.data.order.total_amount;
    resource.getPaySign({ out_trade_no: this.data.order.order_sn, 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);
        }
      });
  }
});