<template>
	<view class="pageContent">
		<!-- 吸顶自定义导航栏 -->
		<u-sticky offset-top="0"><my-backNar /></u-sticky>
		<view class="content">
			<view class="userAddress" v-show="delivery">
				<view class="addressInfo">
					<view class="addressName">
						{{delivery.address?delivery.address:''}}{{delivery.area?delivery.area:''}}
					</view>
					<view class="userInfo">
						<span>{{delivery.contacts}}</span>
						<span>{{delivery.phone}}</span>
						<span class="active">{{orderInfo.delivery_typename}}</span>
					</view>
				</view>
				<view class="navigationModel" @click="gotoHere(delivery.lat,delivery.lng)">
					<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="productModel" v-for="(item,index) in orderInfo.order_goods" :key="index">
				<view class="productImg">
					<image class="init_image" :src="item.goods_img" mode="">
					</image>
				</view>
				<view class="productInfo">
					<view class="productName">
						{{item.goods_name}}
					</view>
					<view class="productNorms">
						<span>{{item.goods_attr}}</span>
						<span>x{{item.goods_price}}</span>
					</view>
					<view class="productPrice">
						<span>¥</span>{{item.goods_number}}
					</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 class="applyModel">
				<view class="applyBtn" @click="goWriteOff">确认核销</view>
			</view>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo: {
					order_goods: [],

				},
				delivery: '',
				orderNum: '',
				navBarHeight: getApp().globalData.navBarHeight,
			}
		},
		onLoad(option) {
			this.orderNum = option.num;
			this.getOrderInfo();
		},
		methods: {
			//导航
			gotoHere(lat, lng) {
				let _this = this
				let address = null;
				address = this.delivery.address ? this.delivery.address : this.delivery.area;
				uni.openLocation({
					longitude: parseFloat(lng), // 经度，范围为-180~180，负数表示西经
					latitude: parseFloat(lat), // 纬度，范围为-90~90，负数表示南纬
					scale: 18, // 缩放比例
					name: _this.orderInfo.delivery_typename, //终点名称
					address: address, //终点详细地址
					success: function(res) {
						console.log('success:', res);
					}
				});
			},
			//获取订单信息
			getOrderInfo() {
				this.$request('/scan-code-detail', 'POST', {
					code: this.orderNum
				}).then(res => {
					console.log(res.data)
					this.orderInfo = res.data;
					this.delivery = res.data.delivery;
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message,
						duration: 6000,
						complete() {
							// uni.reLaunch({
							// 	url: '/pages/writeOffindex/writeOffindex'
							// });
						}
					})
					// 					uni.showToast({
					// 						icon: 'error',
					// 						title: '二维码错误，请扫描正确的二维码',

					// duration: 6000
					// 					})
				})
			},
			// 确认核销
			goWriteOff() {
				this.$request('/scan-code-verifi', 'POST', {
					code: this.orderNum
				}).then(res => {
					this.$refs.uToast.show({
						type: 'success',
						message: '核销成功！',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
						complete() {
							uni.redirectTo({
								url: '/pages/writeOffindex/writeOffindex'
							})
						}
					})
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			}
		}
	}
</script>

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

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

	.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;
			// background-color: #D3195E;
			border-radius: 44rpx;
		}
	}

	.productModel {
		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;
	}

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

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

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

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

	.productPrice {
		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;
		}
	}
</style>