<template>
	<view class="box">
		<view class="info">
			<text class="title">基础信息</text>
			<u-form :model="form" ref="info" label-width="150rpx">
				<u-form-item label="姓名" prop="name">
					<u-input v-model="form.name" placeholder="请输入" @blur="checkName" input-align="right" />
				</u-form-item>
				<u-form-item label="头像" prop="avatar">
					<u-input input-align="right" v-model="form.avatar" type="select" :select-open="avatarShow"
						@click="selectAct();avatarShow=true" placeholder="请选择" v-if="!form.avatar" />
					<view class="flex-row flex-jus-end" v-else>
						<u-image width="70rpx" height="70rpx" shape="circle" :src="form.avatar" @click="selectAct">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</view>
				</u-form-item>
				<u-form-item label="手机号" prop="mobile">
					<u-input v-model="form.mobile" type="number" :maxlength="11" placeholder="请输入手机号"
						input-align="right" :disabled="false" />
				</u-form-item>
				<u-form-item label="身份证号" prop="id_card">
					<u-input v-model="form.id_card" type="idcard" @blur="checkId" :maxlength="18" placeholder="请输入"
						input-align="right" />
				</u-form-item>
				<!-- <u-form-item label="医院" prop="hospital">
					<view class="flex-row flex-jus-end">
						<u-input type="select" input-align="right" v-model="form.hospital['text']"
							:select-open="hospitalShow" placeholder="医院-院区"
							@click="$go('select?type=1');hospitalShow=true"></u-input>
					</view>
				</u-form-item> -->
				<!-- 门店 -->
				<u-form-item label="门店" prop="hospital">
					<!-- <view class="flex-row flex-jus-end">
						<u-input type="select" input-align="right" v-model="form.hospital['name']"
							:select-open="hospitalShow" placeholder="请选择"
							@click="$go('select?type=1');hospitalShow=true"></u-input>
					</view> -->
					<view class="flex-row flex-jus-end" @click="showDoor">
						<u-picker v-model="showedd" mode="selector" input-align="right" :range='newHospitalList'
							@confirm="confirmList"></u-picker>

						<text style="color:#999">{{callBackM||'请选择'}}</text>
						<!-- <text style="color:#999">请选择</text> -->
					</view>
				</u-form-item>
				<u-form-item label="科室" prop="repartments" v-if="identity==1" :border-bottom="identity!=3">
					<!-- <view class="flex-row flex-jus-end">
						<u-input type="select" input-align="right" v-model="form.repartments['name']"
							:select-open="repartmentsShow" placeholder="请选择" @click="selRep"></u-input>
					</view> -->
					<text style="color:#999" class="flex-row flex-jus-end" @click="showPoped">{{d_name||'请选择'}}</text>


					<u-popup v-model="showpop" mode="bottom" :mask="false">
						<view class="contents">
							<view class="confrim-btn">
								<text class="left"></text>
								<view class="right">
									<text class="title">选择科室</text>
									<text class="btn" @click="onclosed">取消</text>
								</view>
							</view>

							<!-- 左右 -->
							<view class="contents_scroll">
								<scroll-view scroll-y="true" @touchmove.stop>
									<view class="contents_scroll_left">
										<view class="box" :class="{active:actived==index}" @click="changeStyle(index)"
											v-for="(item,index) in officeList" :key="item.id">
											{{item.name}}
										</view>
									</view>
								</scroll-view>
								<view class="contents_scroll_right">
									<view v-for="(item,index) in officeList" :key="item.id">
										<scroll-view scroll-y="true" @touchmove.stop v-if="index==actived">
											<view class="lists" v-for="(item1,index) in item.child" :key="item1.id"
												@click="getDepart(item1.id,item1.name)">
												{{item1.name}}
												<text class="iconfont icon-jiantou1"></text>
											</view>
										</scroll-view>
									</view>
								</view>
							</view>

						</view>
					</u-popup>


				</u-form-item>
				<!-- 西医/中医 -->
				<u-form-item label="西医/中医" prop="positioned" :border-bottom="false" v-if="identity==1">
					<view class="flex-row flex-jus-end">
						<u-input type="select" input-align="right" :select-open="showed" v-model="form.doctorType.value"
							placeholder="请选择" @click="$emit('select1');showed=true">
						</u-input>
					</view>
				</u-form-item>
				<u-form-item label="西药/中药" prop="positioned" :border-bottom="false" v-if="identity==2">
					<view class="flex-row flex-jus-end">
						<u-input type="select" input-align="right" :select-open="showed" v-model="form.doctorType.value"
							placeholder="请选择" @click="$emit('select1');showed=true">
						</u-input>
					</view>
				</u-form-item>
				<u-form-item label="职称" prop="position" :border-bottom="false" v-if="identity!=3">
					<view class="flex-row flex-jus-end">
						<u-input type="select" input-align="right" :select-open="show" v-model="form.position.name"
							placeholder="请选择" @click="$emit('select');show=true"></u-input>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="info" v-if="identity==1">
			<text class="title">医生介绍</text>
			<u-form :model="form" ref="introduce" label-width="150rpx" label-position="top">
				<u-form-item label="擅长" prop="beGoodAt">
					<view class="flex-col bg b-r-8 p-row-16" style="width: 646rpx;">
						<u-input v-model="form.beGoodAt" placeholder="请填写" type="textarea" :maxlength="500"
							auto-height />
						<d-text :text="`${form['beGoodAt']?form['beGoodAt'].length:0}/500`" color="#C4C7CC" width="614"
							align="right"></d-text>
					</view>
				</u-form-item>
				<u-form-item label="个人简介" prop="about" :border-bottom="false">
					<view class="flex-col bg b-r-8 p-row-16" style="width: 646rpx;">
						<u-input v-model="form.about" placeholder="请填写" type="textarea" :maxlength="500" auto-height />
						<d-text :text="`${form['about']?form['about'].length:0}/500`" color="#C4C7CC" width="614"
							align="right"></d-text>
					</view>
				</u-form-item>
			</u-form>
		</view>

		<!-- 门店多选 -->
		<u-popup v-model="openShow" mode="bottom" border-radius="24" length="80%" :safe-area-inset-bottom="true">
			<view class="content_popup">
				<view class="top">
					<view class="titles">选择门店</view>
					<view class="search">
						<u-search :height="86" :inputStyle="{height:'86rpx',padding:'0 16rpx'}" @custom="keyword=''" :show-action="false"
							placeholder="请输入诊所名称" v-model="keyword"
							@input="getList"></u-search>

					</view>
				</view>
				<scroll-view scroll-y="true" style="height: 400rpx;min-height: 300rpx;max-height: 560rpx;">
					<view>
						<u-checkbox-group @change="checkboxGroupChange">
							<u-checkbox @change="checkboxChange(item.name,item.id)" v-model="item.check"
								active-color="#6ACDBB" class="store_list" shape="circle" :wrap="true"
								v-for="(item,index) in hospitalList" :key="item.id" :name="item.id">
								<view>
									{{item.name}}
								</view>
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</scroll-view>
				<view class="confrim-btn" style="z-index: 99999;">
					<view class="u-btn qx" @click="openShow=false">取消</view>
					<view class="u-btn qd" @click="openShow=false">确定</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	// import {
	// 	upload

	import {
		hospitalList,
		officeList,
		newChek
	} from '../../../../api/all';
	import { chooseAvatarImage } from '@/common/js/select-avatar-image.js';

	// } from '@/api/all.js'
	export default {
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			},
			identity: {
				type: [Number, String],
				default: uni.getStorageSync('role') || 1
			}
		},
		data() {
			return {
				d_id: '',
				d_name: uni.getStorageSync('d_name') || '',
				actived: 0,
				officeList: [],
				showpop: false,
				store_idList: [],
				store_id: '',
				callBackM: uni.getStorageSync('callBackM') || '',
				showedd: false,
				avatarShow: false,
				hospitalShow: false,
				repartmentsShow: false,
				show: false,
				showed: false,
				form: this.info,
				radio: '',
				rules: {
					name: [{
						required: true,
						message: '姓名不能为空',
						trigger: ['change', 'blur']
					}],
					// avatar: [{
					// 	required: true,
					// 	message: '请选择头像',
					// 	// validator: (rule, value, callback) => {
					// 	// 	if (!this.form.avatar) {
					// 	// 		callback(new Error('请选择头像'));
					// 	// 	} else {
					// 	// 		callback();
					// 	// 	}
					// 	// },
					// 	trigger: ['change', 'blur']
					// }],
					mobile: [{
						required: true,
						validator: (rule, value, callback) => {
							if (!uni.$u.test.mobile(value)) {
								callback(new Error('手机号错误'));
							} else {
								callback();
							}
						},
						trigger: ['change', 'blur']
					}],
					id_card: [{
						required: true,
						validator: (rule, value, callback) => {
							if (!this.$checkID(this.form.id_card)) {
								callback(new Error('身份证号码有误，请核实'));
							} else {
								callback();
							}
						},
						trigger: ['change', 'blur']
					}],
					// positioned: [{
					// 	required: true,
					// 	validator: (rule, value, callback) => {
					// 		if (!this.form['positioned']['name']) {
					// 			callback(new Error('请选择'));
					// 		} else {
					// 			callback();
					// 		}
					// 	},
					// 	trigger: ['change', 'blur']
					// }],
					// position: [{
					// 	required: true,
					// 	validator: (rule, value, callback) => {
					// 		if (!this.form['position']['name']) {
					// 			callback(new Error('请选择职称'));
					// 		} else {
					// 			callback();
					// 		}
					// 	},
					// 	trigger: ['change', 'blur']
					// }],
					beGoodAt: [{
						required: true,
						message: '请填写医师介绍',
						trigger: ['change', 'blur']
					}],
					about: [{
						required: true,
						message: '请填写个人简介',
						trigger: ['change', 'blur']
					}],
					card: [{
						required: true,
						validator: (rule, value, callback) => {
							if (this.form['card'].length == 2) {
								callback();
							} else {
								callback(new Error('请选择身份证'));
							}
						},
						trigger: ['change', 'blur']
					}],
				},
				hospitalList: {},
				newHospitalList: [],
				openShow: false,
				form: {
					check: false
				},
				showNewname: false,
				showNewid: false,
				keyword:"",
			};
		},
		watch: {
			form: {
				handler(newValue, oldValue) {
					this.form['show'] && (this.hospitalShow = false)
					this.form['show'] && (this.repartmentsShow = false)
					this.form['show'] && (this.show = false)
					this.form['showed'] && (this.showed = false)
					this.form['show'] && this.$refs.info.setRules(this.rules)
				},
				deep: true
			}
		},
		mounted() {
			this.form = (uni.getStorageSync('info_submit'))
		},
		created() {
			this.$nextTick(() => {
				this.$refs.info && this.$refs.info.setRules(this.rules);
				this.$refs.introduce && this.$refs.introduce.setRules(this.rules);
				this.$refs.card && this.$refs.card.setRules(this.rules);
			})
		},
		methods: {
			getList() {
				uni.showLoading({
					title: '搜索中...'
				})
				this.showDoor()
				uni.hideLoading()
			},
			selectAct() {
				chooseAvatarImage({
					formData: {
						store_id: '11001',
					},
					onSuccess: (res) => {
						const req = this.$u.test.jsonString(res.data) ? JSON.parse(res.data) : res.data;
						if (req.errcode == 0) {
							this.avatarShow = false;
							this.form.avatar = req.data.url;
						} else {
							this.$toast(res.msg);
						}
					},
					onCancel: () => {
						this.avatarShow = false;
					},
					onFail: () => {
						this.avatarShow = false;
					},
				});
			},
			checkboxChange(e, id) {
				// console.log(e, 'eee');
				this.callBackM = e
				uni.setStorageSync('store_id', id)
				uni.setStorageSync('callBackM', e)
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e, 'e');
				uni.setStorageSync('storeidList', e)
			},
			//选择门店
			showDoor() {
				this.openShow = true;
				const data = {
					keyword:this.keyword,
					store_id: uni.getStorageSync('store_id') || '11001',
				}
				hospitalList(data).then(res => {
					// console.log(res);
					this.hospitalList = res.data
					this.newHospitalList = res.data.map(x => x.name)
					this.store_idList = res.data.map(x => x.id)
				})
			},
			//选择科室
			changeStyle(index) {
				this.actived = index
			},
			showPoped() {
				this.showpop = true;
				// console.log(111);
				const data = {
					store: '',
					store_id: uni.getStorageSync('store_id') || '11001',
				}
				officeList(data).then(res => {
					this.officeList = res.data.departments
					// console.log(res.data.departments);
				})
			},
			onclosed() {
				// console.log(1);
				this.showpop = false

			},
			getDepart(a, b) {
				this.showpop = false
				this.d_id = a
				this.d_name = b
				uni.setStorageSync('depart_id', a)
				uni.setStorageSync('d_name', b)
			},
			// confirmList(e) {
			// 	this.store_id = this.store_idList[e]
			// 	this.callBackM = this.newHospitalList[e]
			// 	//将storeid 进行持久化存储
			// 	uni.setStorageSync('store_id', this.store_id)
			// 	// console.log(this.store_id);
			// },
			//科室
			selRep() {
				// console.log(11);
				// !this.form.hospital['1'] && this.$toast('请选择门店')
				// this.form.hospital['1'] && this.$go('select?type=2&id=' + this.form.hospital['1']['id']);
				// this.form.hospital['1'] && (this.repartmentsShow = true)
			},

			// 身份验证
			checkName() {
				if (this.form.name) {
					this.showNewname = true
					// if (this.showNewid) {
					// 	this.getNewCheck()
					// }
				}
				this.getNewCheck()
			},
			checkId() {
				if (this.form.id_card) {
					this.showNewid = true
					// if (this.showNewname) {
					// 	this.getNewCheck()
					// }
				}
				this.getNewCheck()
			},
			getNewCheck() {
				if (this.showNewid && this.showNewname) {
					const data = {
						name: this.form.name,
						idcard: this.form.id_card,
						store_id: uni.getStorageSync('store_id') || '11001',
					}
					newChek(data).then(res => {
						// console.log(res);
						if (res.errcode != -1) {
							// this.$toast(res.data)
							// console.log(res.data, 'data');
						} else {
							this.$toast(res.msg)
						}
					})
				}
			},
			async submit() {
				let introduce = true;
				let card = true;
				let info = true;
				this.$refs.introduce && (introduce = await this.$refs.introduce.validate())
				this.$refs.card && (card = await this.$refs.card.validate())
				this.identity == 1 && this.$refs.info && (info = await this.$refs.info.validate());
				// this.identity == 1 && this.$refs.info && ( this.$refs.info.validate());
				if (introduce && card && info) {
					this.$emit('submit_data', this.form);
					uni.setStorageSync('info_submit', this.form)
				}
				// this.$emit('submit_data', this.form);

				console.log(this.form, 'submit_data');
			}
		}
	};
</script>
<style lang="scss" scoped>
	.box {
		padding: 0 20rpx;
		box-sizing: content-box;


	}

	.content_popup {
		z-index: 9999;
		padding: 24rpx;

		.top {
			height: 280rpx;
			font-family: PingFang SC-Bold, PingFang SC;

			.search {
				padding: 16rpx 32rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #CCCCCC;
			}

			.titles {
				height: 54rpx;
				line-height: 54rpx;
				font-size: 32rpx;
				text-align: center;
				font-weight: bold;
				color: #000000;
				margin-bottom: 20rpx;
			}
		}

		.store_list {
			padding: 0 30rpx;
			height: 100rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.confrim-btn {
			width: 100%;
			height: 100rpx;
			padding: 0 30rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.u-btn {
				width: 300rpx;
				height: 84rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
			}

			.qx {
				border: 2rpx solid #6ACDBB;
				color: #6ACDBB;
			}

			.qd {
				background: #6ACDBB;
				color: #FFFFFF;
			}
		}
	}



	.title {
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #31353D;
	}

	.info {
		border-radius: 8rpx;
		background-color: #fff;
		padding: 32rpx 32rpx 0rpx 32rpx;
		margin-top: 20rpx;
	}

	.hiht {
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		margin-right: 16rpx;
	}

	.contents {
		width: 100vw;
		height: 70vh;

		.confrim-btn {
			width: 100%;
			height: 9%;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.right {
				width: 486rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					width: 144rpx;
					height: 50rpx;
					font-size: 36rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #0F172A;
				}

				.btn {
					width: 82rpx;
					height: 42rpx;
					font-size: 34rpx;
					border: 0;
					background-color: #fff;
					color: #969799;
				}
			}


		}

		.contents_scroll {
			width: 100%;
			height: 91%;
			display: flex;

			.contents_scroll_left {
				width: 264rpx;
				background: #F8FAFC;
				text-align: center;

				.box {
					width: 264rpx;
					background: #F8FAFC;
					line-height: 104rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #475569;
				}


				.active {
					background: #FFFFFF;
					color: #4175EE;
				}
			}

			.contents_scroll_right {
				width: 486rpx;
				background-color: #fff;

				.lists {
					width: 486rpx;
					height: 104rpx;
					padding: 32rpx 0 32rpx 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #1E293B;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 54rpx 0 74rpx;
				}
			}
		}
	}
</style>
