<template>
	<view class="content">
		<view class="row b-b b-t" v-if="status._type != 2">
			<text class="order-status">{{ item._status ? item._status._msg : '' }}</text>
		</view>
		<view class="rows flex1" v-else>
			<text class="rows-1">卖家已发货</text>
			<image src="https://mmz.liuniu946.com/statics/img/img08.png"></image>
		</view>
		<!-- 快递信息 -->
	<!-- 	<view class="express-box" @click="expressCheck(item)" v-if="item.delivery_id != ''">
			<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" v-if="item.refund_reason != null">
			<view class="address-top">
				<view >商家拒绝退款</view>
			</view>
			<view class="addrdss-detail">商家回复：{{ item.refund_reason }}</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" @click.stop="navto(goodsItem)">
				<image class="goods-img" :src="goodsItem.productInfo.image" mode="aspectFill"></image>
				<view class="right position-relative">
					<text class="title">{{ goodsItem.productInfo.store_name }}</text>
				</view>
				<view class="title-right">
					<view class="price">{{ goodsItem.productInfo.price }}</view>
					<view class="attr-box">{{ goodsItem.attrInfo ? goodsItem.attrInfo.suk : '' }} x {{ goodsItem.cart_num }}</view>
					<view v-if="item.pink_id == 0 && status._type == 3">
						<view @click.stop="evaluate(goodsItem)" class="yesevaluate" v-if="goodsItem.is_reply > 0"><text>已评价</text></view>
						<view @click.stop="evaluate(goodsItem)" class="evaluate" v-if="goodsItem.is_reply < 1"><text>去评价</text></view>
					</view>
				</view>
			</view>
		</view>
		<view class="row b-b flex">
			<text class="tit">订单总价</text>
			<view class="input">￥{{ item.total_price }}</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">{{ status._title }}</view>
				</view>
			</view>
			<view class="item flex">
				<view class="title-left flex">
					<text class="title">支付方式:</text>
					<view class="text">{{ 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>
			<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="footer" v-if="status._type == 0">
			<view class="price-content">
				<text>合计：</text>
				<text class="price-tip">￥</text>
				<text class="price">{{item.pay_price}}</text>
			</view>
			<text class="submit" :class="{ submitNo: !payType }" @click="orderPay(item)" >立即支付</text>
		</view>
		
		<!-- <view class="footer" v-if="item.delivery_type" @click="expressCheck(item)">
			<view class="kd-box">
				查询快递
			</view>
		</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 if (item.activity_id > 0) {
				return '活动订单';
			} else if (item.live_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:'',
			expressList: {},		// 最新快递信息
			addressImg:
				'data:image/png;base64, '
				
		};
	},
	onLoad(option) {
		this.orderId = option.id;
	},
	onShow() {
		this.loadOrder();
	},
	methods: {
		// 载入订单详细
		loadOrder() {
			let obj = this;
			orderDetail({}, this.orderId).then(e => {
				this.item = e.data;
				this.status = e.data._status;
			});
		},
		navto(item){
			uni.navigateTo({
				url: '/pages/product/product?id=' + item.product_id
			});
		},
		// 跳转到查询快递页面
		expressCheck(item) {
			uni.navigateTo({
				url: '/pages/order/expressInfo?id=' + item.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"
				});
			}
			
		},
		
		// 订单支付
		orderPay(e) {
			uni.navigateTo({
				url: '/pages/money/pay?type=1&ordid=' + e.order_id + '&money=' + e.pay_price
			});
		},
		
		// 复制订单编号
		copyOrderId(text) {
			// #ifndef H5
			uni.setClipboardData({
				data: text,
				success: e => {
					uni.showToast({
						title: '复制成功',
						duration: 1500
					});
				}
			});
			// #endif
			// #ifdef H5
			let inputH = document.querySelector('#copyOrder input');
			// 获取需要复制的文字
			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,
					icon:'none'
				});
			} else {
				this.$api.msg('复制失败');
			}
			// #endif
		}
	}
};
</script>

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

.content {
	padding-bottom: 90rpx;
}

// 订单详细
.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;
		}
	}
}
// 快递信息
.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;
	}
}

// 地址信息
.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;
	}
}
.rows{
	width:750rpx;
	height:180rpx;
	background:linear-gradient(-45deg,rgba(251,91,91,1) 0%,rgba(252,65,65,1) 100%);
	padding: 20rpx 30rpx;
	image{
		width:188rpx;
		height:125rpx;
	}
	.rows-1{
		font-size:36rpx;
		font-weight:bold;
		color:#ffffff;
		line-height:56rpx;
	}
}
.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);
}

//底部
.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 995;
	display: flex;
	align-items: center;
	width: 100%;
	height: 90rpx;
	justify-content: space-between;
	font-size: 30rpx;
	background-color: #fff;
	z-index: 998;
	color: $font-color-base;
	box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
	.price-content {
		padding-left: 30rpx;
		font-size: 36rpx;
	}
	.price-tip {
		color: #FC4141;
		margin-left: 8rpx;
		font-size: 36rpx;
	}
	.price {
		font-size: 36rpx;
		color: #FC4141;
		font-weight: bold;
	}
	.submit {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 360rpx;
		height: 100%;
		color: #fff;
		font-size: 32rpx;
		background:linear-gradient(0deg,rgba(250,39,64,1),rgba(254,85,68,1));
	}
}

/* 多条商品 */
.order-item {
	display: flex;
	flex-direction: column;
	padding:0rpx 30rpx;
	background: #fff;
	margin-top: 20rpx;
	/* 单条商品 */
	.goods-box-single {
		display: flex;
		padding: 20rpx 0;
		.goods-img {
			display: block;
			width: 120rpx;
			height: 120rpx;
		}
		.title-right {
			flex-shrink: 0;
			text-align: right;
			align-self: flex-start;
			.attr-box {
				font-size: $font-sm + 2rpx;
				color: $font-color-light;
			}
			.price {
				font-size: $font-base + 2rpx;
				color: $font-color-dark;
				&:before {
					content: '￥';
					font-size: $font-sm;
					margin: 0 2rpx 0 8rpx;
				}
			}
			.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;
					
				}
			}
		}
		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding:0rpx 15rpx;
			overflow: hidden;
			height: 100%;
			.title {
				font-size: 26rpx;
				color: $font-color-dark;
				width: 100%;
				height: 70rpx;
				overflow:hidden; 
				text-overflow:ellipsis;
				display:-webkit-box; 
				-webkit-box-orient:vertical;
				-webkit-line-clamp:2; 
			}
		}
	}
}
// 标题头
.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;
	}
}

</style>
