<template>
	<view>
		<public-module></public-module>
		
		<view class="box"  :style="{background:`url(${indexBackgroundImage})`,backgroundSize: 'contain',backgroundRepeat: 'no-repeat'}">
		<view class="box-con">
			<uni-forms  :value="personData" ref="personData" validate-trigger="bind"
				 err-show-type="toast" label-width="100" :rules="rules" >
				<uni-forms-item label="姓名" name="name" required >
					<input class="uni-input-input textColor" placeholder="输入姓名" v-model="personData.name"
						placeholder-style="font-size:28upx"  />
				</uni-forms-item>
				<uni-forms-item label="手机号" required  name="mobile">
					<input class="uni-input-input textColor"  maxlength="11"  placeholder="输入手机号" v-model="personData.mobile"
						placeholder-style="font-size:28upx"  />
				</uni-forms-item>
				<uni-forms-item label="证件号" required  name="identity">
					<input class="uni-input-input textColor" placeholder="输入证件号" v-model="personData.identity"
						placeholder-style="font-size:28upx"  />
				</uni-forms-item>
				<uni-forms-item label="密码" required  name="password">
					<input class="uni-input-input textColor" placeholder="输入密码" v-model="personData.password"
						placeholder-style="font-size:28upx"  />
				</uni-forms-item>
				<uni-forms-item label="地址" required  name="address">
					<input class="uni-input-input textColor" placeholder="输入地址" v-model="personData.address"
						placeholder-style="font-size:28upx"  />
				</uni-forms-item>
			</uni-forms>
		</view>
		</view>
		<!-- <view class="box-con" style="margin-top:10px">
			<uni-forms :rules="carRules" :value="personData" ref="personData" validate-trigger="bind"
				 err-show-type="toast" label-width="100">
				<uni-forms-item label="开户行">
					<input class="uni-input-input textColor" placeholder="输入开户行" v-model="personData.bankName"
						placeholder-style="font-size:28upx"  />
				</uni-forms-item>
				<uni-forms-item label="开户账号">
					<input class="uni-input-input textColor" placeholder="输入开户账号" v-model="personData.accountno"
						placeholder-style="font-size:28upx"  />
				</uni-forms-item>
				<view >
					<view>银行卡照片</view>
					<view class="dis j-c" >
						<image style="height: 95px;width: 150px;padding: 10px 0;" :src=" userfrontImg?userfrontImg:'/static/image/my/yinhangka.png'" mode=""
							@click="userfrontChange"></image>
					</view>
				</view>
			</uni-forms>
		</view> -->
		<view class="userBox" style="margin-top:10px">
			<text>身份证件照</text>
			<view class="dis j-s" style="margin: 10px 0;">
				<view class="imgOcr-border">
					<image :src=" userfrontImg?userfrontImg:'/static/image/my/shenfenzz.png'" mode=""
						@click="userfrontChange"></image>
					<view>人像面</view>
				</view>
				<view class="imgOcr-border">
					<image :src="userbackImg?userbackImg:'/static/image/my/shenzf.png'" mode=""
						@click="userbackChange"></image>
						<view>国徽面</view>
				</view>
			</view>
		</view>
		<!-- <view class="userBox">
			<uni-forms :rules="carRules" :value="personData" ref="personData" validate-trigger="bind"
				 err-show-type="toast" label-width="100">
				<uni-forms-item label="选择来源" required  name="deptSourceName">
					<u-input v-model="personData.deptSourceName" type="select" :select-open="energyTypeShow"
						@click="energyTypeShow = true" :custom-style="{textAlign:'right'}"
						placeholder-style="color:#808080" placeholder="请选择来源" />
					<u-select mode="single-column" :list="energyTypeoptions" v-model="energyTypeShow"
						label-name="lable" value-name="value"
						@confirm="dictionaryConfirm($event)"></u-select>
				</uni-forms-item>
				<uni-forms-item label="机构类型" required  name="deptName">
					<u-input v-model="personData.deptName" type="select" :select-open="deptShow"
						@click="deptShow = true" :custom-style="{textAlign:'right'}"
						placeholder-style="color:#808080" placeholder="请选择机构类型" />
					<u-select mode="single-column" :list="deptoptions" v-model="deptShow"
						label-name="lable" value-name="value"
						@confirm="deptConfirm($event)"></u-select>
				</uni-forms-item>
			</uni-forms>
		</view> -->
		<!-- <view class="userBox">
			<u-checkbox v-model="checked"></u-checkbox>
			<text>同时创建我的团队</text>
		</view> -->
		<view class="submit" @click="submit('personData')">
			提交
		</view>
	</view>
</template>

<script>
	// import {
	// 	mapState,
	// 	mapMutations
	// } from "vuex"
	// import store from '@/store';
	import indexBackgroundImage from "@/static/shenqing.png"
	export default {
		// computed: {
		// 	...mapState(['userInfo' ]),
		// },
		data(){
			return {
				indexBackgroundImage:indexBackgroundImage,
				rules: {
					name:{
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					mobile:{
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						},
						{
							pattern: /^1[3-9]\d{9}$/,
							errorMessage: '请输入正确的手机号',
						}]
					},
					identity:{
						rules: [{
							required: true,
							errorMessage: '请输入身份证号',
						},
						{
							pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
							errorMessage: '请输入正确的身份证号',
						}]
					},
					password:{
						rules: [{
							required: true,
							errorMessage: '请输入密码'
						}]
					},
					address:{
						rules: [{
							required: true,
							errorMessage: '请输入地址',
						}]
					},
				},
				energyTypeShow:false,
				deptShow:false,
				deptoptions:[
					{
						lable:'股份',
						value:'gufen'
					},{
						lable:'直营',
						value:'dir'
					},{
						lable:'加盟',
						value:'jiameng'
					}],
				energyTypeoptions:[
					{
						lable:'渠道',
						value:'1'
					},{
						lable:'个代',
						value:'2'
					}],
				checked:false,
				userfrontImg: "",
				userbackImg: "",
				personData:{
					name:'',
					mobile:'',
					identity:'',
					password:'',
					address:'',
					esmUserImageVo:[]
				},
				
				deptSource:'',
				userId:''
			}
	},
	async onLoad(e) {
		this.deptSource=e.deptSource?e.deptSource:''
		this.userId=e.userId?e.userId:''
		if(e.id){
			this.id=e.id
			this.$http.get('/user/' +e.id).then(res=>{
				if(res.code==200){
					this.personData={...res.data.sysUser,esmUserImageVo:[]}
				}
				else{
					uni.showModal({
						showCancel: false,
						title: res.msg
					})
				}
			})
		}
	},

	methods:{
		submit(){
			this.$refs.personData.validate().then(res => {
				if(this.id){
					this.$http.post('/user/updateUserInfo1/' +this.id, {
						 esmUserImageVo: this.personData.esmUserImageVo,
						 sysUser: this.personData,
						 sysUserInfo:this.personData,
					}).then(res=>{
						if(res.code==200){
							uni.redirectTo({
								url: "/pages/index/result"
							})
						}
						else{
							uni.showModal({
								showCancel: false,
								title: res.msg
							})
						}
					})
				}else{
					this.$http.post('/user/saveUserInfoByPartner', {
						isPartner:"1",
						sysUser:{...this.personData,roleId:"22",referrerId:this.userId,type:2,deptSource:this.deptSource},
						esmUserImageVo:this.personData.esmUserImageVo
					}).then(res=>{
						if(res.code==200){
							uni.redirectTo({
								url: "/pages/index/result"
							})
						}
						else{
							uni.showModal({
								showCancel: false,
								title: res.msg
							})
						}
					})
				}
				
			}).catch(err => {
				console.log('err', err);
			})
		},
		//  submit(){
		// 	 uni.redirectTo({
		// 	 	url: "/pages/index/result?key="+encodeURIComponent(JSON.stringify({status:2}))
		// 	 	// url: "/pages/index/result?status=1&remark=111"
		// 	 })
		// 	// this.$refs.personData.validate().then(res => {
		// 		this.$refs.baseForm.submit().then(res => {
		// 			this.$http.post('/user/saveUserInfo', {
		// 				isPartner:"1",
		// 				sysUser:{...this.personData,roleId:"22",referrerId:this.userInfo.sysUser.userId,type:2,deptSource:this.deptSource},
		// 				esmUserImageVo:this.personData.esmUserImageVo
		// 			}).then(res=>{
		// 				if(res.code==200){
		// 					uni.redirectTo({
		// 						url: "/pages/index/result?key="+encodeURIComponent(JSON.stringify({status:1}))
		// 					})
		// 				}
		// 				else{
		// 					uni.showModal({
		// 						showCancel: false,
		// 						title: res.msg
		// 					})
		// 					// uni.showToast({
		// 					// 	title: res.msg
		// 					// })
		// 				}
		// 			})
				
		// 		// if (data.code == '200') {
		// 		// }
		// 	}).catch(err => {
		// 		console.log('err', err);
		// 	})
		// },
		dictionaryConfirm(val){
			this.personData.deptSourceName=val[0].label
			this.personData.deptSource=val[0].value
		},
		deptConfirm(val){
			this.personData.deptName=val[0].label
			this.personData.deptType=val[0].value
		},
		async userfrontChange() {
			// this.personData.esmUserImageVo[0]={}
			let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
				count: 1,
				sizeType: ['compressed']
			});
		
			let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
			if (!size) {
				this.$refs.uToast.show({
					title: '上传图片大小不能超过 5MB!',
					type: 'error',
				})
				return false
			}
			if (chooseImageRes) {
				this.userfrontImg = chooseImageRes.tempFilePaths[0];
				uni.uploadFile({
					url: this.$base.baseUrl + '/ins/taskImage/uploadFileByPartner',
					filePath: chooseImageRes.tempFilePaths[0],
					name: "multipartFile",
					formData: {
						'type': 'image',
					},
					// header: {
					// 	Authorization: store.state.token,
					// },
					success: (imgRes) => {
						let data = JSON.parse(imgRes.data);
						if (data.code == '200') {
							this.personData.esmUserImageVo.push(
								{
								imageId: data.data.id,
            					type: "SFZ_01",
							}
							)
							// this.personData.esmUserImageVo[0]={
							// 	imageId: data.data.id,
            				// 	type: "SFZ_01",
							// }
						}
		
					}
				});
			} 
		},
		async userbackChange() {
			// this.personData.esmUserImageVo[1]={}
			let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
				count: 1,
				sizeType: ['compressed']
			});
			let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
			if (!size) {
				this.$refs.uToast.show({
					title: '上传图片大小不能超过 5MB!',
					type: 'error',
				})
				return false
			}
			if (chooseImageRes) {
				this.userbackImg = chooseImageRes.tempFilePaths[0];
				uni.uploadFile({
					url: this.$base.baseUrl + '/ins/taskImage/uploadFileByPartner',
					filePath: chooseImageRes.tempFilePaths[0],
					name: "multipartFile",
					formData: {
						'type': 'image',
					},
					// header: {
					// 	Authorization: store.state.token,
					// },
					success: (imgRes) => {
						let data = JSON.parse(imgRes.data);
						if (data.code == '200') {
							// this.personData.esmUserImageVo[1]=data.data
							this.personData.esmUserImageVo.push(
								{
								imageId: data.data.id,
            					type: "SFZ_02",
							}
							)
						}
		
					}
				});
			} 
		},
	},
	}
</script>

<style lang="scss" scoped>
	.box {
		height: 330px;
		width: 100%;
		// background-repeat: no-repeat;
		// background: #F9F9F9;
		// background: url(/static/shenqing.png) no-repeat;
		// background-size: contain;
		padding: 130px 15px 0 15px;
		// padding: 200px 16px 15px 16px;
	}
	.box-con{
		background: #FFFFFF;
		padding: 10px 15px;
		border-radius: 5px 5px 5px 5px;
	}
	.userBox{
		border-radius: 5px 5px 5px 5px;
		margin:10px 15px;
		padding: 10px 15px;
		background: #fff;
		font-size: 15px;
		color: #666666;
		.imgOcr-border {
			// position: relative;
			width: 48%;
			text-align: center;
			image {
				display: inline-block;
				height: 95px;
				width: 100%;
			}
		}
	}
	.submit{
		margin: 15px;
		text-align: center;
		color: #fff;
		height: 46px;
		line-height: 46px;
		background: linear-gradient( 133deg, #2DD9FF 0%, #2D6DFF 100%);
		border-radius: 31px 31px 31px 31px;
	}
</style>