<template>
	<!-- 布局 flex 组件 view -->
	<view class="addDiver_body">
		<!--  卡片  -->
		<view class="addDiver_card">
	
			<view class="card_title">
				<view class="tiao"></view>
				<view class="card_title_text">基础信息</view>
			</view>
	
			<uni-list>
				<uni-list-item>
					<view class="list_header" slot="header">
						<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix" ></image>
						用户昵称
						</view>
					<view style="padding-right: 16px !important;" slot="body" class="list_right">
						<input v-model="postData.userName" placeholder="请输入昵称" class="list_right_input" />
					</view>
				</uni-list-item>
				<uni-list-item class="fg">
					<view class="list_header"  slot="header">
						<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix" ></image>
						密码
						</view>
					<view slot="body" class="list_right">
						<view style="width: 100%;padding-right: 16px !important; ">
							<input v-model="postData.password" placeholder="请输入密码或生成随机密码" class="list_right_input" />
							<view @tap="random()"
								style="font-size: 24rpx; position: relative; color: #2866FF; justify-content: flex-end; display: flex;align-items: center;z-index: 999999;">
								<text>生成密码</text>
							</view>
						</view>
					</view>
				</uni-list-item>
				<uni-list-item :border="false">
					<view class="list_header"  slot="header">
						<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix" ></image>
						手机号码
						</view>
					<view style="padding-right: 16px !important;" slot="body" class="list_right">
						<view style="width: 100%; ">
							<input v-model="postData.phone" placeholder="请输入手机号码" class="list_right_input" />
							<view
								style="font-size: 24rpx; color: #2866FF; justify-content: flex-end; display: flex;align-items: center;">
								<radio style="transform:scale(0.5)" color="#2866FF" value="r1" :checked="false" />
								是否将密码发送给客户
							</view>
						</view>
					</view>
				</uni-list-item>
				<uni-list-item link>
					<view class="list_header" slot="header">
						<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix" ></image>
						生日</view>
					<view @click="show=true" :style="{color:postData.birthday?'#333333':''}" slot="body" class="list_right list_nosele">
						{{postData.birthday?postData.birthday:'请选择生日日期'}}
					</view>
				</uni-list-item>
				<uni-list-item link>
					<view class="list_header" slot="header">
						<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix" ></image>
						头像</view>
					<view @click="clickfn" slot="body" :style="{color:postData.headPhoto?'#333333':''}" class="list_right list_nosele">
						{{postData.headPhoto?'已上传':'请上传'}}
					</view>
				</uni-list-item>
				<!-- <uni-list-item>
					<view class="list_header" slot="header">
						<image src="@/static/bt.png" style="width: 12rpx;position: absolute;left: 0;" mode="widthFix" ></image>
						个人车牌
						</view>
					<view style="padding-right: 16px !important;" slot="body" class="list_right list_nosele">
						<input v-model="postData.plateNumber" placeholder="请输入个人车牌号码" class="list_right_input" />
					</view>
				</uni-list-item> -->
			</uni-list>
	
		</view>
		<!-- 底部按钮 -->
		<view class="list_footer" >
			<button @tap="postFn" class="list_butten ">保存</button>
		</view>
		<u-picker @confirm='dateConfirm' v-model="show" mode="time"></u-picker>
	</view>
</template>

<script>
	import tool from '@/utils/tool'
	import addDirver from '@/api/addDirver'
	import md5 from 'js-md5'
	export default {
		data() {
			return {
				check:['userName','password','phone'],
				show: false,
				jsData:null,
				postData:{
					id:'',
					userName:'',
					password:'',
					phone:'',
					birthday:'',
					headPhoto:'',
					plateNumber:'',
					registerMode:'1',
					userSource:'OMS-MINIAPP'
				}
			}
		},
		onLoad(e) {
			let that =this
			if (e.jsData) {
				this.jsData =  JSON.parse(e.jsData)
				this.postData.id = that.jsData.customerId
				this.postData.plateNumber = that.jsData.plateNumber
				this.postData.userName =  that.jsData.userName
				this.postData.phone = that.jsData.phone
				this.postData.birthday = that.jsData.birthday
				this.postData.headPhoto = that.jsData.headPhoto
				console.log(	this.postData,this.jsData)
			}
		},
		methods: {
			async random() {
				let mima = []
				let open = false
				//8位密码
				for (let i = 0; i < 8; i++) {
					/*随机生成两个0-10的数字 通过对比大小 随机控制 当前位数生成字母还是数字
					 false:生成数字 true:生成随机大小写字母*/
					open = parseInt(Math.random() * 10) > parseInt(Math.random() * 10)
			
					let zm = mima.join('').match(/[A-z]/g) || [] //匹配字母 match返回一个已匹配到的数组
					let nm = mima.join('').match(/[0-9]/g) || [] //匹配数字 match返回一个已匹配到的数组
					/*通过返回的匹配到的数组
					判断已需要的字母或字母是否满足最少字母或数字位数条件
					条件满足,干预随机生成条件,反之继续运行
					现在生成条件为4个数字4个随机大小写字母
					*/
					if (nm.length == 4) {
						open = false
					}
					if (zm.length == 4) {
						open = true
					}
					//执行生成
					if (open) {
						let number = this.randomNumberFn()
						mima.push(number)
					} else {
						let code = await this.randomUnicodeFn()
						mima.push(String.fromCharCode(code))
					}
				}
				this.postData.password = mima.join('')
				console.log(mima.join(''), '---')
			},
			//随机生成数字 0-10
			randomNumberFn() {
				return parseInt(Math.random() * 10);
			},
			/*
			随机生成 大小写英文字母
			如随机生成的是91-96之间的Unicode编码数字无法对应生成大小写 英文字母 则重新生成 
			*/
			randomUnicodeFn() {
				return new Promise((resolve, reject) => { // 
					let numberarry = /^9[1-6]{1}$/
					let timer = setInterval(() => {
						let code = parseInt(Math.random() * 57) + 65
						if (!numberarry.test(code)) {
							console.log(String.fromCharCode(code), code)
							clearInterval(timer)
							resolve(code)
						}
					}, 100)
				})
			},
			postFn(){
				let that =this
				let checkOpen = true
				// this.postData.password = md5(this.postData.password)
				Object.keys(this.postData).forEach(kes=>{
					if(this.check.includes(kes) && this.postData[kes] == ''){
					   checkOpen = false
						return
					}
				})
				if(!checkOpen){
					uni.showToast({
						title:'重要信息不能为空',
						icon:'none'
					})
					return
				}
				addDirver.updateDriver(Object.assign(JSON.parse(JSON.stringify(this.postData)),{password:md5(this.postData.password)})).then(res=>{
					if(res.code!==20000)return
					// uni.$emit('updateDriver',that.jsData.customerId)
					uni.navigateBack()
				})
				console.log(this.postData)
			},
			clickfn(e) {
				if (typeof e !== "object") {
					this.postData.headPhoto = e
					uni.showToast({
						title:'上传成功'
					})
					return
				}
				tool.chooseImage(this.clickfn)
			},
			dateConfirm(e){
				this.postData.birthday = e.year + '-' + e.month + '-' + e.day
			}
		}
	}
</script>

<style lang="scss" >
	@import url("./driver.css");
</style>
