<template>
	<view>
		<view class="card" v-if="current == '200000' ">
			<view class="cardHeader">
				<text class="orderId" v-if="order_status == '0'||order_status == '100000'">订单号：{{order.order_no}}</text>
				<text class="orderId"
					v-if="order_status == '200000'||order_status == '300000'">下单时间：{{order.order_time}}</text>
				<text class="orderType" v-if="order_status=='100000'">待付款</text>
				<text class="orderType" v-if="order_status=='200000'">待收货</text>
				<text class="orderType" v-if="order_status == '200000'||order_status == '300000'">已完成</text>
				<text class="orderType" v-if="order_status == '300000'">已评价</text>
			</view>
			<view class="orderCardInfo" @click="toOrderInfo(order_status, order.order_id)"
				v-for="(orderInfo, index) in orderInfoList" :key="index">
				<!--  -->
				<image :src="orderInfo.img" mode="aspectFill"></image>
				<view class="infoText">
					<view class="orderName">{{orderInfo.wsp_sku_name}}--1</view>
					<view class="orderDescrib">{{orderInfo.wsp_sku_name}}</view>
					<view class="infoText-bottom">
						<view class="markPrice">{{orderInfo.price}}</view>
						<view class="buy-num">X {{orderInfo.num}}</view>
					</view>
				</view>
			</view>
			<view class="payPrice">总额：<text class="priceNum">{{orderObj.all_money}}</text>，优惠：<text class="priceNum">{{orderObj.reduce_all_price}}</text>，实付：<text class="priceNum">{{orderObj.final_money}}</text> </view>
			<!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 -->
			<view class="btns" v-if="order_status == '0'">
				<view class="btn-type1" @click="cancleOrder">取消订单</view>
				<view class="btn-type2" @click="paylog">去支付</view>
			</view>
			<view class="btns" v-if="order_status == '1'">
				<view class="btn-type2">确认收货</view>
			</view>
			<view class="btns" v-if="order_status == '2'">
				<view class="btn-type2" @click="toDetail(orderObj.order_detail.sku_arr[0].shop_wood_id)">再次购买</view>
			</view>

		</view>
		<view class="card" v-if="current == '100000'">
			<view class="cardHeader">
				<text class="orderId">订单号：{{order.order_no}}</text>
				<text class="orderId"
					v-if="order_status == '200000'||order_status == '300000'">下单时间：{{order.order_time}}</text>
				<text class="orderType" v-if="order_status=='100000'">待付款</text>
				<text class="orderType" v-if="order_status=='200000'">待收货</text>
				<text class="orderType" v-if="order_status == '200000'||order_status == '300000'">已完成</text>
				<!-- <text class="orderType" v-if="order_status == '3'">已评价</text> -->
			</view>
			<view class="orderCardInfo" @click="toOrderInfo(order_status, order.order_id)"
				v-for="(orderInfo) in orderInfoList">
				<image :src="orderInfo.img" mode="aspectFill"></image>
				<view class="infoText">
					<view class="orderName">{{orderInfo.wsp_sku_name}}</view>
					<view class="orderDescrib">{{orderInfo.wsp_sku_name}}</view>
					<view class="infoText-bottom">
						<view class="markPrice">{{orderInfo.price}}</view>
						<view class="buy-num">X {{orderInfo.num}}</view>
					</view>
				</view>
			</view>
			<view class="payPrice">总额：<text class="priceNum">{{orderObj.all_money}}</text>，优惠：<text class="priceNum">{{orderObj.reduce_all_price}}</text>，实付：<text class="priceNum">{{orderObj.final_money}}</text> </view>
			<!-- <view class="payPrice">实付：<text class="priceNum">{{orderObj.final_money}}</text> </view> -->
			<view class="btns" v-if="order_status == '100000'">
				<view class="btn-type1" @click="cancleOrder">取消订单</view>
				<view class="btn-type2" @click="paylog">去支付</view>
			</view>
			<view class="btns" v-if="order_status == '200000'">
				<view class="btn-type1">确认收货</view>
			</view>
			<view class="btns" v-if="order_status == '200000'||order_status == '300000'">
				<!-- <view class="btn-type1" v-if="order_status == '200000'" @click="toDetail(order.order_info[0].pid)">确认收货</view> -->
				<view class="btn-type2" @click="toDetail(order.order_info[0].pid)">再次购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MD5Util from '../../../utils/md5'
	import store from "@/store";
	export default {
		data() {
			return {
			orderObj:JSON.parse(this.order.order_data_obj)
			};
		},
		props: {
			/**
			 * 订单数据
			 */
			order: {},
			/**
			 * 当前选择
			 */
			current: String

		},
		created() {
			console.error('order',this.order);
			// let a = ;
			// this.order = JSON.parse(this.order.order_data_obj);
			// console.log(this.order.status );
			// console.log(this.current);
		},
		computed: {
			order_status() {
				return this.order.order_status
			},
			// orderObj(){
				
			// 	return a;
			// },
			orderInfoList() {
				let a = JSON.parse(this.order.order_data_obj);
				console.log('orderInfoList=====>', a)
				// return JSON.parse(this.order.order_info)
				return a.order_detail.sku_arr;
			}
		},
		methods: {
			async paylog() {
				const openid = uni.getStorageSync('openid')
				const uid = this.order.uid;
				//先拿订单详情
				await store.dispatch('orderRead/getOrderInfo', {
					pay_id: this.order.order_id,
					uid: uid,
					openid: openid
				}).then((res) => {
					// console.log(res)
					const {
						data,
						exKeyName: keyName
					} = res.order_info
					const timeStamp = new Date().getTime().toString()
					const total_fee = res.total_fee
					const payId = res.pay_id
					const nonceStr = 'asfafasfasfasfasf'
					// 支付参数
					const fieldSet = {
						openid: openid,
						uid: uid,
						shopid: 0,
						payCate: 2020,
						payMoney: total_fee,
						payWoodId: `fcdj-${uid}-${keyName}`,
						payWoodDesc: '在【非常戴镜】的微信付款凭证',
						nonceStr,
						signType: 'MD5',
						app_uid: 2020,
						timeStamp,
						keyname: keyName,
						billInfo: JSON.stringify(data),
					}
					// 请求后台支付接口
					store.dispatch('order/pay', fieldSet).then(({
						data,
						data2,
						pay_id: payId
					}) => {
						if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
							const stringA =
								`appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
							const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'

							// 微信支付接口
							uni.requestPayment({
								appId: data.appid,
								timeStamp,
								nonceStr,
								total_fee: total_fee,
								package: `prepay_id=${data.prepay_id}`,
								signType: 'MD5',
								paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
								success: (res) => {
									// 支付成功
									uni.showModal({
										content: '支付成功',
										showCancel: false,
									})
									// //修改订单状态 待付款==>待收货
									// store.dispatch("statusConfirm/confirm", {
									//     uid: this.uid,
									//     openid: this.openid,
									//     oldway: "0",
									//     way: "1",
									//     pay_id: payId,
									//     judgeContent: "",
									//     orderInfo: this.orderInfo.order_info
									//   })
								},
								fail: (res) => {
									// 支付失败
									uni.showModal({
										content: '支付失败',
										showCancel: false,
									})
								},
								complete: () => {
									uni.hideLoading()
								},
							})
						} else {
							uni.showModal({
								content: '支付失败',
								showCancel: false,
							})
							console.log('支付失败')
							uni.hideLoading()
						}
					})
					//修改订单状态 待付款==>待收货
					// store.dispatch("statusConfirm/confirm", {
					//     uid: this.uid,
					//     openid: this.openid,
					//     oldway: "0",
					//     way: "1",
					//     pay_id: this.payId,
					//     judgeContent: "",
					//     orderInfo: this.orderInfo.order_info
					//   })
				})
			},

			async cancleOrder(e) {
				const openid = uni.getStorageSync('openid')
				const uid = this.order.uid;
				//先从订单详情中拿到keyname
				await store.dispatch('orderRead/getOrderInfo', {
					pay_id: this.order.pay_id,
					uid: uid,
					openid: openid
				}).then((res) => {
					const keyname = res.order_info.keyname
					uni.showModal({
						title: "提示",
						content: "现在取消，订单不可恢复哦，确认取消吗？",
						success: function(res) {
							if (res.confirm) {
								store.dispatch("cancelOrder/cancel", {
									keyname: keyname,
									uid: uid,
									openid: openid
								}).then((res) => {
									console.log(res)
									if (res.code == 1) {
										store.dispatch("myOrder/getList", {
											way: ""
										});
									} else {
										uni.showToast({
											title: '取消失败，服务器错误!',
											icon: 'none'
										})
									}
								});
							} else if (res.cancel) {
								console.log("用户点击取消");
							}
						}
					});
				});

			},
			toDetail(pid) {
				console.log('pid', pid)
				uni.navigateTo({
					url: '../details/details?pid=' + pid,
					fail: (res) => {
						console.log(res)
					},
				});
			},
			toRefundment() {
				uni.navigateTo({
					url: '../refundment/refundment',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toOrderInfo(status, payId) {
				console.log(status, payId)
				switch (status) {
					// 0待付款  1待收货  2已收货 3 已评价
					case '100000':
						uni.navigateTo({
							url: `../myOrderPaying/myOrderPaying?status=` + status + `&payId=` + payId,
							fail(errMsg) {
								console.log(errMsg)
							}
						})
						break;
					case '200000':
						uni.navigateTo({
							url: `../myOrderPaying/myOrderPaying?status=` + status + `&payId=` + payId,
							fail(errMsg) {
								console.log(errMsg)
							}
						})

						break;
						// case '200000' || '300000':
						// 	uni.navigateTo({
						// 		url: `../myOrderPaying/myOrderPaying?status=` + status + `&payId=` + payId,
						// 		fail(errMsg) {
						// 			console.log(errMsg)
						// 		}
						// 	})
						// 	break;
					default:
						break;

				}
			}
		}
	}
</script>

<style lang="scss">
	.card {
		width: 670rpx;
		// height: 478rpx;
		background: #ffffff;
		box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06);
		border-radius: 8px;
		border-radius: 8px;
		margin-top: 20rpx;
		padding: 40rpx;
		box-sizing: border-box;

		.cardHeader {
			width: 100%;
			height: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.orderId {
				font-size: 12px;
				color: #999999;
			}

			.orderType {
				font-size: 14px;
				color: #ff6b4a;
			}
		}

		.orderCardInfo {
			width: 100%;
			height: 188rpx;
			display: flex;
			flex-direction: row;
			border: 1px #000 solid;
			justify-content: space-between;
			align-items: center;
			margin-top: 40rpx;

			image {
				height: 188rpx;
				width: 188rpx;
				margin-right: 24rpx;
			}

			.infoText {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
				height: 188rpx;
				width: 368rpx;
			}

			.orderName {
				font-size: 14px;
				color: #333333;
				display: -webkit-box;
				overflow: hidden;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.orderDescrib {
				font-size: 12px;
				color: #999999;
				display: -webkit-box;
				overflow: hidden;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.infoText-bottom {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				width: 100%;

				.markPrice {
					font-size: 14px;
					color: #ff6b4a;
					margin-right: 20rpx;
				}

				.buy-num {
					font-size: 12px;
					color: #999999;
				}
			}
		}

		.payPrice {
			text-align: right;
			margin: 20rpx 0;
			font-size: 14px;
			color: #333333;

			.priceNum {
				font-size: 14px;
				color: #ff6b4a;
			}
		}

		.btns {
			display: flex;
			justify-content: flex-end;
			// justify-content: justify-content-between;
			align-items: center;
			margin: 10rpx;

			// margin-left: auto;
			// border: 1px solid #000;
			.btn-type1 {
				height: 48rpx;
				width: 156rpx;
				border: 1px solid #ff6b4a;
				// border: 1px solid #000;
				border-radius: 12px;
				border-radius: 12px;
				text-align: center;
				line-height: 48rpx;
				font-size: 12px;
				color: #ff6b4a;
			}

			.btn-type2 {
				height: 48rpx;
				width: 140rpx;
				background: #ff6b4a;
				// border: 1px solid #000;
				border-radius: 12px;
				border-radius: 12px;
				text-align: center;
				line-height: 48rpx;
				font-size: 12px;
				color: #ffffff;
				margin-left: 20rpx;
			}
		}
	}
</style>