<template>
	<scroll-view :scroll-y="true" @scroll="scrollHandler" @scrolltoupper="scrollTopHandler" style="height: 100vh;">
		<view class="orderdetail" :style="[contentStyle]" v-if="!loading">
			<view class="headStatus" :style="[
          headStyle,
          {
            zIndex: scrollTop < 10 ? 'unset' : 2,
            opacity: scrollTop < 10 ? '100' : scrollTop,
          },
        ]">
				<view class="arrow" @click="redirectPrev">
					<u-icon name="arrow-left" size="48" color="#FFF"></u-icon>
				</view>
				<view class="title" v-if="scrollTop > 50">订单详情</view>
			</view>
			<view class="status" :style="[headStyle]">
				<view class="status-title">{{ orders.OrderStatusName }}</view>
				<view class="sub-title" v-if='orders.OrderStatus==1 || orders.OrderStatus==2 ||orders.OrderStatus==3||orders.OrderStatus==4 '>
					<u-icon style="display: inline-block; vertical-align: middle;" name="warning-o" color="#FFF" size="28"></u-icon>
					<!-- TODO返回字段 不能写死 -->
					<text style="margin-left: 5px;">交易成功{{delivery_time}}天，系统自动确认完成</text>
					<!-- TODO 交易情况说明 -->
				</view>
			</view>
			<view class="block address">
			
				<view class="content">
					<view class="concat">
						<text style=" margin-right: 20px;">联系人:{{orders.Consignee}}</text>
						<text>联系电话:{{ orders.Mobile }}</text>
					</view>
					<view class="address"></view>
				</view>
			</view>
			<view class="block goods">
				<view class="item" v-for="(x, i) in orders.DetailList" :key="i">
					<view style="display: flex;">
						<image :src="x.CoverImagePath" class="img" @click="redirectGoods(x.GoodsId)" mode="aspectFill" />
						<view class="good-info">
							<view class="good-name" @click="redirectGoods(x.GoodsId)">{{x.GoodsName}}</view>
							<view class="good-attr">
								<text>报名人数:{{ x.Number }}人</text>
								<text v-for="(y, yi) in x.SpecificationList" :key="yi" style="margin-right: 5px;">
									{{y}}
								</text>
							</view>
							<view style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-top: 2px;" @click.native.stop="goUrl(x.FreeShippingUrl)"
							 v-if="x.FreeShippingRemarks !=null && x.FreeShippingRemarks!='' ">
								<view style="color: #FF4048;background: #fdf6ec;padding: 0 5px;display: inline-block;">
									<Text style="font-size: 20rpx;margin-right: 5rpx;">
										{{x.FreeShippingRemarks}}
									</Text>
								</view>
							</view>
							<view class="good-price">￥{{ x.Final_Price }}</view>
						</view>
					</view>
				
					<view class="customer">
						<button open-type="contact" :send-message-title="x.GoodsName" :send-message-path="'/pages/index/index?id=' + x.GoodsId + '&user_id=' + uid+'&JumpType=1'"
						 :send-message-img=" x.CoverImagePath " :show-message-card="true">
							<u-icon style="display: inline-block; vertical-align: middle;" size="36" color="#111" name="chat-o"></u-icon>
							<text style="margin-left: 10rpx;">联系客服</text>
						</button>
					</view>
				</view>
			</view>
			<view class="block">
				<view class="order-info-item">
					<view class="field">
						<view class="label">订单编号：</view>
						<view class="content">{{ orders.OrderNo }}</view>
						<view style='margin-left: 20px;'>
							<u-button size="mini" shape="circle" @click="paste(orders.OrderNo)">复制</u-button>
						</view>
					</view>
					<view class="field">
						<view class="label">报名时间：</view>
						<view class="content">{{ orders.CreateDate }}</view>
					</view>
					<view class="field">
						<view class="label">备注：</view>
						<view class="content">{{ orders.BuyerMessage?orders.BuyerMessage :'无' }}</view>
					</view>
				</view>
				<view class="order-info-item">
					<view class="field">
						<view class="label">支付方式：</view>
						<view class="content">微信支付</view>
					</view>
				</view>
				
			</view>
			<view class="block" style="margin-bottom: 50px;">
				<view class="order-info-item">
					<view class="field">
						<view class="label">商品总额</view>
						<view class="content right">￥{{ orders.PreferPrice }}</view>
					</view>
					<view class="field">
						<view class="label">优惠</view>
						<view class="content right">-￥{{ orders.CouponMoney }}</view>
					</view>
				
					
					<view style="width: 100%;height: 1px;background: #f5f5f5;margin: 5px 0;"></view>
					<view class="field">
						<view class="label">&nbsp;</view>
						<view class="content right">
							<text style="margin-right: 10px;">实付款：</text>
							<text style="font-size: 11px; font-weight: 700;" :style="{ color: mc }">￥</text>
							<text style="font-size: 17px;" :style="{ color: mc }">{{String(orders.Income).split(".")[0]}}</text>
							<text style="font-size: 12px;" :style="{ color: mc }">.{{String(orders.Income).split(".")[1] || "00" }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="btn-box" v-if="orders.OrderStatus != '5'&&isShowBtn">
			
				<view class="item" v-if="orders.OrderStatus == '1'">
					<u-button shape="circle" size="medium" :custom-style="themCustomStyle" v-on:click.stop="payment(orders)">立即支付</u-button>
				</view>
				
			
				<view class="item" v-if="orders.OrderStatus == '1' || (orders.OrderStatus == '2' && orders.PresentFXGrade!=1)">
					<u-button shape="circle" size="medium" :custom-style="customStyle" @click="cancel">取消订单</u-button>
				</view>
				<view class="item" style="line-height: 34px;" v-if="orders.OrderStatus == 6">
					待处理
				</view>
				<view class="item" style="line-height: 34px;font-size: 16px;color: gray;font-weight: 600;" v-if="orders.OrderStatus == 7">
					已取消
				</view>
			</view>
			
			<u-popup v-model="showModal" mode="center" length="80%">
				<view style='display: flex;flex-direction: column;align-items: center;background: #fff;'>
					<view style="display: flex;align-items: center;justify-content: center;height:70px ;">
						<Text>是否取消订单？</Text>
					</view>
					<view style="display: flex;flex-direction: column;height:80px ;margin-left: 15px;width: 100%;" v-if='orders.OrderStatus==2'>
						<Text style='margin-left: 10px;margin-top: 5px;'>备注</Text>
						<input class="uni-input inputM" style='margin-left: 10px;margin-top: 5px;' v-model="Cancelmsg.Remark" placeholder="输入备注" />
					</view>
					<view style="display: flex;flex-direction: row;align-items: center;height: 50px;border-top: 1px solid #F5F5F5;width: 100%;">
						<view style="width: 50%;display: flex;align-items: center;justify-content: center" @click="showModal=false">
							<Text>取消</Text>
						</view>
						<view style="width: 50%;color: #a0cfff;display: flex;align-items: center;justify-content: center" @click="confirm">
							<Text>确定</Text>
						</view>
					</view>
				</view>
			</u-popup>
			<payCom v-if="payBtn" :payInfo="payInfo" @closePay="closePay"></payCom>
			
		</view>
		
		
	</scroll-view>
</template>

<script>
import payCom from '@/components/pay/pay';
	export default {
		components: {
			payCom
		},
		data() {
			return {
				mc: "",
				secondary: "",
				headStyle: {},
				contentStyle: {},
				orders: {},
				loading: true,
				showReviceModal: false,
				zrName: '是好友就帮忙代付',
				zrimg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/zhaoren.png',
				id: 0,
				payBtn: false,
				payExit: false,
				customStyle: {
					marginLeft: "20px",
					padding: "0 30rpx",
				},
				path: "",
				scrollTop: 0,
				recommend: [],
				prevPage: "",
				themCustomStyle: {
					marginLeft: "20px",
					padding: "0 30rpx",
					color: "#FFF",
				},
				expressInfo: [],
				Cancelmsg: {
					OrderId: 0,
					Type: 1,
					Remark: '',
				},
				payInfo: {
					OpenId: '',
					OrderId: '',
					OrderPayType: 1,
					GoodsName: '',
					type:2
				},
				showAfter: false,
				showModal: false,
				delivery_time: 14, //时间
				uid: 0,
				NewUserId: 0, //zk新增
				isShowBtn: true,
				path: '',
			};
		},
		onLoad(option) {
			this.id = option.id || 63702;
			//zk新增
			if (option.NewUserId) {
				this.NewUserId = option.NewUserId;
				this.isShowBtn = false;
			}
			this.mc = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			this.headStyle.background = `linear-gradient(to right, ${this.mc},80%, ${this.secondary})`;
			let nav = uni.getMenuButtonBoundingClientRect();
			this.headStyle.paddingTop = nav.top + "px";
			this.contentStyle.paddingTop = nav.top + 44 + "px";
			this.delivery_time = uni.getStorageSync('basedata') ? uni.getStorageSync('basedata').mall.setting.delivery_time : 14;
			let p = getCurrentPages();
			let u = uni.getStorageSync("mall_UserInfo");
			this.uid = u.UserId ? u.UserId : 0;
			if (p.length > 1) {
				this.prevPage = p[p.length - 2].route;
			}
			this.themCustomStyle.background = this.mc;
			this.init();
		},

		methods: {
			onShareAppMessage() {
				return {
					title: this.zrName,
					path: this.path,
					imageUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/zhaoren.png'
				};
			},
			shouhuoHandler() {
				this.showReviceModal = true;
			},
			goExpressHandler(express, no, id) {
				uni.navigateTo({
					url: "/pages/order/express?express=" +
						express +
						"&no=" +
						no +
						"&address=" +
						this.orders.DistrictAddress + this.orders.ShoppingAddress +
						"&id=" + id,
				});
			},
			submitReviceGoodHandler() {
				let that = this
				that.request2({
						url: '/api/AppletOrder/SetAppletOrderGoodsReceiving',
						data: {
							OrderId: that.orders.OrderId
						}
					},
					(res) => {
						uni.showToast({
							title: res.message
						})
						that.init()
					}
				);
			},
			cancel() {
				this.showModal = true;
				this.Cancelmsg.OrderId = this.orders.OrderId;
				this.Cancelmsg.Type = this.orders.OrderStatus;
				this.Cancelmsg.Remark = ''
			},
			confirm() {
				let that = this
				if (that.Cancelmsg.Type == 2 && that.Cancelmsg.Remark == '') {
					uni.showToast({
						title: '备注不能为空',
						icon: 'none'
					})
					return
				}
				let pages = getCurrentPages(); // 当前页面
				uni.requestSubscribeMessage({ //订阅消息 退款和审核通知
					tmplIds: that.orders.template_message_list,
					complete(res) {
						that.request2({
								url: '/api/AppletOrder/CancelAppletGoodsOrderInfo',
								data: that.Cancelmsg
							},
							(res) => {
								that.showModal = false;
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
								that.init();
								if (pages.length > 1) { //返回上一个页面
									var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象  
									setTimeout(() => {
										uni.navigateBack({
											success: function() {
												beforePage.$vm.getOrderStatus();
											}
										});
									}, 500)
								}
							}
						);
					}
				})
			},
			openAfterHandler() {
				this.showAfter = true;
			},
			closeAfterHandler() {
				this.showAfter = false;
			},
			init() {
				this.payInfo.OpenId = uni.getStorageSync('mall_UserInfo').OpenId;
				this.request2({
						url: '/api/AppletOrder/GetAppletMyOrderInfo',
						data: {
							OrderId: this.id,
							NewUserId: this.NewUserId
						}
					},
					(res) => {
						this.orders = res.data;
						this.loading = false;
						let u = uni.getStorageSync("mall_UserInfo");
						let uid = u.UserId ? u.UserId : 0;
						let Up = u.UserPageType ? u.UserPageType : 0;
						let SmallShopId = u.SmallShopId ? u.SmallShopId : 0;
						if (SmallShopId == 0) {
							//如果微店id为0 去找所属微店id
							SmallShopId = u.UserSmallShopId ? u.UserSmallShopId : 0;
						}
						this.path = '/pages/index/index?OrderId=' + res.data.OrderId + "&user_id=" + uid + "&Up=" + Up + "&SmallShopId=" +
							SmallShopId + '&JumpType=4';
						this.initRecommend();
						this.getexpressInfo(res.data.OrderId)
					}
				);
			},
			formatAttr(attr) {
				let arr = JSON.parse(attr);
			},
			scrollHandler(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			scrollTopHandler() {
				this.scrollTop = 0;
			},
			initRecommend() {
				var UserPageType = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo").UserPageType : 0;
				this.request2({
						url: "/api/AppletGoods/GetAppletGoodsRecommendListForZY",
						data: {
							RecommendType: 1,
							GoodsPageType: UserPageType
						},
					},
					(res) => {
						this.recommend = res.data.List;
					}
				);
			},
			getexpressInfo(OrderId) {
				this.request2({
						url: "/api/AppletOrder/GetAppletMyOrderExpressInfo",
						data: {
							OrderId: OrderId,
						},
					},
					(res) => {
						this.expressInfo = res.data;
					}
				);
			},
			redirectGoods(id) {
				uni.navigateTo({
					url: "/pages/goods/goods?id=" + id,
				});
			},
			redirectPrev() {
				if (this.prevPage != "") {
					uni.navigateBack({
						delta: 1,
					});
				}
			},
			payment(e) {
				console.log(e.OrderId)
				this.payInfo.OrderId = e.OrderId;
				this.payInfo.GoodsName = e.DetailList[0].GoodsName.slice(0, 10);
				this.payInfo.PaymentWay = e.PaymentWay;
				this.payInfo.total_price = e.Income;
				this.payBtn = true
			},
			exitPay() {
				this.payExit = false;
			},
			closePay() {
				this.payBtn = false;
				this.payExit = true;
			},
			joinCart(x) {
				this.request2({
						url: '/api/AppletOrder/SetGoodsShoppingCartInfo',
						data: {
							GoodsId: x.GoodsId,
							SpecificationSort: '',
							Number: x.Number
						},
					},
					res => {
						uni.showToast({
							title: '加入购物车成功',
							icon: 'success',
							duration: 2000
						});
					}
				);
			},
			paste(value) {
				uni.setClipboardData({
					data: value,
				});
			},
		},
	};
</script>

<style>
	.orderdetail {
		overflow: hidden;
		background: #f3f4f6;
		/* padding-bottom: 50px; */
	}

	.orderdetail .headStatus {
		overflow: hidden;
		position: relative;
		width: 140vw;
		padding-right: 40vw;
		padding-bottom: 10px;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		display: flex;
	}

	.orderdetail .headStatus .arrow {
		height: 24px;
		margin: 5px 10px;
		width: 24px;
	}

	.orderdetail .headStatus .title {
		font-size: 18px;
		color: #fff;
		flex: 1;
		width: 1px;
		margin-left: 10px;
		line-height: 34px;
	}

	.orderdetail .status {
		padding-bottom: 25px;
		position: relative;
		width: 140vw;
		padding-right: 40vw;
		padding-top: 0 !important;
	}

	.orderdetail .status .status-title {
		text-align: center;
		font-size: 22px;
		color: #fff;
		margin-top: -18px;
	}

	.orderdetail .status .sub-title {
		font-size: 14px;
		color: #fff;
		text-align: center;
		margin-top: 10px;
		font-weight: 300;
	}

	.orderdetail .block {
		background: #fff;
		border-radius: 10px;
		margin-top: -10px;
		padding: 20px;
		padding-bottom: 0;
		position: relative;
		margin-bottom: 20px;
	}

	.orderdetail .address {
		display: flex;
		/* margin-bottom: 20px; */
	}

	.orderdetail .address .icon {
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}

	.orderdetail .address .content {
		flex: 1;
	}

	.orderdetail .address .content .concat {
		font-size: 14px;
		color: #000;
	}

	.orderdetail .address .content .address {
		font-size: 13px;
		margin-top: 10px;
		color: gray;
	}

	.orderdetail .goods {
		 
	}

	.orderdetail .goods .item {
		margin-bottom: 20px;
	}

	.orderdetail .goods .item:last-child {
		margin-bottom: 0;
	}

	.orderdetail .goods .item .img {
		width: 80px;
		height: 80px;
		border-radius: 2px;
	}

	.orderdetail .goods .item .good-info {
		margin-left: 15px;
		flex: 1;
		flex-direction: column;
		width: 1px;
		display: flex;
	}

	.orderdetail .goods .item .good-info .good-name {
		font-size: 15px;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		height: 24px;
	}

	.orderdetail .goods .item .good-info .good-attr {
		font-size: 13px;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: gray;
		display: flex;
		flex-direction: column;
	}

	.orderdetail .goods .item .good-info .good-price {
		font-size: 16px;
		height: 20px;
	}

	.orderdetail .order-info-item {
		padding: 10px 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.orderdetail .order-info-item:last-child {
		border-bottom: none;
	}

	.orderdetail .order-info-item .field {
		margin-bottom: 10px;
		display: flex;
	}

	.orderdetail .order-info-item.peisong {
		border: none;
		background: #f1f1f1;
		border-radius: 5px;
		padding: 10px;
		margin: 15px 0 5px 0;
		overflow: hidden;
	}

	.orderdetail .order-info-item .field:last-child {
		margin-bottom: 0;
	}

	.orderdetail .order-info-item .field .label {
		width: 80px;
		margin-right: 20px;
		color: gray;
	}

	.orderdetail .order-info-item .field .content {
		flex: 1;
		width: 1px;
		color: #000;
	}

	.orderdetail .order-info-item .field .content.right {
		text-align: right;
	}

	.orderdetail .btn-box {
		display: flex;
		flex-direction: row-reverse;
		height: 45px;
		padding: 5px 20px;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;
		border-top: 1px solid #f5f5f5;
		background: #fff;
	}

	.orderdetail .btn-box .item {

	}

	.orderdetail .customer {
		padding-top: 20rpx;
		margin-top: 20rpx;
		border-top: 2rpx solid #f5f5f5;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.orderdetail .customer button {
		width: 100%;
		display: inline-block;
		background: none;
		border: none;
		outline: none;
		font-size: 14px;
		font-weight: 600;
		color: #111;
	}

	.orderdetail .customer button::after {
		border: none;
		outline: none;
	}
</style>