<template>
	<view class="center">
		<view class="picture">
			<view style="margin: 0 auto;height: 240px;" v-if="travels != ''"  @click="travel">
				<image v-bind:src = "travels"  class="picture"></image>
				<view class="floats" v-if="certificates == true">
					<image src="../../static/img/authentication/xiangji@3x.png" style="width: 60px;height: 50px;"></image>
				   <view class="words">
				   	上传行驶证
				   </view>
				</view>
			</view>
			<view style="margin: 0 auto;height: 240px;" v-if="drives != ''"  @click="drive">
				<image v-bind:src = "drives"  class="picture"></image>
				<view class="floats" v-if="certificatesTwo == true">
					<image src="../../static/img/authentication/xiangji@3x.png" style="width: 60px;height: 50px;"></image>
				   <view class="words">
				   	上传驾驶证
				   </view>
				</view>
			</view>
			<view style="margin: 0 auto;height: 240px;" v-if="practices != ''"  @click="practice">
				<image v-bind:src = "practices"  class="picture"></image>
				<view class="floats" v-if="certificatesThree == true">
					<image src="../../static/img/authentication/xiangji@3x.png" style="width: 60px;height: 50px;"></image>
				   <view class="words">
				   	上传道路运营证
				   </view>
				</view>
			</view>
			<view style="margin: 0 auto;height: 240px;" v-if="operates != ''" class="fujian" @click="operate">
				<image v-bind:src = "operates"  class="picture"></image> 
				<view class="floats" v-if="certificatesFour == true">
					<image src="../../static/img/authentication/xiangji@3x.png" style="width: 60px;height: 50px;"></image>
				   <view class="words">
				   	上传从业资格证
				   </view>
				</view>
			</view>
			 <button class="btns btn"  @click="commit">提交</button>

		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				travels: "../../static/img/authentication/travel(3).png",
				drives: "../../static/img/authentication/drive(3).png",
				practices: "../../static/img/authentication/business@3x.png",
				operates: "../../static/img/authentication/business@3x.png",
				DriverViewInfo: {	
				},
				addressUrl:[],
				certificates:true,
				certificatesTwo:true,
				certificatesThree:true,
				certificatesFour:true,
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(options){
			this.DriverViewInfo = JSON.parse(options.DriverViewInfo)
		},
		methods:{
			commit() {
				var that = this
				if (this.addressUrl[0] == "" || this.addressUrl[0] == null) {
					this.$api.msg('请上传行驶证！')
					return
				}
				if (this.addressUrl[1] == "" || this.addressUrl[1] == null) {
					this.$api.msg('请上传驾驶证！')
					return
				}
				if (this.addressUrl[2] == "" || this.addressUrl[2] == null) {
					this.$api.msg('请上传道路运营证！')
					return
				}
				if (this.addressUrl[3] == "" || this.addressUrl[3] == null) {
					this.$api.msg('请上传从业资格证')
					return
				}
				this.DriverViewInfo.addressUrl = this.addressUrl.toString()
				this.DriverViewInfo.commonId = this.userInfo.id
				this.DriverViewInfo.pcFlag = 0
				this.DriverViewInfo.compId = "2710b21efc1e4393930c5dc800010dc4"

				var that = this
				uni.showModal({
					content: "确认提交司机信息？",
					showCancel: true,
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							that.$api.doRequest('post', '/driverViewInfo/api/addInfo', that.DriverViewInfo).then(res => {
								if(res.data.code=='ERROR001'){
									uni.showModal({
										title: '提示',
										content: '该手机号已认证过司机，再次认证将覆盖之前的认证信息，是否确定认证？',
										success: function (res) {
											if (res.confirm) {
												that.DriverViewInfo.cover=1
													that.$api.doRequest('post', '/driverViewInfo/api/editInfo', that.DriverViewInfo).then(res => {
													}).catch(res => {
														uni.showToast({
															title: '提交成功',
															icon: 'none',
															duration: 2000
														})
														uni.navigateTo({
															url: `/pages/attestation/indexThree` 
														})
													})
										        } else if (res.cancel) {
										          uni.showToast({
										          	title: '提交失败',
										          	icon: 'none',
										          	duration: 2000
										          })
										        }
										    }
										});
								}else if(res.data.code==200){
									uni.showToast({
										title: '提交成功',
										icon: 'none',
										duration: 2000
									})
									uni.navigateTo({
										url: `/pages/attestation/indexThree` 
									})
								}
								
							}).catch(res => {
									uni.showToast({
										title: res.data.message,
										icon: 'none',
										duration: 2000
									})
							})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					},

				})
				
				
				
			},
			travel(){
				var that = this
				wx.chooseImage({
					success: function(res) {
						wx.uploadFile({
							url: 'https://www.zthymaoyi.com/upload/admin',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success(res) {
								var data = res.data
								var strToObj = JSON.parse(data)			
								that.travels = strToObj.url
								that.addressUrl[0] = strToObj.url
								that.certificates = false
							}
						})
					}
				})
				},
				drive(){
					var that = this
					wx.chooseImage({
						success: function(res) {
							wx.uploadFile({
								url: 'https://www.zthymaoyi.com/upload/admin',
								filePath: res.tempFilePaths[0],
								name: 'file',
								success(res) {
									var data = res.data
									var strToObj = JSON.parse(data)			
									that.drives = strToObj.url
										that.addressUrl[1] = strToObj.url
									that.certificatesTwo = false
								}
							})
						}
					})
					},
					practice(){
						var that = this
						wx.chooseImage({
							success: function(res) {
								wx.uploadFile({
									url: 'https://www.zthymaoyi.com/upload/admin',
									filePath: res.tempFilePaths[0],
									name: 'file',
									success(res) {
										var data = res.data
										var strToObj = JSON.parse(data)			
										that.practices = strToObj.url
											that.addressUrl[2] = strToObj.url
										that.certificatesThree = false
									}
								})
							}
						})
					},
					operate(){
						var that = this
						wx.chooseImage({
							success: function(res) {
								wx.uploadFile({
									url: 'https://www.zthymaoyi.com/upload/admin',
									filePath: res.tempFilePaths[0],
									name: 'file',
									success(res) {
										var data = res.data
										var strToObj = JSON.parse(data)			
										that.operates = strToObj.url
											that.addressUrl[3] = strToObj.url
										that.certificatesFour = false
									}
								})
							}
						})
					},
					
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		padding: 10px 20px;
		background-color: #F5F6FA;
	}
	.picture{
		width: 100%;
		 height: 220px;
		 text-align: center;
		 margin-top: 10px;
	}

		
	
	.btn {
		margin-top: 10px;
		background-color: #FFFFFF;
		border-radius: 25px;
		border: none;
	}
	.btns{
		background-color: #22C572;
	}
	.words{
		font-size: 18px;
		font-weight: 600;
		color: #617E8B;
		}
		.floats{
			position: relative;
			top: -150px;
		}
</style>
