<template>
	<view class="content">
		<view class="row b-b b-t">
			<text class="order-status" @click="item.delivery_type == 'express'?towuliu(item):''">{{ item._status ? item._status._msg : '' }}</text>
		</view>
		<!-- 快递信息 -->
		<view class="express-box" @click="expressCheck(item)" v-if="item.delivery_id != null ">
			<view v-if='item.delivery_id != null' style="width: 100%;padding: 10rpx 20rpx;background: #FFFFFF;">
				<view class="express-frame">
					<view>
						<view style="display: flex;">
						<text class="express-text">快递名：</text>
							{{ item.delivery_name }}
						</view>
						<view style="display: flex;">
							<text class="express-text">快递单号：</text>
							{{ item.delivery_id }}
						</view>
					</view>
					<text class="iconfont iconenter" style="color: #CCCCCC;"></text>
				</view>
			</view>
		</view>
		<view class="address-box position-relative">
			<view class="address-top flex">
				<view class="title">{{ item.real_name }}</view>
				<view class="phone">{{ item.user_phone }}</view>
			</view>
			<view class="addrdss-detail">{{ item.user_address }}</view>
			<image class="a-bg" :src="addressImg"></image>
		</view>
		<view class="order-item">
			<view class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.cartInfo" :key="goodsIndex">
				<image class="goods-img" :src="goodsItem.productInfo.image" mode="aspectFill"></image>
				<view class="right position-relative">
					<view class="flex">
						<text class="title">{{ goodsItem.productInfo.store_name }}</text>
						<view class="title-right">
							<view class="price">{{ goodsItem.productInfo.price }}</view>
							<view class="attr-box">
								{{ goodsItem.attrInfo ? goodsItem.attrInfo.suk : '' }} x {{ goodsItem.cart_num + '' + (goodsItem.productInfo.unit_name ||'') }}
							</view>
							<view>
								<view v-if="status._type ==  3">
									<view @click="evaluate(goodsItem)" class="yesevaluate" v-if="goodsItem.is_reply > 0"><text>已评价</text></view>
									<view @click="evaluate(goodsItem)" class="evaluate" v-if="goodsItem.is_reply < 1"><text>去评价</text></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="row b-b flex">
			<text class="tit">订单总价</text>
			<view class="input">￥{{ payAllMoney }}</view>
		</view>
		<view class="row b-b flex" v-if="vipMoney > 0">
			<text class="tit">vip优惠</text>
			<view class="input">-￥{{ vipMoney }}</view>
		</view>
		<view class="row b-b flex">
			<text class="tit">邮费</text>
			<view class="input">{{ item.pay_postage > 0 ? '￥' + item.pay_postage : '免邮费' }}</view>
		</view>
		<view class="row b-b flex" v-if="item.coupon_id > 0">
			<text class="tit">优惠券</text>
			<view class="input">-￥{{ item.coupon_price }}</view>
		</view>
		<view class="row b-b flex" v-if="item.use_integral > 0">
			<text class="tit">积分抵扣</text>
			<view class="input">-￥{{ item.use_integral }}</view>
		</view>
		<view class="row b-b flex">
			<text class="tit ">实付</text>
			<view class="input payColor">￥{{ item.pay_price }}</view>
		</view>

		<view class="orderDetialBox">
			<view class="f-header m-t">
				<view class="f-left-icon"></view>
				<view class="tit-box"><text class="tit">订单信息</text></view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">订单编号:</text>
					<view class="text">{{ item.order_id }}</view>
				</view>
				<view class="buttom-right" @click="copyOrderId(item.order_id)">复制单号</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">下单时间:</text>
					<view class="text">{{ item._add_time }}</view>
				</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">订单类型:</text>
					<view class="text">{{ item | orderType }}</view>
				</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">订单状态:</text>
					<view class="text">{{ item._status._title || '' }}</view>
				</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">支付方式:</text>
					<view class="text">{{ item._status._payType||""  }}</view>
				</view>
			</view>
		</view>

		<view class="orderDetialBox" v-if="item.delivery_id">
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">配送方式:</text>
					<view class="text">{{ item.delivery_type == 'express' ? '发货' : item.delivery_type == 'send' ? '送货' : '' }}</view>
				</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title" v-if="item.delivery_type == 'express'">快递公司:</text>
					<text class="title" v-if="item.delivery_type == 'send'">送货人员:</text>
					<view class="text">{{ item.delivery_name }}</view>
				</view>
				<view v-if="status._type != 1 && status._type != 0" class="buttom-right" @click="towuliu(item)">查看物流</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title" v-if="item.delivery_type == 'express'">快递单号:</text>
					<text class="title" v-if="item.delivery_type == 'send'">联系方式:</text>
					<view class="text">{{ item.delivery_id }}</view>
				</view>
			</view>
		</view>
		<view class="btHeight">
			
		</view>
		<view class="group-nav flex bg-white b-t" v-if="item.combination_id>0">
			<navigator :url="'/pages/product/groupBooking/detail?id='+item.pink_id">
				<view class="bottom  border-radius-all bg-danger text-white padding-c-30 font-size-lg padding-v-10">查看拼团</view>
			</navigator>
		</view>
	</view>
</template>

<script>
import { orderDetail } from '@/api/order.js';
export default {
	filters: {
		orderType: function(item) {
			if (item.combination_id > 0) {
				return '拼团订单';
			} else if (item.seckill_id > 0) {
				return '秒杀订单';
			} else if (item.bargain_id > 0) {
				return '砍价订单';
			} else {
				return '普通订单';
			}
		}
	},
	data() {
		return {
			refund: '', //退款理由
			reason: '', //备注
			value: ['1', '2', '3', '4', '5', '6', '7', '8', 9, 10, 11, 12, 13],
			orderId: '',
			item: {
				_status: {}
			},
			status:[],
			vipMoney: 0, //vip优惠金额
			addressImg:
				'data:image/png;base64, '
		};
	},
	// #ifdef APP-PLUS || H5
	onBackPress(e){
		uni.navigateTo({
			url: '/pages/order/order?state='+this.item._status._type
		});
		return true;  
	},
	// #endif
	onLoad(option) {
		this.orderId = option.id;
		this.loadOrder();
	},
	computed: {
		payAllMoney() {
			return this.vipMoney + +this.item.total_price;
		}
	},
	methods: {
		// 跳转到查询快递页面
		expressCheck(item) {
			uni.navigateTo({
				url: '/pages/order/expressInfo?id=' + item.id
			});
		},
		// 载入订单详细
		loadOrder() {
			let obj = this;
			orderDetail({}, obj.orderId).then(e => {
				obj.item = e.data;
				obj.item.cartInfo.forEach(e => {
					// 计算vip优惠金额
					obj.vipMoney += e.vip_truePrice;
					
				});
				this.status = e.data._status;
				console.log(e);
			});
		},
		// 查看快递单号
		towuliu(item){
			let delivery_id = item.delivery_id;
			 window.location.href = "https://m.kuaidi100.com/result.jsp?nu="+ delivery_id
		},
		//跳转到评价页面
		evaluate(e){
			let unique = e.unique;
			let is_reply = e.is_reply;
			if(is_reply == 0){
				uni.navigateTo({
					url: '/pages/order/evaluate?unique=' + unique
				});
			}else{
				uni.showToast({
					title: '已评价！',
					duration: 1500,
					icon:"none"
				});
			}
			
		},
		// 复制订单编号
		copyOrderId(text) {
			// #ifndef H5
			uni.setClipboardData({
				data: text,
				success: e => {
					uni.showToast({
						title: '复制成功',
						duration: 1500
					});
				}
			});
			// #endif
			// #ifdef H5
			// 获取需要复制的文字
			const copyStr = text;
			// 创建input标签存放需要复制的文字
			const oInput = document.createElement('input');
			// 把文字放进input中，供复制
			oInput.value = copyStr;
			// 添加文
			document.body.appendChild(oInput);
			// 选中创建的input
			oInput.select();
			// 执行复制方法， 该方法返回bool类型的结果，告诉我们是否复制成功
			const copyResult = document.execCommand('copy');
			// 操作中完成后 从Dom中删除创建的input
			document.body.removeChild(oInput);
			// 根据返回的复制结果 给用户不同的提示
			if (copyResult) {
				uni.showToast({
					title: '已复制到粘贴板',
					duration: 2000
				});
			} else {
				this.$api.msg('复制失败');
			}
			// #endif
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
}

// 快递信息
.express-box {
	margin-top: 20rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: $font-base;
	font-weight: 500;
	.express-frame {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100rpx;
	}
	.express-text {
		font-weight: 600;
		margin-right: 20rpx;
		width: 140rpx;
		display: block;
	}
}

// 订单详细
.orderDetialBox {
	margin-top: 20rpx;
	padding: 0 30rpx;
	background-color: #ffffff;
	font-size: $font-base;
	color: $font-color-base;
	.item {
		height: 80rpx;
		.text {
			padding-left: 10rpx;
		}
		.buttom-right {
			width: 180rpx;
			border-radius: 99rpx;
			padding: 10rpx;
			text-align: center;
			border: 1px solid $border-color-light;
		}
	}
}
// 地址信息
.address-box {
	margin-top: 20rpx;
	padding: 30rpx;
	padding-bottom: 35rpx;
	background-color: #ffffff;
	line-height: 1;
	.address-top {
		margin-bottom: 30rpx;
		.title {
			font-size: $font-lg;
			color: $font-color-dark;
		}
		.phone {
			font-size: $font-base;
			color: $font-color-light;
		}
	}
	.addrdss-detail {
		font-size: $font-base;
		color: $font-color-base;
	}
	.a-bg {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 5rpx;
	}
}

.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30rpx;
	height: 80rpx;
	background: #fff;
	.order-status {
		font-size: $font-lg;
		color: $color-red;
		font-weight: 500;
	}
	.refund {
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.noRefund {
		font-size: 30rpx;
		color: $font-color-light;
	}
	.tit {
		flex-shrink: 0;
		width: 120rpx;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.input {
		text-align: right;
		flex: 1;
		font-size: 30rpx;
		color: $font-color-dark;
		&.payColor {
			color: $color-red;
		}
	}
	.iconlocation {
		font-size: 36rpx;
		color: $font-color-light;
	}
}
.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690rpx;
	height: 80rpx;
	margin: 60rpx auto;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10rpx;
	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}

/* 多条商品 */
.order-item {
	display: flex;
	flex-direction: column;
	padding-left: 30rpx;
	background: #fff;
	margin-top: 20rpx;
	/* 单条商品 */
	.goods-box-single {
		display: flex;
		padding: 20rpx 0;
		.goods-img {
			display: block;
			width: 120rpx;
			height: 120rpx;
		}
		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 0 30rpx 0 24rpx;
			overflow: hidden;
			height: 100%;
			.title {
				align-self: flex-start;
				font-size: $font-base + 2rpx;
				color: $font-color-dark;
			}
			.title-right {
				flex-shrink: 0;
				text-align: right;
				align-self: flex-start;
			}
			.attr-box {
				font-size: $font-sm + 2rpx;
				color: $font-color-light;
			}
			.evaluate{
					color:#FFFFFF;
					font-size: 24rpx;
					display: inline-block;
					text-align: right;
					text{
						background:#FA2740;
						padding: 5rpx 15rpx;
						
					}
			}
			.yesevaluate{
				color:#333333;
				font-size: 24rpx;
				display: inline-block;
				text-align: right;
				text{
					border: 2rpx solid #333333;
					padding: 5rpx 15rpx;
					
				}
			}
			.price {
				font-size: $font-base + 2rpx;
				color: $font-color-dark;
				&:before {
					content: '￥';
					font-size: $font-sm;
					margin: 0 2rpx 0 8rpx;
				}
			}
		}
	}
}
// 标题头
.f-header {
	display: flex;
	align-items: center;
	height: 80rpx;
	.tit-box {
		@extend %font-title-box;
	}
	.tit {
		@extend %font-title;
	}
	.f-left-icon {
		@extend %f-left-icon;
	}
}
// 共有底部高度
$btHeight:100rpx;
.btHeight{
	height: $btHeight;
}
// 拼团按钮
.group-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	height:$btHeight;
	width: 100%;
	justify-content: flex-end;
	padding-right: 30rpx;
	.bottom {
	}
}
</style>
