<template>

	<view class="">
		<u-loading-page :loading="showLoading"></u-loading-page>
		<view class="" style="width: 100vw; overflow: hidden;" v-show="!showLoading">
			<view class="card">
				<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
					<view class="cards">
						<view class="avter">
							<view class="">
								<text style="color: #f76c7f;font-weight: bold;">*</text>用户头像:
							</view>
							<view class="">
								<view class="" v-if="formData.avatar">
									<!-- {{formData.avatar}} -->
									<image :src="formData.avatar" alt="" style="width:150rpx;height:150rpx;">
									</image>
								</view>
								<view class="uplode" v-else>
									<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
									上传头像
									<view class="up" style="opacity: 0;">
										<u-upload :fileList="formData.avatar?[{url:formData.avatar}]:[]"
											@afterRead="afterReadAvatar" @delete="formData.avatar=''" :maxCount="1">
										</u-upload>
									</view>
								</view>

							</view>
						</view>
					</view>
					<view class="cards">
						<u-form-item label="电话" required prop="account" borderBottom>
							<u--input v-model="formData.account" placeholder="请输入手机号" type="number"></u--input>
						</u-form-item>
						<u-form-item label="密码" required prop="account" borderBottom>
							<u--input v-model="formData.password" placeholder="请输入密码" type="password"></u--input>
						</u-form-item>
						<u-form-item label="确认密码" labelWidth="auto" required prop="account" borderBottom>
							<u--input v-model="formData.password_confirm" placeholder="请确认密码"
								type="password"></u--input>
						</u-form-item>

						<u-form-item label="性别" required prop="sex" borderBottom>

							<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
								<u-radio v-for="(item, index) in radiolist1" :customStyle="{marginLeft: '20px'}"
									:key="index" :label="item.name" :name="item.name">
								</u-radio>
							</u-radio-group>
							<!-- <u--input v-model="formData.sex" placeholder="请输入姓名"></u--input> -->
						</u-form-item>

						<u-form-item label="姓名" required prop="nickname" borderBottom>
							<u--input v-model="formData.nickname" placeholder="请输入姓名"></u--input>
						</u-form-item>
						<u-form-item label="用户角色" labelWidth="auto" required prop="group_name" borderBottom
							@click="showRole=true" ref="item1">
							<u--input v-model="formData.group_name" placeholder="请选择"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item labelWidth="auto" label="身份证号" required prop="id_card" borderBottom>
							<u--input v-model="formData.id_card" placeholder="请输入身份证号" @input="c_idcard"
								type="idcard"></u--input>
						</u-form-item>
						<u-form-item label="省" required prop="province" @click="changeCity('province')" borderBottom>
							<u--input :value="formData.province" disabled disabledColor="#fff"
								placeholder="请选择省"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="市" required prop="city" @click="changeCity('city')" borderBottom>
							<u--input :value="formData.city" disabled disabledColor="#fff"
								placeholder="请选择市"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="区县" required prop="area" @click="changeCity('area')" borderBottom>
							<u--input :value="formData.area" disabled disabledColor="#fff"
								placeholder="请选择区县"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="乡镇" required prop="street" @click="changeCity('street')" borderBottom>
							<u--input :value="formData.street" disabled disabledColor="#fff"
								placeholder="请选择镇"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="村社" required prop="village" @click="changeCity('village')" borderBottom>
							<u--input :value="formData.village" type="text" disabled disabledColor="#fff"
								placeholder="请选择村"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="小队" required prop="brigade" @click="changeCity('brigade')" borderBottom>
							<u--input :value="formData.brigade" disabled disabledColor="#fff"
								placeholder="请选择小队"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>

					</view>
					<view class="cards">
						<view style="margin-bottom:30rpx ;">
							<text style="color: #f76c7f;font-weight: bold;">*</text>身份证照:
						</view>
						<view class="up_list">
							<view class="" v-if="formData.qualification.id_card">
								<image :src="formData.qualification.id_card" alt=""
									style="width:243.57rpx;height:150rpx;">
								</image>
							</view>
							<view class="uplode" v-else>
								<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
								身份证正面
								<view class="up" style="opacity: 0;">
									<u-upload
										:fileList="formData.qualification.id_card?[{url:formData.qualification.id_card}]:[]"
										@afterRead="afterRead" @delete="formData.qualification.id_card=''"
										name="id_card" :maxCount="1" width="300rpx" height="200rpx"
										style="margin-top: 10rpx;">
									</u-upload>
								</view>
							</view>
							<view class="" v-if="formData.qualification.id_card_b">
								<!-- {{formData.avatar}} -->
								<image :src="formData.qualification.id_card_b" alt=""
									style="width:243.57rpx;height:150rpx;">
								</image>
							</view>
							<view class="uplode" v-else>
								<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
								身份证反面
								<view class="up" style="opacity: 0;">

									<u-upload
										:fileList="formData.qualification.id_card_b?[{url:formData.qualification.id_card_b}]:[]"
										@afterRead="afterRead" @delete="formData.qualification.id_card_b=''"
										name="id_card_b" :maxCount="1" width="300rpx" height="200rpx"
										style="margin-top: 10rpx;">
									</u-upload>
								</view>
							</view>

						</view>

					</view>

					<view class="cards">
						<view style="margin-bottom:30rpx ;">
							<text style="color: #f76c7f;font-weight: bold;">*</text>银行卡照:
						</view>
						<view class="up_list">
							<view class="" v-if="formData.qualification.bank_account">
								<!-- {{formData.avatar}} -->
								<image :src="formData.qualification.bank_account" alt=""
									style="width:243.57rpx;height:150rpx;">
								</image>
							</view>
							<view class="uplode" v-else>
								<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
								银行卡正面
								<view class="up" style="opacity: 0;">

									<u-upload
										:fileList="formData.qualification.bank_account?[{url:formData.qualification.bank_account}]:[]"
										@afterRead="afterRead" @delete="formData.qualification.bank_account=''"
										name="bank_account" :maxCount="1" width="300rpx" height="200rpx"
										style="margin-top: 10rpx;">
									</u-upload>
								</view>
							</view>
							<view class="" v-if="formData.qualification.bank_account_b">
								<!-- {{formData.avatar}} -->
								<image :src="formData.qualification.bank_account_b" alt=""
									style="width:243.57rpx;height:150rpx;">
								</image>
							</view>
							<view class="uplode" v-else>
								<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
								银行卡反面
								<view class="up" style="opacity: 0;">
									<u-upload
										:fileList="formData.qualification.bank_account_b?[{url:formData.qualification.bank_account_b}]:[]"
										@afterRead="afterRead" @delete="formData.qualification.bank_account_b=''"
										name="bank_account_b" :maxCount="1" width="300rpx" height="200rpx"
										style="margin-top: 10rpx;">
									</u-upload>
								</view>
							</view>
						</view>
					</view>
					<view class="cards">
						<view style="margin-bottom:30rpx ;">
							驾驶证照:
						</view>
						<view class="up_list">
							<view class="" v-if="formData.qualification.car_card">
								<!-- {{formData.avatar}} -->
								<image :src="formData.qualification.car_card" alt=""
									style="width:243.57rpx;height:150rpx;">
								</image>
							</view>
							<view class="uplode" v-else>
								<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
								驾驶证一页
								<view class="up" style="opacity: 0;">
									<u-upload
										:fileList="formData.qualification.car_card?[{url:formData.qualification.car_card}]:[]"
										@afterRead="afterRead" @delete="formData.qualification.car_card=''"
										name="car_card" :maxCount="1" width="300rpx" height="200rpx"
										style="margin-top: 10rpx;">
									</u-upload>
								</view>
							</view>
							<view class="" v-if="formData.qualification.car_card_b">
								<!-- {{formData.avatar}} -->
								<image :src="formData.qualification.car_card_b" alt=""
									style="width:243.57rpx;height:150rpx;">
								</image>
							</view>
							<view class="uplode" v-else>
								<u-icon name="plus-circle-fill" color="#0022C7" size="28"></u-icon>
								驾驶证二页
								<view class="up" style="opacity: 0;">
									<u-upload
										:fileList="formData.qualification.car_card_b?[{url:formData.qualification.car_card_b}]:[]"
										@afterRead="afterRead" @delete="formData.qualification.car_card_b=''"
										name="car_card_b" :maxCount="1" width="300rpx" height="200rpx"
										style="margin-top: 10rpx;">
									</u-upload>
								</view>
							</view>

						</view>

					</view>

				</u--form>
				<button @click="modelShow=true" type="primary" class="btn" style="margin: 28rpx;">注册</button>
			</view>
			<u-modal :show="modelShow" title="提示" content='请确认人员信息无误后再创建' closeOnClickOverlay showCancelButton
				@close="modelShow=false" @cancel="modelShow=false" @confirm="$u.throttle(addAcountNum, 2000)"></u-modal>


			<u-action-sheet :show="showRole" :actions="actions" title="请选择性别" @close="showRole = false"
				@select="sexSelect">
			</u-action-sheet>


			<u-picker @close='showPicker=false' :defaultIndex='defaultIndex' @cancel='showPicker=false'
				:show="showPicker" ref="uPicker" :columns="columns" :keyName='keyName' @confirm="confirm"></u-picker>


			<!-- <u-picker :show="showPicker" :columns="columns" keyName="province_name"></u-picker> -->


		</view>


	</view>




</template>

<script>
	import {
		commonProvince,
		commonCity,
		commonArea,
		commonStreet,
		commonVillage,
		commonBrigade,
		register
	} from "@/api/enroll.js"

	import {
		upLoadImage
	} from "@/api/file.js"
	import {
		loginAdd,
	} from "@/api/oaUser.js"
	import {
		Toast
	} from "../../libs/uniApi"
	export default {

		data() {
			return {
				radiolist1: [{
						name: '男',
						value: 1,
					},
					{
						name: '女',
						value: 2
					},

				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '男',
				defaultIndex: [0],
				showLoading: true,
				keyName: 'province_name',
				showRole: false,
				showPicker: false,
				areaList: [],
				proList: [],
				cityList: [],
				streetList: [],
				villageList: [],
				brigadeList: [],
				columns: [],
				actions: [{
						name: '镇/街合伙人',
						id: 22
					},
					{
						name: '社区合伙人',
						id: 21
					},
					{
						name: '小区队长',
						id: 20
					},
					{
						name: '村合伙人',
						id: 19
					},
					{
						name: '生产队长',
						id: 18
					},

				],
				modelShow: false,
				formData: {
					company_id: 0,
					account: '', //账号
					password: '', //密码
					password_confirm: '', //确认密码
					channel: 6, //注册渠道[1-微信小程序 2-微信公众号 3-手机H5 4-电脑PC 5-苹果APP 6-安卓APP]
					id_card: '',
					// is_captain: '', // 队长标识
					// is_service_manager: '', //服务部长标识
					sex: '',
					avatar: '',
					nickname: '',
					// address: '',
					group_id: "",
					group_name: "",
					province: "",
					city: "",
					area: "",
					street: "",
					village: "",
					brigade: "",
					// provinceCode: "",
					cityCode: "",
					areaCode: "",
					streetCode: "",
					villageCode: "",
					brigadeCode: "",
					qualification: {
						id_card: "",
						id_card_b: "",
						car_card: "",
						car_card_b: "",
						bank_account: "",
						bank_account_b: ""
					},
				},
				rules: {
					account: {
						required: true,
						pattern: /^(1[3456789]\d{9})$/,
						message: '请输入正确的手机号码',
						trigger: ['change', 'blur']
					},
					id_card: {
						required: true,
						pattern: /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dxX]$/,
						message: '请输入正确的身份证号',
						trigger: ['change', 'blur']
					},
				},
			}
		},
		onLoad() {
			this.getChannel()
			this.setRules()
			commonProvince().then(res => {
				this.proList = res.data
				this.columns = [this.proList]
				this.showLoading = false
			})

		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)

		},
		onShow() {},
		methods: {
			getChannel() {
				switch (uni.getSystemInfoSync().platform) {
					case 'android':
						this.formData.channel = 6
						break;
					case 'ios':
						this.formData.channel = 5
						break;
					case "windows":
						this.formData.channel = 4
						break;
					default:
						this.formData.channel = 1
						break;
				}
				//#ifdef MP
				this.formData.channel = 1
				//#endif

			},
			groupChange(n) {
				n == "男" ? this.formData.sex = 1 : this.formData.sex = 2
				console.log(this.formData);
			},

			setRules() {
				let ruleKeyList = ['avatar', 'nickname', 'group_name', 'province', 'city', 'area', 'village', 'street',
					'qualification.id_card', 'qualification.bank_account', 'qualification.id_card_b',
					'qualification.bank_account_b'
				]

				ruleKeyList.forEach(item => {
					this.rules[item] = {
						type: 'string',
						required: true,
						message: '不能为空',
						trigger: ['change', 'blur']
					}
				})
			},
			confirm(e) {
				if (this.keyName == 'province_name') {
					uni.showLoading({
						title: '获取下级区域中'
					})
					this.formData.province = e.value[0].province_name
					this.formData.province_code = e.value[0].province_code
					commonCity({
						city: this.formData.province_code
					}).then(res => {
						this.cityList = res.data
						uni.hideLoading()
						this.defaultIndex = [0]
					})
				}
				if (this.keyName == 'city_name') {
					uni.showLoading({
						title: '获取下级区域中'
					})
					this.formData.city = e.value[0].city_name
					this.formData.cityCode = e.value[0].city_code
					commonArea({
						area: this.formData.cityCode
					}).then(res => {
						this.areaList = res.data
						uni.hideLoading()
						this.defaultIndex = [0]
					})
				}
				if (this.keyName == 'area_name') {
					uni.showLoading({
						title: '获取下级区域中'
					})
					this.formData.area = e.value[0].area_name
					this.formData.areaCode = e.value[0].area_code

					commonStreet({
						street: this.formData.areaCode
					}).then(res => {
						this.streetList = res.data
						uni.hideLoading()
						this.defaultIndex = [0]
					})
				}
				if (this.keyName == 'street_name') {
					uni.showLoading({
						title: '获取下级区域中'
					})
					this.formData.street = e.value[0].street_name
					this.formData.streetCode = e.value[0].street_code
					commonVillage({
						village: this.formData.streetCode
					}).then(res => {
						this.villageList = res.data
						uni.hideLoading()
						this.defaultIndex = [0]
					})
				}
				if (this.keyName == 'village_name') {
					uni.showLoading({
						title: '获取下级区域中'
					})
					this.formData.village = e.value[0].village_name
					this.formData.villageCode = e.value[0].village_code
					commonBrigade({
						brigade: this.formData.villageCode
					}).then(res => {
						this.brigadeList = res.data
						uni.hideLoading()
						this.defaultIndex = [0]
					})
				}
				if (this.keyName == 'brigade_name') {
					this.formData.brigade = e.value[0].brigade_name
					this.formData.brigadeCode = e.value[0].id
					this.defaultIndex = [0]
				}


				this.showPicker = false
			},

			changeCity(type, toast = false) {
				this.showPicker = true
				if (type == 'role') {
					this.actionList = this.actions
				}


				if (type == 'province') {
					this.keyName = 'province_name'
					this.columns = [this.proList]

				}

				if (type == 'city') {
					this.keyName = 'city_name'
					this.columns = [this.cityList]
				}
				if (type == 'area') {
					this.keyName = 'area_name'
					this.columns = [this.areaList]

				}
				if (type == 'street') {
					this.keyName = 'street_name'
					this.columns = [this.streetList]

				}
				if (type == 'village') {
					this.keyName = 'village_name'
					this.columns = [this.villageList]

				}
				if (type == 'brigade') {
					this.keyName = 'brigade_name'
					this.columns = [this.brigadeList]

				}

				// this.actionList=


				// if (this[type + 'List'].length == 0) {
				// 	if (type == 'brigade') return Toast('小队已经建立完毕');
				// 	return Toast('请先选择上一级地区');
				// }
				// this.changeType = type;
				// this.showProvince = true;
			},
			sexSelect(e) {


				this.formData.group_id = e.id
				this.formData.group_name = e.name
				this.showRole = false
			},
			c_idcard(e) {
				this.$nextTick(() => {
					this.formData.id_card = e.replace(/[^0-9X]/g, '')
				})
			},
			// 上传头像
			async afterReadAvatar(event) {
				uni.showLoading({
					title: '上传中'
				})
				upLoadImage({
					filePath: event.file.url,
					name: 'file'
				}).then(res => {
					this.formData.avatar = res.data.uri;
				}).finally(() => {
					uni.hideLoading();
				})
			},
			// 新增图片
			async afterRead(event) {
				this.upLoad(event.file.url, event.name)
			},
			// 上传图片
			upLoad(url, type) {
				uni.showLoading({
					title: '上传中请稍后'
				})
				upLoadImage({
					filePath: url,
					name: 'file'
				}).then(res => {
					this.formData.qualification[type] = res.data.uri
				}).finally(() => {
					uni.hideLoading();
				})
			},
			// 创建账号
			async addAcountNum() {
				this.modelShow = false;
				await this.$nextTick();
				if (!this.formData.avatar) return Toast('头像未上传');
				if (!this.formData.qualification.id_card || !this.formData.qualification.id_card_b) return Toast(
					'身份证未上传');
				if (!this.formData.qualification.bank_account || !this.formData.qualification.bank_account_b)
					return Toast(
						'银行卡未上传');
				this.$refs.uForm.validate().then(async (e) => {
					if (e) {
						uni.showLoading()


						console.log(this.formData)

						let res = await register({
							...this.formData,

						});


						console.log(res, 'res')
						uni.hideLoading()
						uni.showToast({
							icon: "none",
							title: "添加成功",
							success: () => {
								// setTimeout(() => {
								// 	uni.$emit('initPersonnel');
								// 	uni.navigateBack();
								// }, 1000)
							}
						})
					}
				})
			},

		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss">
	.card {
		// background-color: #fff;
		// margin: 28rpx;
		// padding: 28rpx;
		// border-radius: 14rpx;

		.cards {


			margin: 28rpx;
			padding: 28rpx;
			border-radius: 14rpx;
			background-color: #fff;

			.avter {
				display: flex;
				justify-content: space-between;
				// line-height: 150rpx;
				align-items: center;
			}

			.up_list {
				display: flex;
				justify-content: space-between;
			}

			.uplode {
				width: 243.57rpx;
				height: 173.48rpx;
				box-sizing: border-box;
				padding-top: 30rpx;
				border-radius: 15rpx;
				border: 1px solid $theme-oa-color;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				color: $theme-oa-color;
				position: relative;

				.up {
					position: absolute;
					color: transparent;
				}
			}



		}

		.title {
			font-weight: 500;
			font-size: 34rpx;
			margin-top: 30rpx;

			&:nth-child(1) {
				margin-top: 0;
			}

			&::before {
				width: 8rpx;
				height: 26rpx;
				border-radius: 4rpx;
				background-color: #0122c7;
				content: "";
				display: inline-block;
				margin-right: 8rpx;
			}
		}

		.btn {
			margin-top: 32rpx;
			// margin-bottom: 40rpx;
			// width: 100%;
			height: 84rpx;
			background: $theme-oa-color;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			color: #fff;
			line-height: 80rpx;
			text-align: center;
		}
	}
</style>