<template>
	<view class="fill">
		<view class="bg-white padding margin-bottom-sm" @tap="NumSteps">
			<view class="cu-steps" >
				<view class="cu-item" :class="index>num?'':'text-blue'" v-for="(item,index) in numList" :key="index">
					<text class="num" :data-index="index + 1"></text> {{item.name}}
				</view>
			</view>
		</view>
		<view class="bg-white margin-bottom-sm">
			<view class="cu-form-group ">
				<view class="title">{{__('姓')}}<span class="padding-left padding-right"></span>{{__('名')}}</view>
				<input :placeholder="__('请输入')" name="input" v-model="user_realname"></input>
			</view>
			<view class="cu-form-group ">
				<view class="title">{{__('性')}}<span class="padding-left padding-right"></span>{{__('别')}}</view>
				<view> 
					<radio-group @change="radioChange">
						<radio name="name1" class="radio" color="#F2C100" :checked="user_gender == 1? true : false"  value="1"></radio>{{__('男')}}
						<span class="padding-left"></span>
						<radio name="name1" class='radio' color="#F2C100" :checked="user_gender == 2? true : false"   value="2"></radio>{{__('女')}}
					</radio-group>
				</view>

			</view>
			<view class="cu-form-group ">
				<view class="title">{{__('申请业务')}}</view>
				<view> 
					<radio-group @change="radioChange">
						<radio name="name1" class="radio" color="#F2C100" :checked="radio=='A'?true:false" value="A"></radio>{{__('跑腿')}}
						<span class="padding-left-sm"></span>
						<!-- <radio name="name1" class='radio' :checked="radio=='B'?true:false" value="B"></radio>代驾
						<span class="padding-left-sm"></span>
						<radio name="name1" class='radio' :checked="radio=='B'?true:false" value="B"></radio>货运
						<span class="padding-left-sm"></span>
						<radio name="name1" class='radio' :checked="radio=='B'?true:false" value="B"></radio>家政 -->
					</radio-group>
				</view>
			
			</view>
			<view class="cu-form-group ">
				<view class="title">{{__('身份证号')}}</view>
				<input :placeholder="__('请输入')" name="input" v-model="user_idcard"></input>
			</view>
			<view class="cu-form-group ">
				<view class="title">{{__('居住地址')}}</view>
				<input :placeholder="__('请输入')" name="input" v-model="user_address"></input>
			</view>
		</view>
		<view class="pic bg-white padding">
			<view class="pic_01">
				<view v-if="(user_idcard_images0)">
					<img class="uni-uploader__img" :src="user_idcard_images0"  data-index="0" @click.stop="upImgs"></img>
				</view>
				<view v-else>
					<img src="../images/user/sfz1.png" data-index="0" @click.stop="upImgs"></img>
				</view>
				{{__('请上传身份证正面')}}
			</view>
			<view class="pic_01">
				<view v-if="(user_idcard_images1)">
					<img class="uni-uploader__img" :src="user_idcard_images1" data-index="1" @click.stop="upImgs"></img>
				</view>
				<view v-else>
					<img src="../images/user/sfz2.png" data-index="1" @click.stop="upImgs"></img>
				</view>
				{{__('请上传身份证反面')}}
			</view>
			<view class="pic_01">
				<view v-if="(user_idcard_images2)">
					<img class="uni-uploader__img" :src="user_idcard_images2" data-index="2" @click.stop="upImgs"></img>
				</view>
				<view v-else>
					<img src="../images/user/sfz2.png" data-index="2" @click.stop="upImgs"></img>
				</view>
				{{__('请上传手持身份证照片')}}
			</view>
		</view> 
		<view class=" padding qy-bg-white">
			<view class=" flex flex-direction  bbtn_10 padding-left-xs" >
				<button class="cu-btn bg-yellow text-white round lg"  v-if="(ptm_state == 1)">{{__('已完成')}}</button>
				<button class="cu-btn bg-yellow text-white round lg" @click="submit" v-else>{{__('确认提交')}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				numList: [{
					name: '注册',
				}, {
					name: '完善资料',
				}, {
					name: '审核中',
				}, {
					name: '审核通过',
				}, ],
				info: {},
				user_realname: '',
				user_idcard: '',
				user_address: '',
				user_gender: 1,
				user_idcard_images0: '',
				user_idcard_images1: '',
				user_idcard_images2: '',
				num: 1,
				radio: 'A',
				checkbox: [{
					value: 'A',
					checked: true
				}, {
					value: 'B',
					checked: true
				}, {
					value: 'C',
					checked: false
				}],
				
				ptm_state: 0,
			};
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		onLoad: function(options) {
			var that =this;
		
			uni.setNavigationBarTitle({
				title:this.__('完善资料')
			});
			that.forceUserInfo(function(user) {
                    console.log('..........')
				
            });
			
			if(options.ptm_state)
			{
					
				that.setData({
					ptm_state: options.ptm_state
				})
				that.init()
			}
		
			
		},
		methods:{
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
			radioChange(e){
				this.setData({
					user_gender: e.detail.value
				})
			},
			NumSteps() {
				this.num= this.num == this.numList.length - 1 ? 0 : this.num + 1				
			},
			
			init: function() {
				var that = this;
				var params = {};
				that.$.request({
					url: that.Config.URL.account.certificate.replace(/typ=e/, "typ=json"),
					data: params,
					success: function(data, status, msg, code) {
							
							if(data.user_certification > 0)
							{
								that.setData({
									user_realname: data.user_realname,
									user_gender: data.user_gender,
									user_address: data.user_address,
									user_idcard: data.user_idcard,
									num: data.user_idcard,
									user_idcard_images0: data.user_idcard_images[0],
									user_idcard_images1: data.user_idcard_images[1],
									user_idcard_images2: data.user_idcard_images[2],
								})
								
								if(data.user_certification  == 1)
								{
									that.setData({
											num: 4,
									})
								}
								else
								{
									that.setData({
											num: 3,
									})
								}
							}
						
					}
				});
			},
			
			upImgs: function(e) {
							var that = this;
							var index = e.currentTarget.dataset.index;
							let ukey = uni.getStorageSync('ukey');
							
							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",
										formData: {'perm_key':ukey},
			// 							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 0:
													that.user_idcard_images0 = s
													break;
												case 1:
													that.user_idcard_images1 = s
													break;
												case 2:
													that.user_idcard_images2 = s
													break;		
												default:
													
													break;
											}
											
										},
										fail: function(e) {
											that.$.hideLoading()
										},
										complete: function(e) {
											that.$.hideLoading()
										}
									})
								},
								fail: function(e) {
									that.$.hideLoading()
								},
								complete: function(e) {
									that.$.hideLoading()
								}
							})
							
							
						},
						
			submit: function() {
				var that = this;
				var user_idcard_images = [];
				user_idcard_images[0] = that.user_idcard_images0;
				user_idcard_images[1] = that.user_idcard_images1;
				user_idcard_images[2] = that.user_idcard_images2;
				var params = {
					user_realname: that.user_realname,
					user_idcard: that.user_idcard,
					user_address: that.user_address,
					user_gender: that.user_gender,
					user_idcard_images: JSON.stringify(user_idcard_images),
				};
				that.$.request({
					url: that.Config.URL.city.paotui_certificate,
					data: params,
					success: function(data, status, msg, code) {
							
							that.$.showModal({
							    title: that.__("提示"),
							    content: msg,
							    success: function (res) {
							        if (res.confirm) {
										that.$.navigateTo({
										    url: "/paotui/index/index"
										})
									}
								},
							})
						
					}
				});
				
			},
			
		}
	}
</script>

<style lang="scss">
	@import "../../styles/colorui/animation";
	@import "../../styles/colorui/icon";
	@import "../../styles/colorui/main";
.fill{
	padding:0 20rpx;
	.pic{display: flex;flex-wrap: wrap;justify-content: space-between;
		.pic_01{width: 46%;text-align: center;padding-bottom: 5px;line-height: 25px;
			img{width: 100%;height: 120px;border-radius: 5px;box-shadow: 0 0 5px #EDEDED;}
		}
	}
}

.bg-white {
	border-radius: 16rpx;
}

.text-blue, .line-blue, .lines-blue {
	color: #F2C100;
}
</style>
