<template>
	<view>
		<view class="grxx">
			<view class="grxxItem">
				<view class="ygxm">
					<text>人员信息</text>
				</view>
				<view class="sfzhm">
					<text>姓名</text>
					<input type="text" v-model="name" placeholder="请输入姓名" />
				</view>
				<view class="sfzhm">
					<text>身份证</text>
					<input type="text" v-model="idcard" placeholder="请输入身份证" />
				</view>
				<view class="sfzhm">
					<text>手机号</text>
					<input type="text" v-model="phone" placeholder="请输入手机号" />
				</view>
				<view class="sfzhm" v-if="type=='outRegister'">
					<view class="uni-list-cell-left">
						单位
					</view>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" :value="CompanyIndex" :range="CompanyList" range-key="name">
							<view class="uni-input">{{ischange1?CompanyList[CompanyIndex].name:companyName}}</view>
						</picker>
					</view>
				</view>
				<view class="sfzhm">
					<view class="uni-list-cell-left">
						科室
					</view>
					<view class="uni-list-cell-db">
						<uni-combox :candidates='array1' v-model="officeName" @input="ksInput"></uni-combox>
					</view>
				</view>
				<view class="sfzhm">
					<view class="uni-list-cell-left">
						常驻地址
					</view>
					<view class="uni-list-cell-db" @click="isdyShow=true">
						<input type="text" v-model="xxdz" disabled />
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<button type="default" @click="djxx" :disabled="isbutton">新增</button>
		</view>


		<!-- 地区选择弹窗 -->
		<view v-show="isdyShow" class="dytc picTime">
			<!-- 地区选择器 -->
			<view class="dqxz">
				<view :class="isok?'dyButtons':'dyButton'">
					<view type="default" @click="dqno">取消</view>
					<view class="dybuttonst" v-if="isok" type="default" @click="dqok">完成</view>
				</view>
				<view class="uni-title uni-common-pl">地区选择</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							省级
						</view>
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChangedz($event,0)" :value="sjIndex" :range="sjList"
								range-key="name">
								<view class="uni-input">{{xzq==''?'请选择':sjList[sjIndex].name}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="uni-list" v-if="isshi">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							市级
						</view>
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChangedz($event,1)" :value="ssIndex" :range="ssList"
								range-key="name">
								<view class="uni-input">{{xzq=='1'?'请选择':ssList[ssIndex].name}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="uni-list" v-if="isqu">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							区
						</view>
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChangedz($event,2)" :value="qjIndex" :range="qjList"
								range-key="name">
								<view class="uni-input">{{xzq=='2'?'请选择':qjList[qjIndex].name}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="uni-list" v-if="isjd">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							街
						</view>
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChangedz($event,3)" :value="jjIndex" :range="jjList"
								range-key="name">
								<view class="uni-input">{{xzq=='3'?'请选择':jjList[jjIndex].name}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		postRequest,
		getRequest
	} from '../../api/api.js'
	export default {
		data() {
			return {
				isbutton: false,

				name: '',
				idcard: '',
				phone: '',
				openId: '',

				companyId: '',
				CompanyList: [], //公司下拉
				CompanyList1: [],
				CompanyIndex: 0,
				isCompanychange: false,
				companyName: '',

				index1: 0,
				array: [],
				array1: [],
				ischange1: false,
				officeId: '',
				officeName: '',

				sprList: [],
				sprIndex: 0,
				sprName: '',
				sprId: '',
				isspr: false,

				type: '',
				dsfqx: 0,
				range: [{
					"value": 0,
					"text": "第三方普通职员"
				}, {
					"value": 5,
					"text": "第三方负责人"
				}],
				userType: '',

				xxdz: '', //详细地址  最终选择完成的地址
				sjList: [], //省级地址列表
				sjIndex: 0, //省级选择下标
				sjdata:'',  //省级选择项
				ssList: [], //市级地址列表
				ssIndex: 0, //市级选择下标
				ssdata:'',  //市级选择项
				qjList: [], //区级地址列表
				qjIndex: 0, //区级选择下标
				qjdata:'',  //区级选择项
				jjList: [], //街级地址列表
				jjIndex: 0, //街级选择下标
				jjdata:'',  //街级选择项
				isshi: false,
				isqu: false,
				isjd: false,
				isdyShow: false, //地区选择弹窗显示
				isok: false, //区域选择不到最后一级不显示确定按钮
				xzq: '',

			}
		},
		onLoad(option) {
			this.userType = uni.getStorageSync('userType');
			this.type = option.icon
			this.openId = uni.getStorageSync('openId');
			// 获取省级地址  id:父级id   省级默认0
			postRequest('/covidDailyRegister/selectCascade', {
				id: 0
			}).then(res => {
				if (res.code == '200') {
					this.sjList = res.data
				}
			})
			postRequest('/sysUser/findUserDetailByToken').then(res => {
				if (res.code == '200') {
					this.companyId = res.data.companyId;
					this.companyName = res.data.companyName;
				}
			})
			getRequest('/covidRegister/selectOfficName', {}).then((res) => {
				if (res.code == '200') {
					this.array = res.data;
					this.array.forEach(item => {
						this.array1.push(item.name)
					})
				}
			})
			getRequest('/covidRegister/selectCompanyName', {}).then((res) => {
				if (res.code == '200') {
					this.CompanyList = res.data;
				}
			})
			if (this.type == 'outRegister') {
				postRequest('/sysUser/findUserByRole', {
					enname: 'departmentManger'
				}).then((res) => {
					if (res.code == '200') {
						this.sprList = res.data;
					}
				})
			}
		},
		methods: {
			//地区选择器变化 
			bindPickerChangedz(e, num) {
				//num: 0省级 1市级  2区级  标识
				if(num==0){
					this.sjIndex = e.target.value;
					let id = this.sjList[e.target.value].id;
					let name = this.sjList[e.target.value].name;
					this.sjdata=name;
					this.xzq='1'  //请选择提示语的显示隐藏
					this.isshi=true; // 省级选择完成,显示市级选择框
					// 获取市级地址  id:父级id
					postRequest('/covidDailyRegister/selectCascade', {
						id
					}).then(res => {
						if (res.code == '200') {
							this.ssList = res.data
						}
					})
				}else if(num==1){
					this.ssIndex = e.target.value;
					let id = this.ssList[e.target.value].id;
					let name = this.ssList[e.target.value].name;
					this.ssdata=name;
					this.xzq='2';	//请选择提示语的显示隐藏
					this.isqu=true; // 市级选择完成,显示区级选择框
					// 获取区级地址  id:父级id
					postRequest('/covidDailyRegister/selectCascade', {
						id
					}).then(res => {
						if (res.code == '200') {
							this.qjList = res.data
						}
					})
				}else if(num==2){
					this.qjIndex = e.target.value;
					let id = this.qjList[e.target.value].id;
					let name = this.qjList[e.target.value].name;
					this.qjdata=name;
					this.xzq='3';   //请选择提示语的显示隐藏
					this.isjd=true; // 区级选择完成,显示街级选择框
					// 获取街级地址  id:父级id
					postRequest('/covidDailyRegister/selectCascade', {
						id
					}).then(res => {
						if (res.code == '200') {
							this.jjList = res.data
						}
					})
				}else{
					this.jjIndex = e.target.value;
					let id = this.jjList[e.target.value].id;
					let name = this.jjList[e.target.value].name;
					this.jjdata=name;
					this.xzq='4';   //请选择提示语的显示隐藏
					this.isok=true; // 区级选择完成,显示确认
				}
				
			},
			//地区选择器取消按钮
			dqno() {
				this.xxdz = '' //取消时清除结果
				this.xzq='';   //重置请选择提示语
				this.isshi=false; //重新隐藏市级选择
				this.isqu=false; //重新隐藏区级选择
				this.isjd=false  //重新隐藏街级选择
				this.isok = false;
				this.isdyShow = false;
			},
			//地区选择器确定按钮
			dqok() {
				this.xxdz=this.sjdata+' '+this.ssdata+' '+this.qjdata+' '+this.jjdata
				this.xzq='';   //重置请选择提示语
				console.log(this.xzq)
				this.isshi=false; //重新隐藏市级选择
				this.isqu=false; //重新隐藏区级选择
				this.isjd=false  //重新隐藏街级选择
				this.isok = false;
				this.isdyShow = false;
			},
			csChange() {
				const value = e.detail.value
			},
			csClick(node) {

			},
			bindSpr: function(e) {
				this.isspr = true;
				this.sprIndex = e.target.value
				this.sprId = this.sprList[this.sprIndex].id;
				this.sprName = this.sprList[this.sprIndex].name;
			},
			bindPickerChange: function(e) {
				this.ischange1 = true;
				this.CompanyIndex = e.target.value
				this.companyId = this.CompanyList[this.CompanyIndex].id;
				this.companyName = this.CompanyList[this.CompanyIndex].name
			},
			ksInput(value) {
				if (this.array1.indexOf(value) >= 0) {
					this.officeId = this.array[this.array1.indexOf(value)].id
				}
			},
			djxx() {
				let xxdz=this.sjdata+this.ssdata+this.qjdata+this.jjdata
				if (this.idcard == '' || !(
						/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(this
							.idcard))) {
					uni.showToast({
						title: "身份证格式错误"
					})
				} else {
					let data = {
						userType: this.dsfqx,
						name: this.name,
						officeId: this.officeId,
						companyName: this.companyName,
						phone: this.phone,
						idcard: this.idcard,
						verifierId: this.sprId || '',
						companyId: this.companyId,
						address:xxdz
					}
					postRequest(this.type == "innerRegister" ? '/sysUser/insert' : '/thirdUser/insert', data).then(res => {
						if (res.code == '200') {
							uni.showToast({
								title: "添加成功",
								duration: 1500
							})
							this.name = ''
							this.idcard = ''
							this.phone = ''
							this.officeName = ''
							this.ischange1 = false
							this.isspr = false
							this.officeId = ''
						} else {
							uni.showToast({
								title: res.msg,
								duration: 2000
							})
						}
					})
				}
			}
		}
	}
</script>

<style>
	.grxx {
		padding-top: 10px;
	}

	.grxxItem {
		border-radius: 5px;
		font-size: 13px;
		box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.1);
	}

	.grxxItem .ygxm {
		padding: 10px;
		background-color: #3297ff;
		color: white;
	}

	.sfzhm {
		height: 37rpx;
		margin: 0 10px;
		border-bottom: 1px solid #CCCCCC;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		font-size: 13px;
		color: #999999;
		position: relative;
	}

	.grxxItem .sfzhm input {
		border-bottom: #cccccc;
		font-size: 13px;
		width: 80%;
	}

	.grxxItem .mdd {
		justify-content: left;
	}

	.grxxItem .mdd input {
		width: 70%;
		margin-left: 10px;
	}

	.uni-list-cell-db {
		width: 80%;
	}

	.hxx {
		position: absolute;
		color: red;
		left: 3px;
		top: 25%;
	}

	.grxxItem .sfzhm:last-of-type {
		border: none;
	}

	.xx {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 4px 10px;
		padding: 10px 0;
		border-bottom: 1px solid #CCCCCC;
	}

	.xx1 {
		margin: 0;
		padding: 0;
		width: 34%;
		border-radius: 68px 0 0 68px;
		height: 34px;
		line-height: 34px;
		border: none;
		font-size: 13px;

	}

	.xx2 {
		margin: 0;
		padding: 0;
		width: 34%;
		border-radius: 0 68px 68px 0;
		height: 34px;
		line-height: 34px;
		border: none;
		font-size: 13px;
	}

	.xx3 {
		background-color: #007AFF;
		color: white;
	}

	.xxdz {
		margin: 0 10px;
		padding: 10px;
		font-size: 13px;
		color: #999999;
		position: relative;
	}

	.xxdz .hxx {
		top: 7%;
	}

	.xxdz .sfzhm {
		margin: 0;
		border-bottom: 1px solid #CCCCCC;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
		font-size: 13px;
		color: #999999;
		border: none;
	}

	.xxdz .sfzhm text:first-of-type {
		color: #333333;
		font-size: 13px;
	}

	.xxdz .sfzhm text:last-of-type {
		color: #007AFF;
	}

	.footer {
		text-align: center;
		margin-top: 30px;
	}

	.footer button {
		width: 50%;
		background-color: #007AFF;
		color: white;
	}

	.picTime {
		z-index: 10;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.uni-padding-wrap {
		width: 750rpx;
		background-color: white;
		display: flex;
		justify-content: center;
		padding: 10px 0;
	}

	.uni-padding-wrap button {
		height: 30px;
		line-height: 30px;
		font-size: 15px;
	}

	.uni-padding-wrap button:last-of-type {
		background-color: #007AFF;
		color: white;
	}

	.yymc {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.pickers {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 50%;
		z-index: 10;
		text-align: center;
		background-color: white;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.dqxz {
		position: absolute;
		left: 0;
		bottom: 0;
		height: 70%;
		width: 100%;
		background-color: white;
		padding: 10px;
	}

	.dqxz .uni-title {
		padding: 10px 0;
		text-align: center;
	}

	.dqxz .uni-list-cell-db {
		margin: 10px 20px 10px 10px;
		padding: 5px;
		border-radius: 6px;
		background-color: #CCCCCC;
		border-top: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
	}

	.dyButton {
		overflow: hidden;
		text-align: center;
		border-bottom: 1px solid #f3eded;
		padding: 1%;
	}

	.dyButtons {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		position: relative;
		height: 4.1%;
		text-align: center;
		padding: 1%;
		border-bottom: 1px solid #f3eded;
	}

	.dyButton view {
		float: left;

		border: none;
		background-color: white;
		font-size: 15px;
	}

	.dyButtons view:first-of-type {
		position: absolute;
		left: 0%;
		top: 0%;
		border: 1px solid rgba(0, 0, 0, 0);
		background-color: white;
		font-size: 15px;
	}

	.dyButtons .dybuttonst {
		position: absolute;
		right: 5%;
		top: 0%;
		border: 1px solid rgba(0, 0, 0, 0);
		background-color: white;
		font-size: 15px;
	}

	.dyButtons .dybuttonst {
		color: #007AFF;
	}
</style>
