<template>
	<view class="navigation">
		<view class="map">
			<map :latitude="latitude" :longitude="longitude" :markers="covers" :polyline="polyline"></map>
		</view>
		<view class="mingxi qy-bg-white margin-bottom-sm">
			<view class="mx hide">
				<view class="mx_l qy-text-grey">{{__('距离取货点')}}</view>
				<view class="mx_r">{{info.po_distance}}KM</view>
			</view>
			<view class="mx hide">
				<view class="mx_l qy-text-grey">{{__('期望时间')}}</view>
				<view class="mx_r">{{info.po_expectedtime}}</view>
			</view>
		</view>
		<view class="Process padding-xs">
			<view class="process_01">
				<view class="process_01_l">
					<view class="process_01_l_01 qy-bg-yellow text-white"><view class="tex">{{__('取')}}</view></view>
				</view>
				<view class="process_01_r">
					<view class="">{{__('地址')}}</view>
					<span>{{info.store_address}}</span>
				</view>
			</view>
			<view class="process_01">
				<view class="process_01_l">
					<view class="process_01_l_01 qy-bg-red text-white"><view class="tex">{{__('送')}}</view></view>
				</view>
				<view class="process_01_r">
					<view class="process_01_r_01">{{__('地址')}}</view>
					<span>{{info.po_receive_address}}</span>
				</view>
			</view>
		</view>
		<view class="mingxi qy-bg-white margin-top-sm">
			<view class="mx">
				<view class="mx_l qy-text-grey">{{__('商家名称')}}</view>
				<view class="mx_r">{{info.store_name}}</view>
			</view>
			<view class="mxs">
				<view class="mxs_l qy-text-grey">{{__('商家电话')}}</view>
				<view class="mxs_r">
					<view class="mxs_r_01">{{info.store_tel}}</view>
					<view class="mxs_r_02 qy-text-grey"><image class="grey-mobile" src="../images/user/Mobile@2x.png" :data-tel="info.store_tel" @click="callTel"></image></view>
				</view>
			</view>
			<view class="mx">
				<view class="mx_l qy-text-grey">{{__('收货人')}}</view>
				<view class="mx_r">{{info.po_receive_name}}</view>
			</view>
			<view class="mxs">
				<view class="mxs_l qy-text-grey">{{__('收货人电话')}}</view>
				<view class="mxs_r">
					<view class="mxs_r_01">{{receive_tel}}</view>
					<view class="mxs_r_02 qy-text-grey"><image class="grey-mobile" src="../images/user/Mobile@2x.png" :data-tel="info.po_receive_tel" @click="callTel"></image></view>
				</view>
			</view>
			<view class="mx">
				<view class="mx_l qy-text-grey">{{__('备注')}}</view>
				<view class="mx_r">{{info.po_remark}}</view>
			</view>
			<view class="mxs">
				<view class="mxs_l qy-text-grey">{{__('收入详情')}}</view>
				<view class="mxs_r">
					<view class="mxs_r_01">{{__('平台配送费')}}</view>
					<view class="mxs_r_02 ">{{__('￥')}}{{info.po_freight}}</view>
				</view>
			</view>
		<!-- 	<view class="mxs">
				<view class="mxs_l qy-text-grey"></view>
				<view class="mxs_r">
					<view class="mxs_r_01">平台配送费</view>
					<view class="mxs_r_02 ">￥2.5</view>
				</view>
			</view>
			<view class="mxs">
				<view class="mxs_l qy-text-grey"></view>
				<view class="mxs_r">
					<view class="mxs_r_01">小费</view>
					<view class="mxs_r_02 ">￥2.5</view>
				</view>
			</view> -->
		</view>
		<view class="H50"></view>
		<view class="foot">
			<view class="foot_l">
				<view class="foot_l_01 qy-text-red">
					{{__('￥')}}
					<span>{{info.po_freight}}</span>
				</view>
				<!-- <view class="foot_l_02">小费 ￥ 2.0</view> -->
			</view>
			<block v-if="(info.po_state_id == 1)">
				<view class="foot_r"><button class="cu-btn round bg-yellow" @click="jump_grabbing">{{__('立即抢单')}}</button></view>
			</block>
			<block v-if="(info.po_state_id == 2)">
				<view class="foot_r"><button class="cu-btn round bg-yellow" @click="jump_pickup">{{__('待取货')}}</button></view>
			</block>
			<block v-if="(info.po_state_id == 3)">
				<view class="foot_r"><button class="cu-btn round bg-yellow" @click="jump_service">{{__('已送达')}}</button></view>
			</block>
			
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			po_id: '',
			info: {},
			latitude: 36.909,
			longitude: 116.39742,
			covers: [{
				latitude: 36.9085,
				longitude: 116.39747,
		
			}, {
				latitude: 39.90,
				longitude: 116.39,
			}],
			polyline:[],
			receive_tel: ''
				
			
		};
	},
	computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
	onLoad: function(options) {
		uni.setNavigationBarTitle({
			title: this.__('订单导航')
		});

		this.forceUserInfo(function(user) {});

		if (options.po_id) {
			this.setData({
				po_id: options.po_id
			});
		}

		this.init();
	},

	methods: {
		...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),

		init: function() {
			var that = this;

			var params = {
				po_id: that.po_id
			};
			that.$.request({
				url: that.Config.URL.city.order_get,
				data: params,
				success: function(data, status, msg, code) {
					var tel = (data.po_receive_tel).toString();;
					var reg = /^(\d{3})\d{4}(\d{4})$/;
					tel = tel.replace(reg, "$1****$2");
					that.setData({
						info: data,
						receive_tel: tel,
						longitude: data.store_longitude,
						latitude: data.store_latitude,
					});
					
			
					  that.covers = [{
						  latitude: data.store_latitude,
						  longitude: data.store_longitude,
						  iconPath: '../../static/images/person.png',
						  callout: {
							  content: '骑手'
						  }
					  },{
						  latitude: data.po_receive_latitude,
						  longitude: data.po_receive_longitude,
						  iconPath: '../../static/images/person.png',
						  callout: {
							  content: '买家'
						  }
					  }]
		
					
					　that.polyline = [{//指定一系列坐标点，从数组第一项连线至最后一项
					　　　　points:[
					       　　{latitude: data.store_latitude,longitude: data.store_longitude},
					      　　 {latitude: data.po_receive_latitude,longitude: data.po_receive_longitude},
					　　　　],
					　　　　color:"#0000AA",//线的颜色
					　　　　width:2,//线的宽度
					　　　　dottedLine:true,//是否虚线
					　　　　arrowLine:true,    //带箭头的线 开发者工具暂不支持该属性
					　　}];
					
				}
			});
		},
		
		//送达
		jump_service(e){
			var that =  this;
	
			that.$.gopage("/paotui/order/signinpic?po_id=" + that.po_id);
			
		},
		//抢单
		jump_grabbing(e){
			var that =  this;
			
			var params = {
				po_id: that.po_id
			};
			
			that.$.showModal({
			    title: that.__("提示"),
			    content: "确认抢单？",
			    success: function (res) {
			        if (res.confirm) {
						that.$.request({
							url: that.Config.URL.city.order_apply,
							data: params,
							success: function(data, status, msg, code) {
								if(status == 200){
									that.$.alert(that.__('抢单成功'))
									that.setData({
										list:[],
										page: 1, 
										ispage: false,
										flag: true,
									})
									
									that.getOrder()
								}
								
							}
						});
				
					}
				},
			})
		
		},
		//取货
		jump_pickup(e){
			var that =  this;
			
			var params = {
				po_id: that.po_id
			};
			
			that.$.request({
				url: that.Config.URL.city.order_pickup,
				data: params,
				success: function(data, status, msg, code) {
						
						if(status == 200){
							that.$.alert('取货成功',function() {
								that.setData({
									list:[],
									page: 1, 
									ispage: false,
									flag: true,
								})
								
								that.getOrder()
							})
					
						}
						else
						{
							that.$.alert(msg)
						}
						
					
				}
			});
		},
		
		callTel: function(e) {
		  let that = this;
		  console.log(e.currentTarget.dataset.tel)
		  that.$.makePhoneCall({
		    phoneNumber: e.currentTarget.dataset.tel
		  });
		},
	}
};
</script>

<style lang="scss">
@import '../../styles/colorui/main';
@import '../../paotui/css/paotui';
.navigation {
	.map {
		height: 300px;
		image {
			width: 100%;
			height: 300px;
		}
	}
	.mingxi {
		padding: 10px;
		.mx {
			display: flex;
			padding-bottom: 10px;
			.mx_l {
				width: 90px;
				flex-shrink: 0;
				text-align: right;
				padding-right: 20px;
			}
			.mx_r {
				color: #767676;
			}
		}
		.mxs {
			display: flex;
			padding-bottom: 10px;
			.mxs_l {
				width: 90px;
				flex-shrink: 0;
				text-align: right;
				padding-right: 20px;
			}
			.mxs_r {
				display: flex;
				justify-content: space-between;
				color: #767676;
				flex-grow: 1;
			}
		}
	}
	.H50 {
		height: 100px;
	}
	.foot {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		padding: 10px;
		display: flex;
		justify-content: space-between;
		.foot_l {
			display: flex;
			.foot_l_01 span {
				font-size: 24px;
				padding-right: 5px;
			}
			.foot_l_02 {
				padding-top: 8px;
				color: #767676;
			}
		}
	}

	.Process {
		background-color: #fff;
		padding: 10px;
		.process_01 {
			display: flex;
			padding: 10px 0;
			justify-content: space-between;
			border-bottom: 1px solid #fafafa;
			.process_01_l {
				width: 10%;
				display: flex;
				align-items: center;
				.process_01_l_01 {
					width: 20px;
					height: 20px;
					text-align: center;
					line-height: 20px;
					font-size: 12px;
					border-radius: 16px 16px 16px 0;
					-webkit-transform: rotate(-45deg);
					-moz-transform: ratate(-45deg);
					transform: rotate(-45deg);
					.tex {
						transform: rotate(45deg);
					}
				}
			}
			.process_01_r {
				width: 88%;
				font-size: 16px;
				font-weight: 600;
				.process_01_r_01 {
					padding-bottom: 5px;
				}
				span {
					font-size: 12px;
					font-weight: 100;
				}
			}
		}
		.icon-map {
		}
	}
	
	.foot_r {
		line-height: 80rpx;
	}
	
	map {
		width: 100%;
		height: 600rpx;
	}
	
	.grey-mobile {
		width:30rpx;
		height: 40rpx;
	}
}
</style>
