<template>
	<view class="my-sign">
		<view class="mySignItem">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<view class="mySignIndex">
				<u--form labelWidth="150rpx" :model="dataUser" :rules="rules" ref="uForm" labelAlign="left">
					<u-form-item label="用户类型:" prop="personType" borderBottom @click="show = true">
						<!-- closeOnClickOverlay="true" -->
						<u-action-sheet @select="radioChanges" @close="show = false" closeOnClickAction="true"
							:actions="radiolist" :show="show"></u-action-sheet>
						<view class="dataUserunit" :style="{color: dataUser.personType ||'#c2cad2'}"
							v-model="dataUser.personType">{{dataUser.personType || "请输入用户类型"}}</view>
						<view class="HiddenEse">
							<text class="iconoscope"></text>
						</view>
					</u-form-item>
					<u-form-item label="姓名:" prop="name" borderBottom>
						<u--input clearable placeholder="请输入姓名" v-model="dataUser.name"></u--input>
					</u-form-item>
					<u-form-item @click="titleClick" label="部门:" prop="title" borderBottom v-if="showradio">
						<view class="dataUserunit" :style="{color: dataUser.title ||'#c2cad2'}" name="unit"
							v-model="dataUser.title">{{dataUser.title || "请输入部门"}}</view>
						<u-picker itemHeight="75" @confirm="titleConfrm" :show="showtitle" :columns="titleSelect"
							keyName="label" @cancel="showtitle = false" @close="showtitle = false"></u-picker>
					</u-form-item>

					<u-form-item @click="showpickerClick" label="派出所:" prop="Localpolice" borderBottom v-if="showradio">
						<view class="dataUserunit" :style="{color: dataUser.Localpolice ||'#c2cad2'}" name="unit"
							v-model="dataUser.Localpolice">{{dataUser.Localpolice || "请输入派出所"}}</view>
						<u-picker itemHeight="75" @confirm="pickerConfrm" :show="showpicker" :columns="columns"
							keyName="label" @cancel="showpicker = false" @close="showpicker = false"></u-picker>
					</u-form-item>
					<u-form-item label="单位:" prop="unit" borderBottom v-if="showradio &&　Publicfalse"
						@click="unitClick">
						<view class="dataUserunit" :style="{color: dataUser.unit ||'#c2cad2'}" name="unit"
							v-model="dataUser.unit">{{dataUser.unit || "请输入所属单位"}}</view>
						<u-picker itemHeight="75" @confirm="pickerUnitClick" :show="showunit" :columns="unitColums"
							keyName="label" @cancel="showunit = false" @close="showunit = false"></u-picker>
					</u-form-item>
				</u--form>
			</view>
			<!-- 登录 -->
			<view class="anniu">
				<u-button @click="submit" v-if="showradio" class="butn" text="注册" color="#4e87ff"></u-button>
				<slot v-else>
					<u-button @click="submitLogin(dataUser)" class="butn" type="primary" text="登录"
						color="#4e87ff"></u-button>
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapGetters
	} from 'vuex';
	import {
		postAddLogin,
		postLogin,
		getBoroughList,
		getstationList,
		getstationbase
	} from '@/api/login';
	import {
		customTotast
	} from '@/utils/index';
	export default {
		data() {
			return {
				dataUser: {
					personType: '',
					name: '',
					title: '',
					id: '',
					Localpolice: '',
					unit: ''
				},
				fields: [],
				columns: [], //派出所控制
				unitColums: [], //单位
				showradio: true,
				showpicker: false, //派出所控制
				showunit: false, //单位控制
				showPopup: false, // 弹层控制
				show: false,
				schoolInformation: {},
				radiolist: [{
						value: 'volunteer',
						name: '志愿者'
					}, {
						value: 'guarder',
						name: '保安人员'
					},
					// {
					// 	value: 'policeman',
					// 	name: '警务人员'
					// },
					{
						value: 'school.manager',
						name: '教育部门'
					},
					{
						value: 'police.manager',
						name: '公安部门'
					}
				],
				Publicfalse: true,
				rules: {
					name: [{
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					}],
					Localpolice: [{
						required: true,
						message: '请选择派出所',
						trigger: ['blur', 'change']
					}],
					unit: [{
						required: true,
						message: '请选择学校单位',
						trigger: ['blur', 'change']
					}],
					id: [{
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					}],
				},
				Public: undefined,
				showtitle: false,
				titleSection:[
					 [ '公安分局','内保大队','派出所']
				],
				title2Section:[
					 ['区教育局','区教育局安保科','学校老师','学校保安']
				]
			};
		},

		computed: {
			// 拿取vuex里的数据
			...mapGetters({
				getopenid: 'openid/getopenid'
			}),
			titleSelect(){
				 return this.dataUser.personType === '公安部门'? this.titleSection:this.title2Section
			}

		},
		created() {},
		onShow() {

		},
		onLoad() {},
		methods: {
			...mapMutations({
				updateList: 'users/updateList',
				schoolList: 'users/schoolList',
			}),
			// 志愿者切换
			radioChanges(val) {
				if (val.value == 'police.manager') {
					this.Public = {
						remark: '公安机关',
						brigade: "长沙芙蓉区",
						level: "1",
						borough: '公安机关'
					}
				} else {
					this.Public = {
						remark: '教育局',
						brigade: "长沙芙蓉区",
						level: "1",
						borough: '教育局'
					}
				}
				this.BoroughList(); // 派出所列表数据
				this.dataUser.personType = val.value;
				if (this.dataUser.personType == 'school.manager') {
					this.showradio = true;
					this.dataUser = {
						personType: val.name,
						id: '',
						name: '',
						title:''
					};
				} else if (this.dataUser.personType == 'police.manager') {
					this.showradio = true;
					this.dataUser = {
						personType: val.name,
						id: '',
						name: '',
						title:''
					};
				} else if (this.dataUser.personType == 'guarder') {
					this.showradio = true;
					this.dataUser = {
						personType: val.name,
						id: '',
						name: '',
						title:''
					};
				} else {
					this.showradio = false;
					this.dataUser = {
						personType: val.name,
						id: '',
						name: '',
						title:''
					};
				}
			},
			onLogin() {
				// uni.navigateTo({
				// 	url: `/pages/login/index`
				// });
				// setTimeout(() => {
				// 	this.$refs.uForm.clearValidate();
				// }, 900);
			},
			// 部门
			titleClick() {
				if (this.dataUser.personType !== '') {
					this.showtitle = true
				} else {
					uni.showToast({
						title: '请先选择用户类型'
					});
				}
				
			},
			titleConfrm(e){
				this.dataUser.title = e.value[0]
				this.showtitle = false
			},
			// 注册
			submit() {
				this.$refs.uForm
					.validate()
					.then((res) => {
						let TypeListArr = this.dataUser.personType == '教育部门' ? 'school.manager' : this.dataUser
							.personType == '公安部门' ?
							'police.manager' : this.dataUser.personType == '保安人员' ? 'guarder' : '';
						console.log(TypeListArr);
						const data = {
							personType: TypeListArr,
							name: this.dataUser.name,
							id: this.getopenid,
							title:this.dataUser.title,
							brigade: '长沙芙蓉区',
							borough: this.dataUser.Localpolice,
							station: this.dataUser.unit
						};
						postAddLogin(data).then((res) => {
							uni.showLoading({
								title: '正在注册中....'
							});
							this.updateList(res)
							setTimeout(() => {
								uni.showToast({
									title: '注册成功',
									icon: 'success'
								});
								uni.hideLoading();
								postLogin({
									id: this.getopenid,
									password: ''
								}).then((resopen) => {
									uni.showLoading({
										title: '正在登陆中...'
									});
									this.updateList(resopen.data)
									this.schoolList(this.schoolInformation)
									setTimeout(() => {
										uni.hideLoading();
										customTotast({
											title: '登录成功',
											icon: 'success'
										})();
										uni.switchTab({
											url: `/pages/index/index`
										});
									}, 1000);
								}).catch((error) => {
									uni.showToast({
										title: '注册成功账号待审核',
										icon: 'none',
										mask: true,
										success() {
											setTimeout(() => {
												uni.navigateTo({
													url: `/pages/login/index`
												});
											}, 500)
										}
									});

								})
							}, 1000);
						}).catch((err) => {
							console.log(err);
						})
					})
					.catch((errors) => {
						uni.$u.toast('校验失败');
					});
			},
			// 志愿者不用掉接口 直接登录
			submitLogin(e) {
				const elist = {
					id: "",
					name: e.name,
					personType: e.personType == "志愿者" ? 'volunteer' : '',
				}
				this.updateList(elist);
				if (e.name !== '') {
					uni.switchTab({
						url: `/pages/index/index`
					});
				} else {
					uni.showToast({
						title: '用户名不能为空'
					});
				}
			},
			// 获取派出所列表
			BoroughList() {
				const that = this;
				const dataLIst = {
					brigade: '长沙芙蓉区'
				};
				getBoroughList(dataLIst)
					.then((res) => {
						res.data.unshift(this.Public)
						console.log(res.data);
						let matter = res.data
							.filter((v) => v.remark && v.borough)
							.map((res) => ({
								id: res.borough,
								label: res.remark
							}));
						that.columns = [matter];
						console.log(that.columns);
					})
					.catch((error) => {});
			},
			// 派出所
			showpickerClick() {
				if (this.dataUser.personType !== '') {
					this.showpicker = true;
				} else {
					uni.showToast({
						title: '请先选择用户类型'
					});
				}

			},
			// 触发点击事件
			pickerConfrm(e) {
				console.log(1121313121,e);
				if (e.value &&　e.value.length >= 1) {
					if (e.value[0].label === '公安机关' || e.value[0].label === '教育局') {
						this.Publicfalse = false
					} else {
						this.Publicfalse = true
					}
					this.dataUser.Localpolice = e.value[0].label;

				}
				this.fields = e.value[0].label;
				this.showpicker = false;
				this.dataUser.unit = ''
			},
			// 单位
			unitClick() {
				console.log(this.dataUser.Localpolice);
				if (this.dataUser.Localpolice !== '') {
					this.stationList();
					this.showunit = true;
				} else {
					uni.showToast({
						title: '请先选择派出所'
					});
				}


			},
			// 单位
			stationList() {
				const that = this;
				const unitList = {
					brigade: '长沙芙蓉区',
					borough: that.fields
				};
				getstationList(unitList)
					.then((res) => {
						let matterunit = res.data
							.filter((v) => v.nickname && v.name)
							.map((res) => ({
								id: res.name,
								label: res.nickname
							}));
						that.unitColums = [matterunit];
					})
					.catch((error) => {});
			},

			// 单位触发确定
			pickerUnitClick(e) {
				// if (this.dataUser.Localpolice !== '') {
				if (e.value.length > 0) {
					console.log(11111);
					this.dataUser.unit = e.value[0].label;
					getstationbase({
						name: this.dataUser.unit
					}).then((respone) => {
						this.schoolInformation = respone.data
					})
				}
				this.showunit = false;
				this.$refs.uForm.clearValidate();
				// }
			}
		}
	};
</script>

<style lang="scss">
	.mySignItem {
		padding: 0;
		margin: 0;
		background-color: #e9eef4;
		overflow: hidden;
		height: 100vh;

		.mySignIndex {
			margin: 30rpx 0 0 0;
			position: relative;
			background-color: #fff;
		}

		.HiddenEse {
			position: absolute;
			top: 16px;
			right: -30px;
			width: 118rpx;
			height: 70rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.iconoscope {
				width: 6px;
				height: 6px;
				display: inline-block;
				/* line-height: 20px; */
				border: solid 2px #c2c2c2;
				margin-left: 10px;
				transform: rotate(45deg);
				border-bottom: white;
				border-left: white;
				margin-bottom: 2px;
			}
		}

		.anniu {
			overflow: hidden;
			margin: 50rpx 20rpx 20rpx;
		}

		.annius {
			margin-top: 30rpx;
			overflow: hidden;
		}

		.dataUserunit {
			padding-left: 16rpx;
		}

		.acquire {
			position: relative;
		}

		.button {
			position: absolute;
			top: 7px;
			right: -80px;
			width: 64px;
			height: 20px;
			line-height: 20px;
			font-size: 11px;
			border: none;
			color: #ccc;
			outline: none;
			background-color: transparent;
			border: 1px solid none;
			margin-left: 0;
			margin-right: 10px;
			padding-left: 0;
			padding-right: 0;
		}

		/deep/.u-form-item {
			line-height: 70rpx;
			position: relative;
		}

		/deep/.u-form-item__body__right {
			padding: 0rpx 150rpx 0 0;
		}

		/deep/ .u-form-item__body__left {
			margin-left: 40rpx;
		}

		/deep/.u-form-item__body__right__message {
			margin-left: 206rpx !important;
		}
	}
</style>