<template>
	<view>
		<view class="AggOrdListBox">
			<view class="visaList row" v-for="(item,index) in g" :key="index" @click="goDetails(item)"
				:class="[item.orderStatus==4?'active':'']">
				<view class="visaListL">
					<image v-if="item.goodsPic&&item.goodsPic!=''" mode="aspectFill" :src="item.goodsPic" />
					<image v-else mode="aspectFill"
						src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/defaultHotelImg.png" />
					<text class="visaListLText">
						{{ item.goodTypeEnum.desc }}
					</text>
				</view>
				<view class="visaListR col column">
					<view class="visaListTitle">{{ item.goodsName }}</view>
					<view class="visaListText row">
					</view>
					<view class="col"></view>
					<view class="visaListNum row">
						<view class="visaListNumR">
							<text style="font-size: 20rpx;">CNY</text>
							<text class="price-Num">
								{{parseFloat(item.totalPrice-item.preferentialPrice).toFixed(2)}}
							</text>
							<text class="price-stuff" style="font-size: 20rpx;color: rgba(164, 164, 164, 1)">元</text>
						</view>
						<view class="visaListNumL row items-center">
							<!-- #ifdef MP-DI -->
							<template v-if="item.orderStatus!=5">
								{{ item.orderStatusInfo.desc }}
							</template>
							<template v-else>{{ item.afterSalesOrderStatusStr }}</template>
							<!-- #endif -->
							<!-- #ifdef MP-AG -->
							{{ item.orderStatusInfo.desc }}
							<!-- {{ item.orderStatusStr=='取消'?'已取消':item.orderStatusStr }}-->
							<!-- #endif -->
						</view>
					</view>
					<view class="row">
						<view class="col"></view>
						<!-- #ifdef MP-DI -->
						<view class="jz_Zailai" @click.stop="" style="width: 110rpx;">
							客服
							<button class="AggOrdListH-RBut" open-type="contact" show-message-card="true"></button>
						</view>
						<!-- #endif -->
						<view class="row">
							<!-- #ifdef MP-DI -->
							<view v-if="item.orderStatus==1||item.orderStatus==2" class="jz_Zailai"
								style="width: 110rpx;margin-left: 10rpx;" @click.stop="goCancelZK(item)">取消</view>
							<view v-if="item.orderStatus==1" class="jz_Zailai jz_ZailaiZF"
								style="width: 150rpx;margin-left: 10rpx;" @click.stop="submitGetCodeByOrderNo(item)">
								立即支付</view>
							<view v-if="item.orderStatus!=1" style="margin-left: 10rpx;" class="jz_Zailai"
								@click.stop="AnotherOrder(item)">再来一单</view>
							<!-- #endif -->
							<!-- #ifdef MP-AG -->
							<view v-if="item.income == 0&&item.orderStatus==1" class="jz_Zailai"
								style="width: 110rpx;margin-left: 10rpx;" @click.stop="goCancel(item)">取消</view>
							<view v-else class="jz_Zailai" style="margin-left: 10rpx;" @click.stop="AnotherOrder(item)">
								再来一单</view>
								<!-- #endif -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<cancelPrompt v-if="showModal" :showModal="showModal" @cancel="cancelModal" @success="cancelSuccess" type="1"
			:orderNo="currentData.orderNo"></cancelPrompt>
	</view>
</template>
<script>
	import cancelPrompt from "@/components/cancelPrompt/cancelPrompt.vue";
	export default {
		props: ['orders'],
		components: {
			cancelPrompt
		},
		data() {
			return {
				g: [],
				submitCancel: false,
				submit: false,
				orderInfo: null,
				showModal: false,
				currentData: null,
			}
		},
		watch: {
			orders: {
				handler(newVal, oldVal) {
					this.g = newVal
				},
				deep: true,
			}
		},
		mounted() {

		},
		methods: {
			cancelSuccess() {
				this.$emit('research', 5)
			},
			submitGetCodeByOrderNo(item) {
				uni.showLoading({
					title: "请稍等片刻...",
				})
				if (this.submit || this.submitCancel) return;
				this.submit = true
				this.apipost("GetCodeByOrderNo_post", {
					OrderNo: item.orderNo,
					MallBaseId: uni.getStorageSync("mall_UserInfo").MallBaseId
				}, (res) => {
					if (res.resultCode == 1) {
						this.orderInfo = JSON.parse(res.data.sPayInfo)
						this.goPayHandler(item);
					}
				}, e => {
					uni.hideLoading()
					uni.showToast({
						title: '无法发起支付，请稍后',
						icon: 'none',
						duration: 3000
					})
					this.submit = false
				});
			},
			goPayHandler(item) {
				let that = this;
				uni.requestPayment({
					provider: "wxpay",
					timeStamp: this.orderInfo.timeStamp,
					nonceStr: this.orderInfo.nonceStr,
					package: this.orderInfo.package,
					signType: this.orderInfo.signType,
					paySign: this.orderInfo.sign,
					success: function(res) {
						console.log("success", res);
						that.submit = false;
						uni.hideLoading()
						uni.showToast({
							title: "支付成功",
						});
						that.goPayPage(item)
					},
					fail: function(err) {
						that.submit = false;
						uni.hideLoading()
						uni.showToast({
							title: "支付失败",
							icon: "none",
						});
					},
				});
			},
			goPaySuccess(item) {
				let isFrom = null
				if (item.goodsType > 0 && item.goodsType < 4) { //线路
					isFrom = 1
				} else if (item.goodsType > 3 && item.goodsType < 8) { //景点门票

				} else if (item.goodsType > 7 && item.goodsType < 12) { //酒店住宿

				} else if (item.goodsType > 11 && item.goodsType < 15) { //目的地用车

				} else if (item.goodsType == 15) { //签证
					isFrom = 3
				} else if (item.goodsType == 16) { //机票
					isFrom = 4
				}
				if (isFrom) {
					setTimeout(() => {
						uni.redirectTo({
							url: "/pages/jiuzhai/paysuccess?PreferPrice=" +
								(item.totalPrice - item.preferentialPrice).toFixed(2) +
								"&isFrom=" + isFrom,
						});
					}, 100);
				}
			},
			// 再来一单
			AnotherOrder(item) {
				let url = ''
				if (item.goodsType > 0 && item.goodsType < 4) { //线路
					const pts = ['', 2, 0, 1]
					const productType = pts[item.goodsType]
					url = `jiuzhai/jz_Line?teamType=${productType}`
				} else if (item.goodsType > 3 && item.goodsType < 8) { //景点门票

				} else if (item.goodsType > 7 && item.goodsType < 12) { //酒店住宿

				} else if (item.goodsType > 11 && item.goodsType < 15) { //目的地用车

				} else if (item.goodsType == 15) { //签证
					url = "visa/visaList"
				} else if (item.goodsType == 16) { //机票
					url = "airTicket/airIndex"
				}
				if (url) {
					uni.navigateTo({
						url: `/pages/${url}`,
					});
				}
			},
			// 详情
			goDetails(item) {
				let url = null
				let msg = null

				// #ifdef MP-DI
				console.log(item.goodsType, '===========')
				msg = `OrderNo=${item.orderNo}`
				if (item.goodsType > 0 && item.goodsType < 4) url = `jiuzhai/jz_SureOrder?` //线路
				else if (item.goodsType > 3 && item.goodsType < 8) { //景点门票
				} else if (item.goodsType > 7 && item.goodsType < 12) { //酒店住宿
					url = `hotel/orderdetails?orderId=` + item.erpOrderId;
				} else if (item.goodsType > 11 && item.goodsType < 15) { //目的地用车
				} else if (item.goodsType == 15) url = `visa/visa_SureOrder?` //签证  
				else if (item.goodsType == 16) url = `airTicket/airTicketOrderDetail?` //机票
				// #endif
				// #ifdef MP-AG
				msg = `orderId=${item.erpOrderId}`
				if (item.goodsType == 2) url = `jiuzhai/jz_SureOrder?` //线路
				else if (item.goodsType == 4) { //景点门票
				} else if (item.goodsType == 3) { //酒店住宿

				} else if (item.goodsType == 9) { //酒店住宿
					url = `hotel/orderdetails?orderId=` + item.erpOrderId;
				} else if (item.goodsType == 5) { //目的地用车
				} else if (item.goodsType == 6) url = `visa/visa_SureOrder?` //签证  
				else if (item.goodsType == 1) { //机票
					url = `airTicket/airTicketOrderDetail?`
					msg = `id=${item.erpOrderId}`
				}
				// #endif
				if (url) {
					let path = `/pages/${url}${msg}`
					uni.navigateTo({
						url: path,
					});
				}
			},

			//取消订单
			goCancel(item) {
				let that = this
				if (this.submit || this.submitCancel) return
				wx.showModal({
					title: '提示',
					content: '确定取消订单？',
					success: (tip) => {
						if (tip.confirm) {
							that.submitCancel = true
							that.apipost(
								"b2b_get_GetB2BAllCancelOrder", {
									ID: item.erpOrderId,
									OrderTypeStr: item.goodsType,
								},
								(res) => {
									that.submitCancel = false
									if (res.resultCode == 1) {
										uni.showToast({
											title: "操作成功",
											icon: "success",
										});
										that.$emit('research');
									}
								},
								(err) => {
									that.submitCancel = false
									uni.showToast({
										title: err.message,
										icon: "none",
									})
								}
							);
						}
					}
				})
			},
			cancelModal() {
				this.showModal = false
			},
			goCancelZK(item) {
				if (item.orderStatus == 2) {
					this.currentData = item
					return this.showModal = true
				}
				let that = this
				if (this.submit || this.submitCancel) return
				wx.showModal({
					title: '提示',
					content: '确定取消订单？',
					success: (tip) => {
						if (tip.confirm) {
							that.submitCancel = true
							that.apipost(
								"GetCancelOrder_post", {
									OrderNo: item.orderNo,
								},
								(res) => {
									that.submitCancel = false
									if (res.resultCode == 1) {
										uni.showToast({
											title: "操作成功",
											icon: "success",
										});
										that.$emit('research');
									}
								},
								(err) => {
									uni.showToast({
										title: err.message,
										icon: "none",
									});
									that.submitCancel = false
								}
							);
						}
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import url("@/asset/css/flex.css");

	.AggOrdListBox {
		padding: 0 36rpx;
	}

	.AggOrdList {
		border-radius: 18rpx;
		background: #fff;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
	}

	.AggOrdListH {
		font-size: 22rpx;
		color: #080A09;
	}

	.AggOrdListH-left text {
		color: #e91e63;
		background: rgba(234, 32, 100, .2);
		border-radius: 10rpx;
		display: block;
		padding: 2rpx 10rpx;
	}

	.AggOrdListH-RBBox {
		display: block;
		color: #1d1d1d;
		position: relative;
	}

	.AggOrdListH-RS {
		color: #9e9e9e;
		margin-left: 40rpx;
	}

	.AggOrdListH-RBut {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		opacity: 0;
	}

	.AggOrdListH-RBut {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		opacity: 0;
	}

	.jz_Zailai {
		border-radius: 16px;
		width: 150rpx;
		height: 60rpx;
		text-align: center;
		color: #111111;
		line-height: 60rpx;
		font-size: 24rpx;
		position: relative;
		border: 1rpx solid rgba(164, 164, 164, .3);

	}

	.jz_Zailai.jz_ZailaiZF {
		color: #B99846;
		border: 1rpx solid #B99846;
	}

	.jz_ZailaiZX img {
		position: relative;
		top: 10rpx;
	}

	.visaList {
		padding: 30rpx;
		margin-bottom: 20rpx;
		background: #fff;
		overflow: hidden;
		border-radius: 14rpx;
	}

	.visaListL {
		width: 161rpx;
		height: 190rpx;
		overflow: hidden;
		margin-right: 19rpx;
		position: relative;
		border-radius: 14rpx;
	}

	.visaListL image {
		width: 100%;
		height: 100%;
		border-radius: 14rpx;
	}

	.visaListTitle {
		font-weight: bold;
		font-size: 28rpx;
		color: #111111;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin-bottom: 10rpx;
	}

	.visaListText text {
		background-color: rgba(226, 194, 122, .3);
		color: #B99846;
		margin-right: 16rpx;
		white-space: nowrap;
		border-radius: 6rpx;
		padding: 5rpx 9rpx;
		font-size: 20rpx;
	}

	.visaListNum {
		justify-content: space-between;
		align-items: center;
	}

	.visaListNumL text {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 20rpx;
		color: #080A09;
		margin-left: 10rpx;
	}

	.visaListNum {
		margin-bottom: 15rpx;
	}

	.visaListNumR {
		color: rgba(255, 49, 102, 1);
	}

	.price-Num {
		font-size: 34rpx;
		margin-left: 5rpx;
		font-weight: bold;
	}

	.uDropdownText text {
		color: #444;
	}

	.uDropdownText.active text {
		color: #B99846;
		font-weight: bold;
	}

	.visaListLText {
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 14rpx 0rpx 14rpx 0rpx;
		background: #B99846;
		padding: 4rpx 9rpx;
		font-size: 20rpx;
		color: #fff;
	}

	.visaList.active .visaListTitle,
	.visaList.active .visaListNumR,
	.visaList.active .visaListNumL {
		color: #CBCBCB;
	}

	.visaList.active .visaListLText {
		background: #CBCBCB;
	}

	.visaList.active .visaListL image {
		// filter: grayscale(100%); 
	}
</style>