<template>
	<view>
		<status-container titlet="订单详情" returnc="#FFFFFF">
			<view slot="content" style="margin-top: -20rpx;" v-if="orderDetail">
				<view class="bacf disjcac fc pad-sx40 boxshow2">
					<view v-if="orderDetail.status=='waiting'" class="fon28 mar-x20">待付款</view>
					<view v-if="orderDetail.status=='shipped' || orderDetail.status=='paid'" class="fon28 mar-x20">待收货</view>
					<view v-if="orderDetail.status=='completed'" class="fon28 mar-x20">已完成</view>
					<view @tap="goPay" v-if="orderDetail.status=='waiting'" class="fon26 radius30 disjcac" style="background-color:#f37717;border: 2rpx solid #f37717;color: #FFFFFF;width: 204rpx;height: 62rpx;">去付款</view>
					<view @tap="confirmReceipt(orderDetail.id)" v-if="orderDetail.status=='shipped' || orderDetail.status=='paid'" class="fon26 radius30 disjcac" style="border: 2rpx solid #f37717;color: #f37717;border-color:#f37717;width: 204rpx;height: 62rpx;">确认收货</view>
				</view>
				<view class="bacf mar-s20 pad-x20 boxshow2">
					<view @tap="$toolAll.tools.goPage(`/pagesB/order-detail/order-detail?id=${0}`)" class="bbot disac pad30 col26" v-for="(item,index) in orderDetail.skus" :key="index">
						<image class="flexs mar-y20" :src="item.spu_cover" style="width: 192rpx;height: 134rpx;" mode="aspectFill" lazy-load></image>
						<view class="fon24 width100 disjbac fc" style="height: 134rpx;">
							<view class="dis width100">
								<view class="clips2 width100">{{item.spu_name}}</view>
								<view class="mar-z50 flexs">x{{item.num}}</view>
							</view>
							<view class="width100 disje">
								<view class="">实付：￥{{item.price}}</view>
							</view>
						</view>
					</view>
					<view class="col26 fon24 line-h46 pad-zy30 pad-sx20 bbot">
						<view class="">订单编号：<span style="color:#707070;">{{orderDetail.coding}}</span></view>
						<view class="">下单时间：<span style="color:#707070;">{{orderDetail.created_at}}</span></view>
						<view class="">支付时间：<span style="color:#707070;">{{orderDetail.paid_at || '-'}}</span></view>
						<view class="">快递公司：<span style="color:#707070;">{{orderDetail.express_name || '-'}}</span></view>
						<view class="">快递单号：<span style="color:#707070;">{{orderDetail.express_number || '-'}}</span></view>
					</view>
					<view class="col26 fon24 line-h46 pad-zy30 pad-sx20 bbot">
						<view class="disjbac">订单总额<span class="colb">￥{{orderDetail.original_price}}</span></view>
						<view class="disjbac">运费<span class="colb">+￥{{orderDetail.freight}}</span></view>
						<!-- <view class="disjbac">优惠券抵扣<span class="colb">-￥{{orderDetail.coupon_price}}</span></view> -->
						<view class="disjbac">积分抵扣<span class="colb" >-￥{{orderDetail.score_deduct_price}}</span></view>
					</view>
					<view class="col26 fon24 line-h46 pad-zy30 pad-s30 pad-x20">
						<view class="disjbac">实付金额<span class="colb">￥{{orderDetail.price}}</span></view>
					</view>
				</view>
			</view>
		</status-container>
		<dynamic-frame ref="refFrame" :showType="showType" :tipsTitle="tipsTitle"></dynamic-frame>
	</view>
</template>

<script>
	import dynamicFrame from '@/components/dynamic-frame.vue';
	export default {
		components:{dynamicFrame},
		data() {
			return {
				orderDetail:'',
				flag:true,
				showType:-1,
				tipsTitle:'提示信息',
			}
		},
		onLoad(op) {
			this.getOrderDetail(op.id);
		},
		methods: {
			// 按钮点击
			clickBtn(index){
				this.tipsTitle = index==2?'物流信息':'提示信息';
				this.showType = [2,3,1][index];
				this.$refs.refFrame.ifLogistics = true;
				this.$refs.refFrame.ifAnimated = true;
			},
			// 获取订单详情
			getOrderDetail(id){
				this.$requst.get('/api/user/order-detail',{id}).then(res=>{
					if(res.code==0){
						this.orderDetail = res.data;
					}
				})
			},
			// 确认收货
			confirmReceipt(id){
				this.$requst.post('/api/order/accepted',{order_id:id}).then(res=>{
					if(res.code==0){
						this.clickBtn(0);
						this.getOrderDetail(id);
					}
				})
			},
			// 去支付
			goPay(){
				if(this.flag){
					this.flag = false;
					this.$requst.post('/api/order/pay',{order_coding:this.orderDetail.coding}).then(res=>{
						if(res.code==0){
							let info = res.data;
							if(info.status!='completed'){
								uni.requestPayment({
									provider: 'wxpay',
									appId:info.payment_params.appId,//appId
									timeStamp: info.payment_params.timeStamp,//时间戳
									nonceStr: info.payment_params.nonceStr,//随机字符串
									package: info.payment_params.package,//package
									signType: info.payment_params.signType,//MD5
									paySign: info.payment_params.sign,//签名
									success:(result)=> {
										this.$requst.post('/api/order/paid',{order_coding:this.orderDetail.coding}).then(res=>{
											if(res.code==0){
												this.clickBtn(1);
												this.getOrderDetail(this.orderDetail.id);
											} else this.$toolAll.tools.showToast(res.msg);
										})
									},
									fail:()=> {
										this.$toolAll.tools.showToast('支付已取消o(╥﹏╥)o');
									},
									complete:()=> {
										this.flag = true;
									}
								});
							} else {
								this.$toolAll.tools.showToast('支付成功(*^▽^*)');
								setTimeout(()=>{
									uni.navigateTo({
										url:'/pagesA/my-order/my-order'
									})
								},1000)
							}
						} else {
							this.flag = true;
						}
					})
				}
			}
		}
	}
</script>

<style></style>
