<template>
	<view  class="deliver">
		<view class="buzhou qy-bg-white margin-bottom-sm">
			<view class="bz margin-bottom">
				<view class="bz_l">
					<view class="bz_l_01">{{__('上传送达照片')}}</view>
					<view class="bz_l_02 qy-text-grey">
						<view class="m-upImg">
							<view class="m-upImg-item" v-for="(imglist, ii) in service_image1"   :key="ii">
								<image  :src="(imglist)" ></image>
							</view>
							<view v-if="true"  class="m-upImg-item upSelect" :data-index="1"  @click.stop="upImgs">
								<label  class="iconfont icon-xiangji"></label>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bz margin-bottom">
				<view class="bz_l">
					<view class="bz_l_01">{{__('上传签单照片')}}</view>
					<view class="bz_l_02 qy-text-grey">
						<view class="m-upImg">
							<view class="m-upImg-item" v-for="(imglist, ii) in service_image2"   :key="ii">
								<image  :src="(imglist)" ></image>
							</view>
							<view v-if="true"  class="m-upImg-item upSelect" :data-index="2"  @click.stop="upImgs">
								<label  class="iconfont icon-xiangji"></label>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bz margin-bottom">
				<view class="bz_l">
					<view class="bz_l_01">{{__('上传其它照片')}}</view>
					<view class="bz_l_02 qy-text-grey">
						<view class="m-upImg">
							<view class="m-upImg-item" v-for="(imglist, ii) in service_image3"   :key="ii">
								<image  :src="(imglist)" ></image>
							</view>
							<view v-if="true"  class="m-upImg-item upSelect" :data-index="3"  @click.stop="upImgs">
								<label  class="iconfont icon-xiangji"></label>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="pic"></view>
		</view>
		<view class="bbtn padding qy-bg-white">
			<view class="flex flex-direction bbtn_10" >
				<button class="cu-btn bg-yellow round" @click="submit">{{__('确定')}}</button>
			</view>
			<!-- <view class=" flex flex-direction  bbtn_10" >
				<button class="cu-btn bg-gery  round" >自己来</button>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				tel:'123',
				service_image1: [],
				service_image2: [],
				service_image3: [],
				po_id: '',
			};
		},
		
		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
				})
			}
			
	
		
		},
		methods:{
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
			jump_navigation(){
				uni.navigateTo({
					url: '/horseman/navigation/navigation'
				});
			},
			ontel(){
				const phone=this.tel
			    uni.makePhoneCall({
			     phoneNumber: phone
			    });
			},
			
			submit: function(e) {
				var that = this;
				
				if(that.service_image1.length == 0)
				{
					that.$.alert(that.__('请上传送达图片！'));
					return;
				}
				if(that.service_image2.length == 0)
				{
					that.$.alert(that.__('请上传签单图片！'));
					return;
				}
				
				var array = that.service_image1.concat(that.service_image2,that.service_image3)
				var params = {
					po_id: that.po_id,
					po_pickup_image: JSON.stringify(array)
				};
		
				that.$.request({
					url: that.Config.URL.city.order_signin,
					data: params,
					success: function(data, status, msg, code) {
							
							
								
								
								if(status == 200)
								{
									that.$.alert(msg,function() {
										that.$.navigateTo({
										    url: "/paotui/order/lists?state=1"
										})			
									})
								}
								else
								{
									that.$.alert(msg)
								}
									
						
							
							
						
					}
				});
			
				
			},
			
			upImgs: function(e) {
				var that = this;
		
				var index = e.currentTarget.dataset.index
				var key = e.currentTarget.dataset.key
			
					switch(parseInt(index)){
						case 1:
							if (that.service_image1 && that.service_image1.length == 3) {
								that.$.alert(that.__('最多上传3张图片！'));
								return;
								}
							break;
						case 2:
							if (that.service_image2 && that.service_image2.length == 3) {
								that.$.alert(that.__('最多上传3张图片！'));
								return;
								}
							break;
						case 3:
							if (that.service_image3 && that.service_image3.length == 3) {
								that.$.alert(that.__('最多上传3张图片！'));
								return;
								}
							break;
						default:
							
							break;	
					}
		
			
			
				//that.$.showLoading();
					that.$.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						success: function(n) {
							that.$.showLoading();
							var r = n.tempFilePaths;
							that.$.uploadFile({
								url: that.Config.URL.upload,
								method: 'POST',
								filePath: r[0],
								name: 'upfile',
								//header: { 'content-type': 'multipart/form-data' },
								success: function(n) {
									that.$.hideLoading();
									var up_res = that.$.parseJSON(n.data);
			
									var s = up_res.data.url;
					
									switch(parseInt(index)){
										case 1:
											that.service_image1.push(s);
											break;
										case 2:
											that.service_image2.push(s);
											break;
										case 3:
											that.service_image3.push(s);
											break;
										default:
											
											break;	
									}
			
								},
								fail: function(e) {
									that.$.hideLoading();
								},
								complete: function(e) {
									that.$.hideLoading();
								}
							});
						},
						fail: function(e) {
							that.$.hideLoading();
						},
						complete: function(e) {
							that.$.hideLoading();
						}
					});
			},
		}
	}
</script>

<style lang="scss">
	@import "../../styles/colorui/main";
	@import "../../paotui/css/paotui";
.deliver{
	padding:0 20rpx;
	.time{display: flex;padding: 10px 10px 5px;
		span{font-size: 22px;}
		.time_l{width: 50%;text-align: center;}
		.time_m{border-left: 1px solid #F2F2F2;margin-top: 10px;height: 20px;}
	}
	.buzhou{padding: 10px 10px 1px;
		.bz{display: flex;justify-content: space-between;
			.bz_l{width: 100%;
				.bz_l_01{font-weight: 600;}
				.bz_l_02{font-size: 12px;}
			}
			.cu-btn{width: 100px;}
		}
		.pic{height: 80px;}
	}
	.mingxi{padding: 10px;
		.mx{display: flex;padding-bottom: 10px;
			.mx_l{width: 80px;flex-shrink: 0;}
			.mx_r{color: #767676;}
		}
	}
	.bbtn{display: flex;justify-content: space-between;position: fixed;bottom: 0;width: 100%;
		.bbtn_10{width: 100%;}
	}
	
	.m-upImg-item{
		width: 88rpx;
		height: 88rpx;
		float: left;
		margin: 10rpx;
	}
	
	image {
		width: 88rpx;
		height: 88rpx;
	}
	
	.icon-xiangji {
		line-height: 88rpx;
		margin-left: 28rpx;
	}
}
</style>
