<template>
	<view class="pageContent">
		<!-- 吸顶自定义导航栏 -->
		<!-- <u-sticky offset-top="0"><my-backNar /></u-sticky> -->
		<view class="content">
			<view class="orderStatusline">
				{{orderInfo.status_txt}}
			</view>
			<view class="userAddress">
				<view class="addressInfo">
					<view class="addressName">
						<span
							v-if="orderInfo.delivery.area">{{orderInfo.delivery.area}}</span>{{orderInfo.delivery.address}}
					</view>
					<view class="userInfo">
						<span>{{orderInfo.delivery.contacts}}</span>
						<span>{{orderInfo.delivery.phone}}</span>
						<span class="active">{{orderInfo.delivery_typename}}</span>
					</view>
				</view>
				<view class="navigationModel"
					@click="gotoHere(orderInfo.delivery.address,orderInfo.delivery.lat,orderInfo.delivery.lng)"
					v-if="orderInfo.delivery_type == 1">
					<view class="navigationIcon">
						<image class="init_image" src="http://amy.yyinhong.cn/uploads/wximg/dh.png" mode=""></image>
					</view>
					<view class="navigationText">
						导航
					</view>
				</view>
			</view>
			<view :class="[orderInfo.order_status == 3?'orderModel1':'orderModel']"
				v-for="(item,index) in orderInfo.order_goods" :key="index">
				<view class="orderImg" @click="$utils.goProductDetails(item.goods_id)">
					<image class="init_image" :src="item.goods_img" mode=""></image>
				</view>
				<view class="orderProductInfo" @click="$utils.goProductDetails(item.goods_id)">
					<view class="orderName">
						{{item.goods_name}}
					</view>
					<view class="orderNorms">
						<span>{{item.goods_attr}}</span>
						<span>x{{item.goods_number}}</span>
					</view>
					<view class="orderPrice">
						<span>¥</span>{{item.goods_price}}
					</view>
				</view>
			</view>
			<view class="orderInfo">
				<view class="orderLine">
					<span>订单号</span>
					<span>{{orderInfo.order_sn}}</span>
				</view>
				<view class="orderLine">
					<span>下单时间</span>
					<span>{{orderInfo.created_at}}</span>
				</view>
				<view class="orderLine">
					<span>合计金额</span>
					<span class="active">{{orderInfo.order_amount}}</span>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo: {
					status_txt: null,
					order_sn: null,
					created_at: null,
					order_amount: null,
				},
				id: '',
				navBarHeight: getApp().globalData.navBarHeight,
			}
		},
		onLoad(option) {
			this.id = option.id;
		},
		onShow() {
			this.getOrder()
		},
		methods: {
			goCode(code) {
				uni.navigateTo({
					url: '/pageSub-pc/pages/orderCode/orderCode?code=' + code
				})
			},
			payMthods(order_id) {
				this.$utils.payOrder(order_id)
			},
			gotoHere(address, lat, lng) {
				console.log(address, lat, lng)
				uni.openLocation({
					longitude: parseFloat(lng), // 经度，范围为-180~180，负数表示西经
					latitude: parseFloat(lat), // 纬度，范围为-90~90，负数表示南纬
					scale: 28, // 缩放比例
					name: address, //终点名称
					address: address, //终点详细地址
					success: function(res) {
						console.log('success:', res);
					}
				});
			},
			//获取订单详情
			getOrder() {
				this.$request('/order-info', 'GET', {
					order_id: this.id
				}).then(res => {
					console.log(res.data)
					this.orderInfo = res.data;
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			},
			del_order() {
				this.$request('/cance-order', 'POST', {
					order_id: this.id
				}).then(res => {
					console.log(res.data)
					this.$refs.uToast.show({
						type: 'success',
						message: "订单取消成功！",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png',
						complete() {
							uni.navigateBack()
						}
					})
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			},
			//写评价
			gowriteEvaluation(id) {
				uni.navigateTo({
					url: '/pageSub-pc/pages/writeEvaluation/writeEvaluation?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pageContent {
		position: relative;
	}

	/* 其他样式 */
	.content {
		width: 100vw;
		height: calc(100vh - 220rpx);
		padding-top: 30rpx;
		overflow-y: scroll;
		background: linear-gradient(to bottom, #f3d4d7, #f8f8f8, #f8f8f8);
	}

	.orderStatusline {
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		color: #333333;
		font-weight: 600;
	}

	.userAddress {
		width: calc(100% - 120rpx);
		margin: 30rpx;
		padding: 30rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
	}

	.addressInfo {
		flex: 1;
	}

	.addressName {
		width: 100%;
		font-size: 30rpx;
		color: #333333;
		line-height: 44rpx;
		display: -webkit-box;
		/* 使用弹性盒模型 */
		-webkit-box-orient: vertical;
		/* 垂直方向的弹性盒 */
		-webkit-line-clamp: 2;
		/* 显示两行 */
		overflow: hidden;
		/* 隐藏超出部分 */
		text-overflow: ellipsis;
	}

	.userInfo {
		line-height: 34rpx;
		font-size: 24rpx;
		color: #999999;

		span {
			margin-right: 20rpx;
		}

		.active {
			color: #D3195E;
		}
	}

	.navigationModel {
		width: 40rpx;
		margin-left: 20rpx;
		font-size: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.navigationIcon {
			width: 44rpx;
			height: 44rpx;
			margin-bottom: 10rpx;
			border-radius: 44rpx;
		}
	}

	.orderModel {
		width: calc(100% - 120rpx);
		margin: 30rpx;
		padding: 30rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
	}

	.orderModel1 {
		width: calc(100% - 120rpx);
		margin: 30rpx;
		padding: 30rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
		padding-bottom: 80rpx;
		position: relative;
	}

	.orderImg {
		background-color: #f3d4d7;
		width: 180rpx;
		height: 180rpx;
		margin-right: 30rpx;
	}

	.orderProductInfo {
		height: 180rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.orderName {
		font-size: 30rpx;
		color: #333333;
		line-height: 36rpx;
		display: -webkit-box;
		/* 使用弹性盒模型 */
		-webkit-box-orient: vertical;
		/* 垂直方向的弹性盒 */
		-webkit-line-clamp: 2;
		/* 显示两行 */
		overflow: hidden;
		/* 隐藏超出部分 */
		text-overflow: ellipsis;
		/* 使用省略号 */
	}

	.orderNorms {
		line-height: 58rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		color: #999999;
		font-size: 24rpx;
	}

	.orderPrice {
		height: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: baseline;
		color: #D61A62;
		font-size: 36rpx;

		span {
			font-size: 24rpx;
			margin-right: 10rpx;
		}
	}

	.orderInfo {
		width: calc(100% - 120rpx);
		margin: 30rpx;
		padding: 30rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
		height: 200rpx;
	}

	.orderLine {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #333333;

		.active {
			color: #D61A62;
		}
	}

	.orderBtnList {
		position: fixed;
		bottom: 0;
		left: 0;
		width: calc(100% - 120rpx);
		padding: 60rpx;
		padding-top: 30rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		height: 60rpx;
		line-height: 58rpx;
	}

	.orderBtn {
		height: 58rpx;
		width: 160rpx;
		text-align: center;
		border-radius: 58rpx;
		border: 1rpx solid #D3195E;
		background-color: #D3195E;
		color: #ffffff;
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	.orderOtherBtn {
		height: 58rpx;
		line-height: 58rpx;
		width: 160rpx;
		text-align: center;
		border-radius: 58rpx;
		border: 1rpx solid #777777;
		background-color: #ffffff;
		color: #777777;
		margin-left: 20rpx;
		font-size: 28rpx;
	}
</style>