<template>
	<view class="detail" style="padding: 0 20rpx;">
		<view class="title bg-white hide">
			<view class="iconfont icon-cuowutishi qy-text-red" style="font-size: 30px;"></view>
			<view class="qy-text-red">商家取消了订单</view>
			<view class="title_yy">
				<view class="title_yy_l qy-text-grey">取消原因：商户同意用户退款</view>
				<view class="title_yy_r"><view class="iconfont icon-tishi" ></view>取消规则</view>
			</view>
		</view>
		<view class="ddps">
			<view class="ddps_l"><img class="pare_logo":src="(info.store_logo)"></img></view>
			<view class="ddps_r">{{info.po_id}}</view>
		</view>
		<view class="list qy-bg-white">
			<view class="li" >
				<view class="li_m">{{__('商家名称')}}</view>
				<view class="li_r">{{info.store_name}}</view>
			</view>
			<view class="li">
				<view class="li_m">{{__('商家电话')}}</view>
				<view class="li_r">{{info.store_tel}}</view>
			</view>
		</view>
		<view class="list qy-bg-white">
			<view class="li" >
				<view class="li_m">{{__('客人姓名')}}</view>
				<view class="li_r">{{info.po_receive_name}}</view>
			</view>
			<view class="li">
				<view class="li_m">{{__('客人电话')}}</view>
				<view class="li_r">{{receive_tel}}</view>
			</view>
		</view>
		
		<view class="list qy-bg-white">
			<view class="li" >
				<view class="li_m">{{__('本单收入')}}</view>
				<view class="li_r">{{__('￥')}}{{info.po_freight}}</view>
			</view>
			<view class="li">
				<view class="li_m">{{__('结束时间')}}</view>
				<view class="li_r">{{info.po_endtime}}</view>
			</view>
			<view class="li">
				<view class="li_m">{{__('期望时间')}}</view>
				<view class="li_r">{{info.po_expectedtime}}</view>
			</view>
			<view class="li">
				<view class="li_m">{{__('备注')}}</view>
				<view class="li_r">{{info.po_remark}}</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="shang bg-white">
			{{__('签收照片')}}<span class="text-gery text-sm"></span>
		</view>
		<view class="packer bg-white">
			<block v-for="(item,index) in info.po_pickup_image">
				<view class="pac bg-gray text-bold">
					<image :src="item" :data-src="item" @click="ImgTap"></image>
				</view>
			</block>
		</view>
		
		<view class="list qy-bg-white">
			<view class="li" >
				<view class="li_m">{{__('签收时间')}}</view>
				<view class="li_r">{{info.po_endtime}}</view>
			</view>
		</view>
		
	
		<view class="time qy-bg-white margin-top-sm" v-if="(false)">
			<view class="time_l ">
				<view class="time_l_01 ">{{__('本单收入')}}</view>
				<view class="time_l_02">{{__('￥')}}{{info.po_freight}}</view>
			</view>
			<view class="time_m"></view>
			<view class="time_l ">
				<view class="time_r_01">{{__('下单时间')}}</view>
				<view class="time_r_02">{{info.order_time}}</view>
			</view>
			<view class="time_m"></view>
			<view class="time_l ">
				<view class="time_r_01">{{__('期望时间')}}</view>
				<view class="time_r_02">{{info.po_expectedtime}}</view>
			</view>
		</view>
		<view class="padding flex flex-direction margin-top-sm">
			<button class="cu-btn bg-yellow round lg">{{__('已送达')}}</button>
		</view>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				po_id: '',
				info: {},
				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
							})
				   		
				   	}
				   });
			   },
			   
			   ImgTap: function(e) {
			   	var that = this,
			   		urls = [];
			   console.log(e)
			   	
			   		urls.push(e.target.dataset.src);
			   	
			   	var s = e.target.dataset.src;
			   
			   	that.$.previewImage({ current: s, urls: urls });
			   },
		}

	}
</script>

<style lang="scss">
	@import "../../styles/colorui/animation";
	@import "../../styles/colorui/icon";
	@import "../../styles/colorui/main";
	@import "../../paotui/css/paotui";
.detail{

	.title{text-align: center;padding: 25px 0 10px;font-size: 16px;
		.title_yy{display: flex;justify-content: space-between;width: 100%;padding: 25px 10px 2px;font-size: 12px;}
		.title_yy_r{display: flex;}
	}
	.ddps{display: flex;padding: 10px;justify-content: space-between;
		.ddps_r{font-weight: 600;line-height: 80rpx;}
	}
	.time{display: flex;padding: 10px 10px;
		span{font-size: 22px;}
		.time_l{width: 50%;text-align: center;}
		.time_m{border-left: 1px solid #F2F2F2;margin-top: 5px;height: 25px;}
	}
	
	.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{
		
		}
		
	} 
	
	.qy-bg-yellow {
		background-color: #FBBD08;
	}
	
	.text-white {
		color: #ffffff;
	}
	
	.qy-bg-red {
		background-color: #FB303C;
	}
	
	.pare_logo {
		width:80rpx;
		height:80rpx;
		float:left;
	}
	.list {
		margin:20rpx 0;
	}
	.li{display: flex;border-bottom: 1px solid #F9F9F9;height: 50px;line-height: 50px;padding: 0 10px;
		.li_l{width: 30px;line-height: 100rpx;}
		.li_m{flex-grow: 1;line-height: 100rpx;}
		.li_r{display: flex;color: #A6A6AB;line-height: 100rpx;}
	}
	
	.packer{display: flex;justify-content: space-around;border-bottom: 1px solid #F7F7F7;padding:24rpx 20rpx;
		.pac{background-color: #FAFAFA;text-align: center;
			image{width: 88rpx;height: 88rpx;}
		}
	}
	
	.shang {
		padding: 24rpx 20rpx;
		margin-top: 20rpx;
	}
	
	.lg{
		color: #ffffff;
	}
}
</style>
