<template>
	<view class="content">
		<view class="content_box">
			<view class="row b-b">
				<text class="tit">姓名</text>
				<input class="input" type="text" v-model="name"  placeholder="请输入姓名" placeholder-class="placeholder" />
			</view>
			<view class="row b-b" @tap="handleTap1('picker2')">
				<text class="tit">性别</text>
				<input class="input" type="text"  @focus='outFocus' v-model="gender" placeholder="请选择性别" placeholder-class="placeholder" />
			</view>
			<lb-picker ref="picker2"
			  mode="selector"
			  :list="genderList"
			  @change="handleChange1"
			  @confirm="handleConfirm1"
			  @cancel="handleCancel1"
			  @touchmove.prevent 
			  >
			</lb-picker>
			<view class="row b-b">
				<text class="tit">身份证号</text>
				<input class="input" type="number"  v-model="id_card" placeholder="请输入身份证号" placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">联系方式</text>
				<input class="input" type="number"  v-model="mobile" placeholder="请输入联系方式" placeholder-class="placeholder" />
			</view>
			<view class="row b-b" @tap="showPicker('region')">
				<text class="tit">省市区</text>
				<input class="input"  @focus='outFocus' v-model="addr" placeholder="请选择省市区"></input>
			</view>
			<w-picker mode="region" @touchmove.prevent   :value="defaultRegion" default-type="value"  @confirm="onConfirm($event,'region')" @cancel="handleCancel" ref="region" ></w-picker>
		</view>
		<view class="content_box">
			<view class="row b-b" @tap="Toshow">
				<text class="tit">医院名称</text>
				<input class="input" type="text" @focus='outFocus' v-model="hospital" placeholder="请选择医院名称" placeholder-class="placeholder" />
			</view>
			<zhilin-picker
				v-model="show"
				:title="title"
				:data="list"
				:initSelected="initSelected"
				:showSearch="true"
				@change="onChange"
				@searchInput='onSearchInput'
				@confirm="onConfirm1"
			/>
			<view class="row b-b" @tap="handleTap2('picker3')">
				<text class="tit">职称</text>
				<input class="input" type="text" @focus='outFocus' v-model="doctor_level" placeholder="请选择职称" placeholder-class="placeholder" />
			</view>
			<lb-picker ref="picker3"
			  mode="selector"
			  :list="levelList"
			  @change="handleChange2"
			  @touchmove.prevent 
			  @confirm="handleConfirm2"
			  @cancel="handleCancel">
			</lb-picker>
			<view class="row b-b" @tap="handleTap1('picker4')">
				<text class="tit">专业</text>
				<input class="input" type="text"  @focus='outFocus' v-model="zyname" placeholder="请选择专业" placeholder-class="placeholder" />
			</view>
			<lb-picker ref="picker4"
			  mode="selector"
			  :list="zyList"
			  @change="handleChange4"
			  @confirm="handleConfirm4"
			  @cancel="handleCancel4"
			  @touchmove.prevent 
			  >
			</lb-picker>
  		</view>
		<view class="check_box flex_item">
			<view><radio style="transform: scale(0.75)" @click="Getcheckbox" color="#6786FB" :checked="checked" /></view>
			<view class="">我已阅读并同意<text @click="TOprivacy">《预约平台用户协议》</text></view>
		</view>
		<view class="add-btn" @click="confirm">下一步</view>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import wPicker from "@/components/w-picker/w-picker.vue"
import zhilinPicker from "@/components/zhilin-picker/zhilin-picker.vue"
import LbPicker from '@/components/lb-picker/index.vue'
import { upload,getHospitalList,setDoctor } from '@/api/index.js';
import { getUserInfo } from '@/api/login.js';
import { getDocterTypeList } from '@/api/doctor.js'
export default {
	components: {
		uniList,
		uniListItem,
		wPicker,
		LbPicker,
		zhilinPicker
	},
	data() {
		return {
			loading: false,
			region:'',
			defaultRegion:[],
			defaultRegion1:[],
			options:[],
			checked:false,
			name:'',//姓名
			gender:'',//性别
			gender_id:'',//性别id
			genderList: [{
				id:1,
				name:'男'
			},{
				id:2,
				name:'女'
			},
			{
				id:0,
				name:'其他'
			}],
			zyList: [],
			zyListR:[],
			zyname: '',
			zyid: 0,
			id_card:'',//身份证
			mobile:'',//联系方式
			addr:'',//省市区
			code:'',//省市区行政编码
			province:'',
			province_id:'',
			city:'',
			city_id:'',
			district:'',
			district_id:'',
			searchVal:'',//搜索医院
			list: [],//医院列表
			show: false,
			initSelected: [],
			title: '选择医院',
			hospital:'',//医院
			hospital_id:'',//医院id
			// 1医师2主治医师3副主任医师4主任医师
			levelList:[{
				id:1,
				name:'医师'
			},{
				id:2,
				name:'主治医师'
			},{
				id:3,
				name:'副主任医师'
			},{
				id:4,
				name:'主任医师'
			}],
			doctor_level:'',//职称
			level_id:'',////职称id
			utype: '',
		};
	},
	onLoad(option) {
		this.ListDate();
		this.getDocterTypeList()
	},
	watch:{
		list(newValue, oldValue) {
			if(newValue != oldValue){
				this.hospital = ''
			}
		},
		searchVal(){
			this.ListDate();
		},
	},
	methods: {
		...mapMutations(['setUserInfo']),
		getDocterTypeList() {
			getDocterTypeList().then(res => {
				console.log(res)
				this.zyListR = res.data.data
				this.zyList = res.data.data.map(item => {
					return item.text
				})
				console.log(this.zyList,'this.zyList')
			})
		},
		handleChange4() {
			
		},
		handleCancel4(item) {
			// console.log(item,'ddd')
		},
		handleConfirm4(item) {
			this.zyname = item.value
			this.zyid  = this.zyListR[item.index].id
			console.log(this.zyname,this.zyid)
		},
		outFocus(e){
			console.log(event.target)
			event.target.blur()
		},
		//省市区弹窗
		showPicker(type){
			this.$refs[type].show();
		},
		TOprivacy(){
			uni.navigateTo({
				url:'/pages/public/uagreement'
			})
		},
		//取消弹窗
		handleCancel(){
			
		},
		//省市区选择确定
		onConfirm(res,type){
			let obj = this;
			obj.result=res;
			obj.addr = res.result;
			if(res.name){
				obj.province = res.name[0];
				obj.city = res.name[1];
				obj.district = res.name[2];
			}else{
				obj.province = '北京市';
				obj.city = '北京市';
				obj.district = '东城区';
			}
			obj.province_id = res.value[0];
			obj.city_id = res.value[1];
			obj.district_id = res.value[2];
			obj.hospital = '';//重置医院
			obj.ListDate();
		},
		/*医院*/
		Toshow(){
			this.show = true;
		},
		onChange(val){
			let obj = this;
			console.log(val,'onChange')
			let arr = val.split(',');
			obj.hospital = arr[1];
			obj.hospital_id = arr[0];
			obj.city = arr[2];
			obj.city_id = arr[3];
			obj.district = arr[4];
			obj.district_id = arr[5];
			obj.province = arr[6];
			obj.province_id = arr[7];
			obj.addr = obj.province + obj.city + obj.district;
			console.log(obj.hospital,obj.hospital_id)
			console.log(obj.city,obj.city_id)
			console.log(obj.district,obj.district_id)
			console.log(obj.province,obj.province_id)
		},
		onConfirm1(val){
		},
		onSearchInput(val){
			this.searchVal = val;
		},
		//加载医院列表
		ListDate(){
			let obj = this;
			let data = '';
			console.log(obj.searchVal)
			if(!obj.searchVal){
				data={
					keyword:'',
					province_id:obj.province_id,
					city_id:obj.city_id,
					district_id:obj.district_id,
					sort:'id desc',
					page:1,
					limit:1500,
				}
			}else{
				data={
					keyword:obj.searchVal,
					sort:'id desc',
					page:1,
					limit:1500,
				}
			}
			getHospitalList(data).then(e => {
				obj.list = e.data.list;
			}).catch((e) => {
				console.log(e)
			});
		},
		//阅读并同意
		Getcheckbox() {
			let obj = this;
			obj.checked = !obj.checked;
		},
		//提交
		confirm() {
			let obj = this;
			if(obj.loading) {
				return
			}
			if(obj.name == ''){
				this.$api.msg('请填写姓名！');
				return;
			}
			if(obj.gender_id == ''){
				this.$api.msg('请选择姓别！');
				return;
			}
			if(obj.mobile == ''){
				this.$api.msg('请输入联系方式！');
				return;
			}
			if(obj.hospital_id == ''){
				this.$api.msg('请选择医院！');
				return;
			}
			if(obj.level_id == ''){
				this.$api.msg('请选择职称！');
				return;
			}
			if(obj.zyid == '') {
				this.$api.msg('请选择专业！');
				return;
			}
			if(obj.checked == false){
				this.$api.msg('阅读并同意医生《入驻协议》');
				return;
			}
			obj.loading = true
			setDoctor({	
				name:obj.name,
				mobile:obj.mobile,
				province:obj.province,
				province_id:obj.province_id,
				city:obj.city,
				city_id:obj.city_id,
				district:obj.district,
				district_id:obj.district_id,
				hospital:obj.hospital_id,
				gender:obj.gender_id,
				id_card:obj.id_card,
				doctor_level:obj.level_id,
				type: obj.zyid
			}).then(function(e) {
				obj.loading = false
				//注册医生完成后更新用户信息
				obj.userInfo();
				uni.navigateTo({
					url: '/pages/public/DocRegisterIndex'
				})
			}).catch(e => {
				obj.loading = false
				console.log(e)
			});
		},
		//选择身份后更新用户信息
		userInfo() {
			let obj = this;
			getUserInfo({})
				.then(function(e) {
					uni.setStorageSync('userInfo', e.data);
				})
				.catch(function(e) {
					console.log(e);
				});
		},
		//性别选择
		handleTap1(name) {
			this.$refs[name].show()
		},
		//性别选择
		handleChange1 (item) {
		},
		//性别选择
		handleConfirm1 (item) {
			let obj = this;
			obj.gender = item.item.name;
			obj.gender_id = item.item.id;
		},
		//职称选择
		handleTap2(name) {
			this.$refs[name].show()
		},
		//职称选择
		handleChange2(item) {
		},
		//
		handleChange3(item) {
			console.log(item)
		},
		//职称选择
		handleConfirm2 (item) {
			let obj = this;
			obj.doctor_level = item.item.name;
			obj.level_id = item.item.id;
			console.log(obj.doctor_level,obj.level_id)
		},
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	min-height: 100%;
}
.content_box {
	background-color: #ffffff;
	padding: 0rpx 25rpx;
	width: 92%;
	margin: 25rpx auto;
	border-radius: 15rpx;
	.examine_list{
		width: 100%;
		border-bottom: 2rpx solid #f0f0f0;
		.textarea-box{
			width: 95%;
			margin: 25rpx auto;
			.textarea{
				width: 100%;
				font-size: 28rpx;
				min-height: 150rpx;
			}
		}
	}
}
.row {
	display: flex;
	align-items: center;
	// position: relative;
	padding: 0 30rpx;
	height: 110rpx;
	background: #fff;
	border-bottom: 1rpx solid #f8f6f6;

	.tit {
		flex-shrink: 0;
		width: 180rpx;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.iconlocation {
		font-size: 36rpx;
		color: $font-color-light;
	}
}
.examine_name {
	color: #171717;
	font-size: 28rpx;
	padding: 25rpx 25rpx;
}
.examine_img {
	width: 100%;
	text-align: center;
	padding-bottom: 25rpx;
	.image{
		width: 150rpx;
		height: 150rpx;
	}
	.image1{
		min-width: 150rpx;
		max-width: 100%;
		min-height: 150rpx;
	}
}
.add-img-box {
	width: 100%;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 50rpx;
}
.add-img-item {
	border-radius: 24rpx;
	position: relative;
	margin-bottom: 25rpx;
	.add-img {
		min-width: 150rpx;
		max-width: 100%;
		min-height: 150rpx;
	}
}
.add-img-del {
	position: absolute;
	width: 40rpx;
	height: 40rpx;
	right: 20rpx;
	// bottom: 155rpx;
	//background-color: rgba(238, 0, 0, 1);
	border-radius: 20rpx;
}
.default-row {
	margin-top: 16rpx;
	.tit {
		flex: 1;
	}
	switch {
		transform: translateX(16rpx) scale(0.9);
	}
}
.add-btn {
	position: fixed;
	bottom: 0rpx;
	width: 100%;
	height: 100rpx;
	font-size: $font-lg;
	color: #fff;
	background-color: #6786FB;
	line-height: 100rpx;
	text-align: center;
}
.img_box {
	padding: 35rpx 35rpx;
	width: 250rpx;
	height: 250rpx;
}
.img_box image {
	width: 100%;
	height: 100%;
}
.alert-box {
	background-color: #ffffff;
}
.b-b:after {
	position: relative !important;
}
.check_box {
	padding: 25rpx 25rpx;
	font-size: 28rpx;
	text{
		color: #6786FB;
	}
}

</style>
