<template>
	<view class="content">
		<z-nav-bar title="我的订单" bgColor="#5188e5" fontColor="#fff"></z-nav-bar>
		
		<view class="order_block">
			<view class="order_list" v-if="list.length>0">
				<view class="order_item" v-for="(item, index) in list" :key="index" @click="goToDetail(item)">
					<view class="order_orderSn">
						{{item.orderSn}}
						<u-tag @click="handleCopy(item.orderSn, '订单编号')" text="复制" plain style="float: right" size="mini" type="success"></u-tag>
					</view>
					<view class="item_top">
						<text class="orderstatus" v-show="item.orderStatus == 0">未付款</text>
						<text class="orderstatus" v-show="item.orderStatus == 1">待发出</text>
						<text class="orderstatus" v-show="item.orderStatus == 2">已发出</text>
						<text class="orderstatus" v-show="item.orderStatus == 3">交易成功</text>
						<text class="orderstatus" v-show="item.orderStatus == 4">交易失败</text>
						<text class="orderstatus" v-show="item.orderStatus == 5">已过期</text>
						<text class="orderstatus" v-show="item.orderStatus == 6">已退款</text>
						<text class="orderstatus" v-show="item.orderStatus == 7">退款中</text>
					</view>
					<view class="order_infor" v-if="item.orderType=='aiVip'||item.orderType=='upgradeAiVip'">
						<view class="left">
							<image src="../../static/icon/order_vip.png" mode="aspectFill"></image>
							<text>{{item.aiBuyConfig.title}}<span>（{{item.aiBuyConfig.count}}次）</span><span v-if="item.orderType=='upgradeAiVip'">（VIP升级）</span></text>
						</view>
						<view class="right">
							<text v-if="item.orderType=='upgradeAiVip'&&item.districtMoney>0">￥{{Number(item.aiBuyConfig.fee)-Number(item.districtMoney)}}</text>
							<text v-else>￥{{item.aiBuyConfig.fee}}</text>
						</view>
					</view>
					<view class="order_infor" v-if="item.orderType=='point'">
						<view class="left">
							<image class="feng fengPoint" src="/static/icon/pay_3.png" mode="aspectFill"></image>
							<text>充值 {{item.bookBuyConfigEntity.money}}天医币</text>
						</view>
					</view>
					<view class="order_infor" v-if="item.orderType=='relearn'">
						<view class="left">
							<image class="feng fengPoint" src="/static/icon/fugou.png" mode="aspectFill"></image>
							<view class="btns flexbox">
								<view class="booknameleft" style=" padding-left: 20rpx;">
								{{ item.remark }}
								</view>
							</view>
						</view>
					</view>
					<view class="order_infor" v-if="item.orderType=='order'">
						<view v-for="(item2, index2) in item.productList"
							:key="item.orderId" class="bookinfolist">
							<view class="left">
								<view class="feng" v-if="item2.product && item2.product.productImages">
									<image style="width: 100%; height: 100%"
										mode="aspectFit" :src="item2.product.productImages"></image>
								</view>
					
								<view v-else class="feng" style="
								  color: #c0c4cc;
								  font-size: 22rpx;
								  line-height: 140rpx;
								  text-align: center;
								">暂无封面图</view>
								<view class="btns flexbox" style=" width:  calc(100% - 150rpx);">
									<view class="booknameleft">
									{{ item2.product && item2.product.productName ? item2.product.productName : "" }}</view>
					
									<view style="
										line-height: 58rpx;
										color: #333;
										font-size: 26rpx;
										font-weight: 700;
									  ">
										<text style="font-size: 20rpx">￥</text>
										<text v-if="item2.product.price>=0">{{item2.product.price}}</text>
										
									</view>
								</view>
							</view>
							<view class="btns flexbox">
								<view class="left" style="color: #c0c4cc"></view>
								<view class="right flexbox opbtns" style="color: #c0c4cc">
									×{{ item2.quantity ? item2.quantity : "" }}
								</view>
							</view>
						</view>
					</view>
					
					<view class="order_price">实付款
						<view
						    style="
						      line-height: 46rpx;
						      color: #333;
						      font-size: 30rpx;
						      font-weight: 700;
						    "
						  >
						    <text v-if="item.orderType == 'point'">
						      {{ item.bookBuyConfigEntity.realMoney }}
						    </text>
							<text v-if="item.orderType != 'point'">
								<text v-if="item.realMoney && item.realMoney > 0">
								  ￥{{ item.realMoney }}
								</text>
								<text v-if="item.realMoney==0&&item.jfDeduction==0">
								  ￥0
								</text>
								
								<text
								  style="margin: 0 4rpx"
								  v-if="
								    item.realMoney > 0 &&
								    item.jfDeduction > 0
								  "
								>
								  +
								</text>
							</text>
							
						    <text v-if="item.jfDeduction > 0">{{ item.jfDeduction }} 积分</text>
						</view>
					</view>
					<text class="order_time">下单时间：{{ item.createTime }}</text>
					<view
						class="order_actions_row"
						v-if="orderItemHasActions(item)"
						@click.stop="noop"
					>
						<view v-if="item.orderStatus == 0 && $platform == 'android'" class="order_statusbtn">
							<text @click.stop="goPay(item)">继续付款</text>
						</view>
						<view v-if="item.orderStatus == 3" class="order_statusbtn">
							<text>申请售后</text>
						</view>
						<view v-if="item.orderStatus == 6 || item.orderStatus == 7" class="order_statusbtn">
							<text @click.stop="goRefundDestination(item)">钱款去向</text>
						</view>
						<view v-if="item.refundableStatus === true" class="order_statusbtn">
							<text @click.stop="confirmApplyRefund(item)">申请退款</text>
						</view>
					</view>
				</view>
			</view>
			<text class="null_text" v-else>{{null_text}}</text>
		</view>
	</view>
</template>

<script>
import $http from "@/config/requestConfig.js";
import { mapState, mapMutations } from "vuex";
import {setPay, setPayAssign, setWXPay} from "@/config/utils";
export default {
	data() {
		return {
			list: [],
			pagination: {
				page: 1, //页码
				limit: 20, //每页显示
				total: 0, //总条数
			},
			null_text: '',
		}
	},
	onLoad() {
		
	},
	onShow() {
		this.getData();
	},
	computed: {
		...mapState(["userInfo"]),
	},
	methods: {
		noop() {},
		orderItemHasActions(item) {
			if (!item) return false;
			if (item.orderStatus == 0 && this.$platform == "android") return true;
			if (item.orderStatus == 3) return true;
			if (item.orderStatus == 6 || item.orderStatus == 7) return true;
			if (item.refundableStatus === true) return true;
			return false;
		},
		//获取数据
		getData() {
			uni.showLoading({
				title: '加载中'
			})
			var params = {
				userId: this.userInfo.id,
				come: '4',
				orderStatus: '',
				...this.pagination
			}
			this.$http.request({
				url: 'common/buyOrder/commonBuyOrderList',
				method: "POST",
				data: params,
				header: {
					"Content-Type": "application/json",
				},
			})
			.then(res=> {
				uni.hideLoading();
				if(res.code==0){
					if (res.data.records&&res.data.records.length>0) {
						this.list = res.data.records;
					}else{
						this.list = [];
						this.null_text = '暂无数据';
					}
				}
			});
		},
		//复制
		handleCopy(value, title) {
			this.$commonJS.handleCopy(value, title);
		},
		//跳转
		goToDetail(val){
			uni.navigateTo({
				url: "/pages/order/infor?orderId=" +
					val.orderId +
					"&orderType=" +
					val.orderStatus +
					"&orderSn=" +
					val.orderSn,
			});
		},
		//继续支付
		goPay(payItem) {
			if (payItem.paymentMethod == 2) {
				console.log("阿里支付");
				setPay({
						typePay: "alipay",
						subject: "order",
						totalAmount: payItem.realMoney,
						type: 2,
						relevanceoid: payItem.orderSn,
						customerId: this.userInfo.id,
					},
					(res) => {
						if (res.success) {
							uni.showToast({
								title: "支付成功",
							});
						} else {
							uni.showToast({
								title: "支付失败",
								icon: "none"
							});
						}
					}
				);
			} else if (payItem.paymentMethod == 1) {
				console.log("微信支付");
				if (this.isAndorid == false) {
					uni.showModal({
						title: "提示",
						content: "很抱歉，苹果系统暂不支持微信支付",
						showCancel: false,
					});
					return false;
				} else {
					let data1 = {
						orderSn: payItem.orderSn,
						buyOrderId: null,
						totalAmount: payItem.realMoney,
					};
					setWXPay(data1, (res) => {
						if (res.success) {
							uni.showToast({
								title: "支付成功",
							});
						} else {
							if (res.data.errMsg.indexOf("User canceled") != -1) {
								uni.showToast({
									title: "用户取消支付",
									icon: "none"
								});
							} else {
								uni.showToast({
									title: "支付失败",
									icon: "none"
								});
							}
						}
					});
				}
			} else if (payItem.paymentMethod == 3) {
				// 苹果充值
				console.log("苹果二次支付");
				if (this.isAndorid) {
					uni.showModal({
						title: "提示",
						showCancel: false,
						content: "很抱歉，当前订单属于苹果系统内购订单，安卓系统无法完成支付操作，您可切换到苹果系统进行支付，也可以取消该订单，并重新下单",
					});
				} else {
					console.log("进行苹果支付");
				}
			}
		},
		goRefundDestination(row) {
			uni.navigateTo({
				url: `/pages/order/refundDestination?orderId=${row.orderId}`,
			});
		},
		confirmApplyRefund(row) {
			uni.showModal({
				title: "申请退款",
				content: "请确认是否提交退款申请？",
				confirmText: "确认提交",
				cancelText: "取消",
				success: (res) => {
					if (res.confirm) {
						this.submitOrderRefund(row);
					}
				},
			});
		},
		submitOrderRefund(orderRow) {
			this.$http.request({
				url: "book/buyOrder/refundOrder",
				method: "POST",
				data: {
					orderId: orderRow.orderId,
				},
				header: {
					"Content-Type": "application/json",
				},
			}).then((res)=> {
				if (res.code === 0) {
					this.$commonJS.showToast("申请退款成功");
					this.getData();
					return;
				}
				this.$commonJS.showToast(res.errMsg || "申请退款失败");
			}).catch(()=> {
				this.$commonJS.showToast("申请退款失败");
			});
		},
	},
}
</script>

<style lang="scss" scoped>
@import '@/static/mixin.scss';
.content{
	height: 100%;
	overflow: auto;
	background-color: #fff;
}

.order_block{
	padding-bottom: 20rpx;
}
.order_list{
	margin: 20rpx 30rpx;
	border-radius: 10rpx;
	background-color: #fff;
	
	
	.order_item{
		display: block;
		width: 100%;
		padding: 20rpx 30rpx 88rpx;
		box-shadow: 0px 0px 10px 0px #a7bbe4;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		position: relative;
	}
}

.order_orderSn{
	font-size: 28rpx;
	color: #999;
	position: relative;
	
	text{
		
	}
}

.item_top {
	position: absolute;
	top: 70rpx;
	right: 30rpx;
	font-size: 24rpx;
	font-weight: normal;
	color: red;
}
.order_infor {
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	.left{
		display: flex;
		align-items: center;
		
		image{
			width: 85rpx;
			height: 85rpx;
		}
		
		text{
			padding-left: 30rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			
			span{
				color: red;
				font-size: 28rpx;
			}
		}
	}
}
.order_time {
	display: block;
	margin-top: 20rpx;
	font-size: 26rpx;
	color: #999;
}

.order_price{
	margin-top: 30rpx;
	line-height: 50rpx;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-size: 28rpx;
	
	.left{
		padding-left: 10rpx;
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
	}
}
.order_actions_row {
	position: absolute;
	bottom: 20rpx;
	left: 30rpx;
	right: 30rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 16rpx;
}
.order_statusbtn{
	flex-shrink: 0;
	padding: 0 15rpx;
	line-height: 45rpx;
	font-size: 24rpx;
	color: red;
	border: 1px solid red;
	border-radius: 30rpx;
}

.null_text{
	display: block;
	text-align: center;
	font-size: 30rpx;
	color: #999;
	padding-top: 150rpx;
}
.feng {
	background-color: #fafafa;
	margin: 0rpx 22rpx 0 0;
	height: 140rpx;
	width: 140rpx;
	float: left;
	border-radius: 14rpx;
	flex-shrink: 0;
}
.btns{
    font-size: 30rpx;
	font-weight: bold;
	display: flex;
    justify-content: space-between;
    align-items: center;
}
.opbtns{
	font-weight: normal;
	font-size: 28rpx;
}

.order_infor {
	
	.bookinfolist {
		width: 100%;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.bookinfolist:nth-last-child(1) {
		margin-bottom: 0 !important;
	}

	.operation_box {
		position: absolute;
		bottom: 20rpx;
		left: 40rpx;
	}
}
</style>