<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" style="display:flex;align-items: center;padding-bottom:15px;">
				<u-avatar mode="circle" :size="50" :src="orders.UserInfo.Photo"></u-avatar>
				<view style="margin-left:5px;">{{orders.UserInfo.Name}}</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>
					<template v-for="(e, ei) in expressInfo">
						<view :key="ei" class="order-info-item peisong" v-for="(ec, eci) in e.GoodsList" v-if=" ec.Id == x.DetailId">
							<template>
								<view class="field" :key="eci" v-if="e.Type == '2' && ec.Id == x.DetailId">
									<view class="label">配送方式</view>
									<view class="content">{{ e.Remark }}</view>
								</view>
								<view class="field" :key="eci" @click="goExpressHandler(e.ExpressName, e.ExpressNumber,e.ExpressId)" v-if="e.Type == '1' && ec.Id == x.DetailId">
									<view class="label">配送方式</view>
									<view class="content">{{ e.ExpressName }} {{ e.ExpressNumber }}</view>
									<view style="margin-left: 10px;">
										<u-icon name="arrow" size="32" color="#000"></u-icon>
									</view>
								</view>
							</template>
						</view>
					</template>
					<view style="margin-top: 20px;display: flex;flex-direction: row-reverse;align-items: center;">
						<u-button shape="circle" size="medium" :custom-style="customStyle" @click="joinCart(x)">加购物车</u-button>
						<view v-if="x.refund_status == 1" style="margin-right: 40rpx; font-size: 28rpx; color: gray;">
							已申请售后（{{ x.refund.status_text }}）
						</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 }}</view>
					</view>
				</view>
				<view class="order-info-item">
					<view class="field">
						<view class="label">支付方式：</view>
						<view class="content">{{ orders.PaymentWayName }}</view>
					</view>
				</view>
			</view>
			<view class="block">
				<view class="order-info-item">
					<view class="field">
						<view class="label">商品总额</view>
						<view class="content right">￥{{ orders.PreferPrice }}</view>
					</view>
					<view class="field" v-if="u.TenantId==29&&orders.GoodsDepositMoney>0">
						<view class="label">订金金额</view>
						<view class="content right">￥{{ orders.GoodsDepositMoney }}</view>
					</view>
					<view class="field" v-if="u.TenantId==29&&orders.PayIncome>0">
						<view class="label">已付金额</view>
						<view class="content right">￥{{ orders.PayIncome }}</view>
					</view>
					<view class="field">
						<view class="label">运费</view>
						<view class="content right">+￥{{ orders.FreightMoney }}</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">
				<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>
		</view>
		<u-toast ref="uToast" />
		<payCom v-if="payBtn" :payInfo="payInfo" @closePay="closePay"></payCom>
		<u-popup v-model="payExit" mode="center" :mask-close-able="false">
			<view style="background:#fff;width:500rpx">
				<view style="padding:10px 0 0 10px">提交失败</view>
				<view style="text-align:center;padding-bottom:40rpx">
					<view style="margin:80rpx 0">支付取消</view>
					<span @click="exitPay" style="padding:10rpx 50rpx;color:#fff;background:#19be6b;border-radius: 12px;">确定</span>
				</view>
			</view>
		</u-popup>
	</scroll-view>
</template>

<script>
	import payCom from '@/components/pay/pay';
	export default {
		components: {
			payCom
		},
		data() {
			return {
				mc: "",
				secondary: "",
				headStyle: {},
				contentStyle: {},
				orders: {},
				loading: true,
				id: 0,
				payBtn: false,
				payExit: false,
				customStyle: {
					marginLeft: "20px",
					padding: "0 30rpx",
				},
				path: "",
				scrollTop: 0,
				prevPage: "",
				themCustomStyle: {
					marginLeft: "20px",
					padding: "0 30rpx",
					color: "#FFF",
				},
				expressInfo: [],
				payInfo: {
					OpenId: '',
					OrderId: '',
					OrderPayType: 1,
					GoodsName: ''
				},
				delivery_time: 14, //时间
				uid: 0,
				shopBasics: {},
				mall_UserInfo: {},
				u: {},
				OrderId: 0
			};
		},
		onLoad(option) {
			this.id = option.id || 63702;
			this.OrderId = option.GoodsId;
			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.u=u;
			
			this.uid = u.UserId ? u.UserId : 0;
			if (p.length > 1) {
				this.prevPage = p[p.length - 2].route;
			}
			this.init();
			this.themCustomStyle.background = this.mc;
		},
		methods: {
			goExpressHandler(express, no, id) {
				uni.navigateTo({
					url: "/pages/order/express?express=" +
						express +
						"&no=" +
						no +
						"&address=" +
						this.orders.DistrictAddress + this.orders.ShoppingAddress +
						"&id=" + id,
				});
			},
			init() {
				this.payInfo.OpenId = uni.getStorageSync('mall_UserInfo').OpenId;
				this.request2({
						url: '/api/AppletGoods/GetAppletMyOrderAgentInfo',
						data: {
							OrderId: this.OrderId,
						}
					},
					(res) => {
						this.orders = res.data;
						this.loading = false;
						this.getexpressInfo(res.data.OrderId)
					}
				);
			},
			formatAttr(attr) {
				let arr = JSON.parse(attr);
			},
			scrollHandler(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			scrollTopHandler() {
				this.scrollTop = 0;
			},
			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) {
				this.payInfo.OrderId = e.OrderId;
				this.payInfo.GoodsName = e.DetailList[0].GoodsName.slice(0, 10);
				this.payInfo.PaymentWay = e.PaymentWay;
				this.payInfo.total_price = this.u.TenantId == 29 ? e.ResultPayMoney: e.Income;
				//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 {
		/* display: flex; */
	}

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

	.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 {
		/* margin-left: 20px; */
	}

	.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>
