<template>
	<view class="">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar :title="titleStat"></z-nav-bar>
		<view class="deliverCntent" v-if="orderType == 2">
			<view v-if="deliverDetails">
				<view v-for="(item, index) in deliverDetails[0].Traces">
					<view class="flexbox" v-if="index == 0">
						<view class="img_icon "><img width="20px" src="../../static/icon/icon-truck.svg" alt=""></view>
						<view class="wuliu">
							<view class="content">{{item.AcceptStation}}</view>
							<view class="time">{{item.AcceptTime}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flexbox moreBtnF" @click="onPageJump(orderID)"><span class="moreBtn"> > </span></view>
		</view>
		<view class="adDefault" v-if="orderContet.products!=''">
			<view class="defalTop">
				<text class="userName">
					{{orderContet.shippingUser}}
				</text>
				<text class="userTel">
					{{orderContet.userPhone}}
				</text>
			</view>
			<view class="defalBottom">
				<text class="userAddress">
					{{orderContet.province}} {{orderContet.city}} {{orderContet.district}} {{orderContet.address}}
				</text>
			</view>
			<u-icon name="map" color="#aaa" size="25" class="defalLeft"></u-icon>
		</view>

		<view class="orderList">
			<view class="orderItem">
				<view class="orderContent" v-for="(item,index) in orderContet.products" :key="index"
					@click="goDetail(item.productId)" v-if="orderContet.products!=''">
					<image :src="item.image" mode=""></image>
					<view class="itemJian">
						<view class="orderTitle">
							<text>{{item.productName}}</text>
						</view>
						<view class="orderPrice">
							￥<text style="font-weight: bold;">{{item.productPrice}}</text><br>
							<text style="color: #bbbbbb;font-size: 20rpx;margin-right: 10rpx;">X</text>
							<text style="color: #bbbbbb;">{{item.quantity}}</text>
						</view>
						<br clear="both">
					</view>
					<br clear="both">
				</view>
				<view class="orderContent" v-if="orderContet.products==''">
					<image src="../../static/icon/oder_chong.png" mode="" style="height: 150rpx;"></image>
					<view class="itemJian">
						<view class="orderTitle">
							<text>充值</text>
						</view>
						<view class="orderPrice">
							￥<text style="font-weight: bold;">{{orderContet.realMoney}}</text>
						</view>
						<br clear="both">
					</view>
					<br clear="both">
				</view>
				<view class="orderallpri">
					<span style="color: #666;margin-right: 10rpx;float: left;">商品总价 : </span>
					<span>￥</span>{{orderContet.orderMoney}}
				</view>
				<view class="orderReal">
					<span style="color: #666;margin-right: 10rpx;float: left;">运费 : </span>
					<span>￥</span>{{orderContet.shippingMoney}}
				</view>
				<view class="orderReal">
					<span style="color: #666;margin-right: 10rpx;float: left;">优惠券 : </span>
					<b style="color: #dd3c0c;"><span>-￥</span>{{orderContet.districtMoney}}</b>
				</view>
				<view class="orderReal">
					<span style="color: #666;margin-right: 10rpx;float: left;">实付款 : </span>
					<b style="color: #dd3c0c;"><span>￥</span>{{orderContet.realMoney}}</b>
				</view>
				<view class="orderYunf">
					<span style="color: #666;margin-right: 10rpx;float: left;">订单编号 : </span>
					<text style="font-size: 24rpx;color: #666;">{{orderContet.orderSn}}</text>
				</view>
				<view class="orderReal">
					<span style="color: #666;margin-right: 10rpx;float: left;">创建时间 : </span>
					<text style="font-size: 24rpx;color: #666;">{{orderContet.createTime}}</text>
				</view>
				<view class="orderOper">
					<view class="opFix opShou" @click="OverOrder" v-if="orderContet.orderStatus==2">确认收货</view>
					<view v-if="orderContet.orderStatus==0">
						<view class="opFix" @click="canceOrder">取消订单</view>
						<view class="opCan" @click="goPay">去支付</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $http from '@/config/requestConfig.js';
	import {
		setPay,
		setPayAssign
	} from '@/config/utils';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				logisticsData: [], // 快递信息列表
				titleStat: '',
				orderID: 0,
				orderType: '',
				orderContet: {},
				deliverDetails: [{
					Traces: []
				}], // 物流详情信息全部
				deliverDetailsLength: null
			}
		},
		onLoad(e) {
			this.orderID = e.orderId
			this.orderType = e.orderType
		},
		onShow() {
			this.getOrderList()
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			onPageJump(item) {
				uni.navigateTo({
					url: "./deliverDetail?objId=" + item
				})
			},
			OverOrder() { // 确认收货
				uni.showModal({
					title: '提示',
					content: '确认收货？',
					success: res => {
						let data = {
							orderId: this.orderID,
							orderStatus: '3'
						}
						if (res.confirm) {
							uni.showLoading()
							$http.request({
								url: "book/buyorder/update",
								method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
								data,
								header: { //默认 无 说明：请求头
									'Content-Type': 'application/json'
								},
							}).then(res => {
								if (res.code == 0) {
									uni.hideLoading()
									uni.showToast({
										title: '收货成功',
										icon: 'success',
										duration: 1000
									})
									this.getOrderList()
								}
							})
						} else if (res.cancel) {}
					}
				});
			},
			// 切换订单状态
			orderTabCLi(e) {
				this.orderListTab = e
			},
			// 获取订单列表
			getOrderList() {
				this.$http
					.post(`book/buyorder/appGetOrderInfo/${this.orderType}?orderId=${this.orderID}`)
					.then(res => {
						this.orderContet = res.buyOrder
						if (this.orderContet.orderStatus == 0) {
							this.titleStat = '待支付'
						} else if (this.orderContet.orderStatus == 1) {
							this.titleStat = '待发货'
						} else if (this.orderContet.orderStatus == 2) {
							this.titleStat = '待收货'
						} else if (this.orderContet.orderStatus == 3) {
							this.titleStat = '已完成'
						}
						if (this.orderType == 2) {
							this.getdeliverDetails()
						}
					})
			},
			// 获取物流
			getdeliverDetails() {
				this.$http
					.post(`/book/buyorder/queryFMS?orderId=${this.orderID}`)
					.then(res => {
						console.log(res,'物流信息')
						if (res && res.code === 0) {
							// console.log(res, '物流信息')						
							res.rntStr.forEach(item => {
								item.Traces = item.Traces.reverse()
							})
							this.deliverDetails = res.rntStr
							this.deliverDetailsLength = this.deliverDetails[0].Traces.length
						} else {

						}
					})
			},
			// 取消订单
			canceOrder() {
				uni.showModal({
					title: '提示',
					content: '确定要取消订单吗？',
					confirmText: "取消订单",
					cancelText: "考虑一下",
					confirmColor: '#c96713',
					cancelColor: '#555',
					success: res => {
						if (res.confirm) {
							this.$http
								.post('book/buyorder/appDelete?orderId=' + this.orderContet.orderId)
								.then(res => {
									uni.showToast({
										icon: 'none',
										title: '取消订单成功'
									})
									uni.navigateTo({
										url: './orderList'
									});
								})
						}
					}
				});
			},


			// 支付
			goPay() {
				setPay({
					typePay: 'alipay',
					subject: 'order',
					totalAmount: this.orderContet.realMoney,
					type: 2,
					relevanceoid: this.orderContet.orderSn,
					customerId: this.userInfo.id,
				}, res => {
					if (res.success) {
						uni.showToast({
							title: "支付成功"
						});
					} else {
						uni.showToast({
							title: "支付失败",
							icon: "none",
							image: '../../static/icon/ic_close.png'
						});
					}
					this.getOrderList()
				})
			},

			// 商品内容跳转
			goDetail(id) {
				uni.navigateTo({
					url: './commodityDetail?id=' + id
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.opShou {
		border-color: $uni-color-success !important;
	}

	.adDefault {
		padding: 30rpx 50rpx 30rpx 100rpx;
		background-color: #fff;
		border-top: 1px solid #eee;
		border-bottom: 2px dashed #b2e9d7;
		margin: 0 0 5rpx 0;
		position: relative;

		.defalTop {
			.userName {
				font-size: 35rpx;
				font-weight: bold;
				margin-right: 30rpx;
			}

			.userTel {
				font-size: 25rpx;
				color: #888;
			}


		}

		.defalBottom {
			.userAddress {
				font-size: 32rpx;
				line-height: 40rpx;
			}
		}

		.defalLeft {
			position: absolute;
			left: 30rpx;
			top: 55rpx;
		}


	}

	.orderList {
		padding: 20rpx;

		.orderItem {
			padding: 30rpx 10rpx 30rpx 30rpx;
			background-color: #fff;
			border-radius: 30rpx;
			margin-bottom: 30rpx;

			.orderContent {
				margin-bottom: 20rpx;

				image {
					width: 150rpx;
					height: 180rpx;
					margin-right: 20rpx;
					float: left;
				}

				.itemJian {
					float: left;
					width: 470rpx;

					.orderTitle {
						font-weight: bold;
						font-size: 30rpx;
						margin: 0 0 20rpx 0;
						float: left;
						width: 410rpx;
					}

					.orderPrice {
						font-size: 28rpx;
						float: right;
						width: 60rpx;
						text-align: right;
						line-height: 40rpx;
					}
				}


			}

			.orderallpri {
				text-align: right;
				border-top: 1px solid #eee;
				margin: 40rpx 20rpx 0 0;
				padding: 30rpx 0 0 0;
				font-size: 28rpx;
			}

			.orderReal {
				text-align: right;
				font-size: 28rpx;
				margin: 5rpx 20rpx 0 0;
				padding: 28rpx 0 0 0;
			}

			.orderYunf {
				text-align: right;
				border-top: 1px solid #eee;
				margin: 35rpx 20rpx 0 0;
				padding: 30rpx 0 0 0;
				font-size: 28rpx;
			}

			.orderOper {
				text-align: right;
				margin: 40rpx 20rpx 0 0;

				view {
					margin-left: 20rpx;
					padding: 10rpx 0;
					display: inline-block;
					width: 160rpx;
					font-size: 25rpx;
					text-align: center;
				}

				.opFix {
					color: #555;
					border: 1px solid #ddd;
					border-radius: 30rpx;
				}

				.opCan {
					color: #c96713;
					border: 1px solid #eba00b;
					border-radius: 30rpx;
				}
			}
		}
	}

	.deliverCntent {
		padding: 32rpx;
		position: relative;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-top: 1px solid #eee;
		font-size: 28rpx;
	}

	.flexbox {
		display: flex;
	}

	.img_icon {
		padding-right: 5px;
	}

	.moreBtnF {
		align-items: center;
		padding: 30rpx;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;
		background-color: rgba(255, 255, 255, .9);
		// background: -webkit-linear-gradient(left, rgba(255,255,255,1)0%,rgba(255,255,255,0.5)66%, rgba(255,255,255,255)99%);/* Safari、Chrome */

		// background:linear-gradient(rgba(255,255,255,255),rgba(255,255,255,1));/* 默认渐变位置从上往下 */	
	}

	.wuliu {
		.time {
			color: #888;
		}

		.moreBtn {
			display: inline-block;
			width: 50px;
		}
	}
</style>
