<template>
	<view class="screenorder">
		<view class="user_info">
			<view class="basic">
				<view class="name">{{userInfo.patientName}}</view>
				<view style="margin-right: 30rpx; color: #333">年龄：{{userInfo.age}}</view>
				<view style="color: #333;">性别：{{userInfo.sex}}</view>
			</view>
			<view class="illness" v-if="formData.disease">
				<view v-show="formData.disease.includes(0)">
					<span>无</span>
				</view>
				<view v-show="formData.disease.includes(1)">
					<span>高血压</span>
				</view>
				<view v-show="formData.disease.includes(2) ">
					<span>高血糖</span>
				</view>
				<view v-show="formData.disease.includes(3)">
					<span>高血脂</span>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="title">
			<text>基本信息</text>
		</view>

		<u-form :model="formData" :rules="rules" ref="form1">
			<u-form-item label="预约机构" labelWidth="80">
				<lx-input class="input" v-model="formData.hospitalName" :list="DeptList" @clickItem="confirm"
					@clickMask="clickMask" @input="input" :hidden.sync="hidden"></lx-input>
				<!-- <uni-data-select v-model="formData.hospitalId" :localdata="DeptList" @change="changeDept"
						:clear="false">
					</uni-data-select> -->
			</u-form-item>
			<view class="">
				<u-form-item label="预约项目" labelWidth="80">
					<view class="" @click="appointitem" v-if="formData.hospitalId==''">
						<!-- 111 -->
						<uni-data-select v-model="formData.projectId" :localdata="ProList" @change="changePro"
							:clear="false" disabled>
						</uni-data-select>
					</view>
					<view class="" @click="appointitem" v-else>
						<uni-data-select v-model="formData.projectId" :localdata="ProList" @change="changePro"
							:clear="false">
						</uni-data-select>
						<!-- 111 -->
					</view>
				</u-form-item>
			</view>

			<u-form-item label="预约时间" labelWidth="80">
				<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
			</u-form-item>
		</u-form>
		<!-- <view style="display: flex;justify-content: center;margin-top: 80rpx;"><uni-data-checkbox multiple v-model="test" :localdata="test1"></uni-data-checkbox></view> -->
		<view style="height: 180rpx;"></view>
		<view class="btn">
			<u-button type="success" text="提交预约信息" @click="process()">提交预约信息</u-button>
		</view>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		11
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		screenOrder,
		getDeptList,
		getProlist
	} from '@/api/pagesB/screenOrder/index.js'
	import {
		getSex,
		getBirthday,
		getAgeFun
	} from '@/api/conversion.js'
	export default {
		data() {
			return {
				hidden: false,
				showSex: false,
				userInfo: {},
				datetimerange: [Date.now(), this.todayEndTime()],
				test: ['1'],
				formData: {
					patientName: '',
					identity: '',
					certType: '',
					sex: '',
					birthDate: '',
					phone: '',
					address: '',
					disease: '',
					height: '',
					weight: '',
					applyStartTime: '',
					applyEndTime: '',
					hospitalId: '',
					hospitalName: '',
					projectId: '',
					projectName: ''
				},
				actions: [{
						name: '男',
						disabled: true
					},
					{
						name: '女',
						disabled: true
					},
				],
				disease: [{
						text: '高血压',
						value: '1'
					},
					{
						text: '高血糖',
						value: '2'
					},
					{
						text: '高血脂',
						value: '3'
					},
					{
						text: '无',
						value: '0'
					}
				],
				DeptList: [],
				ProList: [],
				hospitalId: '',
				test1: [{
					text: '同意《用户服务协议》及《隐私政策》',
					value: '1'
				}],
				rules: {
					patientName: [{
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}],
					identity: [{
						required: true,
						message: '请填写身份证号',
						trigger: ['blur']
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.idCard(value);
						},
						message: '请输入正确的身份证号',
						trigger: ['blur'],
					}],
					phone: [{
						required: true,
						message: '请填写联系电话',
						trigger: ['blur']
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['blur'],
					}],
					address: [{
						required: true,
						message: '请填写家庭住址',
						trigger: ['blur', 'change']
					}],
					height: [{
						required: true,
						message: '请填写身高',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.number(value);
						},
						message: '身高格式为数字（小数）',
						trigger: ['blur'],
					}],
					weight: [{
						required: true,
						message: '请填写体重',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.number(value);
						},
						message: '体重格式为数字（小数）',
						trigger: ['blur'],
					}]
				}
			}
		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		},
		onLoad(e) {
			if (e) {
				this.userInfo = JSON.parse(e.userinfo)
				if (this.userInfo.sex == 'MALE') {
					this.userInfo.sex = '男'
				} else if (this.userInfo.sex == 'FEMALE') {
					this.userInfo.sex = '女'
				}
				this.userInfo.age = getAgeFun(this.userInfo.birthDate)
				if (this.userInfo.diseaseList.length > 0) {
					this.formData.disease = this.userInfo.diseaseList.join(',')
					console.log(this.formData.disease, '9999')

				}
			}
			this.getDeptAndPro()
		},
		watch: { //监听
			'formData.hospitalName'(e) {
				console.log(e, '858')
				this.getDeptAndPro()
			},
		},
		methods: {
			clickMask(e) {
				console.log(e, '478')
			},
			input(e) {
				if (e) {
					this.formData.hospitalName = e
					this.formData.hospitalNameId = ''

				}


			},

			confirm(e) {
				console.log(e, '89')
				this.formData.projectId = ''
				this.infolist()
				// this.formData.hospitalName = this.DeptList.find(item => item.value == e).text
				this.formData.hospitalName = e.label
				this.formData.hospitalId = e.value
			},
			appointitem(e) {
				var that = this
				if (that.formData.hospitalId == '') {
					this.$refs.uToast.show({
						title: '请先选择预约机构',
						type: 'error',
					})
				}
			},
			getDeptAndPro() {
				getDeptList(this.formData.hospitalName).then(res => {
					this.DeptList = []
					res.data.map((item) => {
						var obj = {
							label: item.hospitalName,
							value: item.id
						};
						this.DeptList.push(obj);
					})
				})

			},
			infolist() {
				getProlist({
					projectType: 1,
					status: 0,
					hospitalId: this.formData.hospitalId
				}).then(res => {
					if (res.code == 200) {
						this.ProList = res.data.map(item => {
							return {
								text: item.projectName,
								value: item.projectId
							}
						})
					}
				})
			},
			changeDept(e) {
				console.log(e, '99')
				console.log(this.formData, '9')

			},
			changePro(e) {
				this.formData.projectName = this.ProList.find(item => item.value == e).text
			},
			todayEndTime() {
				let todayYear = (new Date()).getFullYear();
				let todayMonth = (new Date()).getMonth();
				let todayDay = (new Date()).getDate();
				let todayTime = (new Date(todayYear, todayMonth, todayDay, '23', '59', '59')).getTime();
				return todayTime
			},
			changeDisease() {
				if (this.formData.diseaseList.length != 0 && this.formData.diseaseList.find(item => item != '0')) {
					this.diseaseList[3].disable = true
				}
				if (this.formData.diseaseList.length != 0 && this.formData.diseaseList.find(item => item == '0')) {
					this.diseaseList[0].disable = true
					this.diseaseList[1].disable = true
					this.diseaseList[2].disable = true
					this.formData.diseaseList = ['0']
					this.diseaseList[3].disable = false
				}
				if (this.formData.diseaseList.length == 0) {
					for (let item in this.diseaseList) {
						this.diseaseList[item].disable = false
					}
				}
			},
			changeCheckbox(e) {
				if (e.detail.value.length != 0 && e.detail.value.find(item => item != '0')) {
					this.diseaseList[3].disable = true
				}
				if (e.detail.value.length != 0 && e.detail.value.find(item => item == '0')) {
					this.diseaseList[0].disable = true
					this.diseaseList[1].disable = true
					this.diseaseList[2].disable = true
				}
				if (e.detail.value.length == 0) {
					for (let item in this.diseaseList) {
						this.diseaseList[item].disable = false
					}
				}
			},
			process() {
				if (!this.formData.hospitalId) {
					uni.showModal({
						title: '提示',
						content: '请选择预约机构',
					})
					return
				}
				if (!this.formData.projectId) {
					uni.showModal({
						title: '提示',
						content: '请选择预约项目',
					})
					return
				}
				if (!this.datetimerange[0] || !this.datetimerange[1]) {
					uni.showModal({
						title: '提示',
						content: '预约时间请填写完整！',
					})
					return
				}

				const value = uni.getStorageSync('userinfo');
				this.formData.patientId = value.id
				this.formData.identity = this.userInfo.cardNo
				this.formData.diseaseList = this.userInfo.diseaseList.map(Number)
				this.formData.applyStartTime = this.datetimerange[0]
				this.formData.applyEndTime = this.datetimerange[1]
				if (this.formData.sex == '男') {
					this.formData.sex = 'MALE'
				} else {
					this.formData.sex = 'FEMALE'
				}
				screenOrder(this.formData).then(res => {
					// this.formData.diseaseList = this.formData.diseaseList.slice(',')
					if (this.formData.sex == 'MALE') {
						this.formData.sex = '男'
					} else {
						this.formData.sex = '女'
					}
					if (res.code == 200) {
						uni.showToast({
							title: '预约成功',
							duration: 1000
						});
						setTimeout(() => {
							// uni.navigateTo({
							// url: `../screensuccess/screensuccess?registerId=${res.data.data}`
							// url: `/pageB/orderlist/orderlist?patientId=${this.formData.patientId}`
							// url: '/pageB/orderlist/orderlist'/
							// })
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					} else if (res.code == 500) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})

					}
				})
			},
			submit() {
				let that = this
				that.$refs.form1.validate(valid => {
					// console.log(111)
					if (valid) {



					}
				}).catch(errors => {
					return
				})

			},
			IdentityBlur(e) {
				this.formData.sex = getSex(e)
				this.formData.birthDate = getBirthday(e)
			}
		}
	}
</script>

<style lang="scss">
	// .uniDataSelectClass {
	// 	.uni-select__selector {
	// 		z-index: 99;
	// 	}
	// }
	::v-deep .inputBox .focusBox .inputStyle.data-v-36ae0e32 {
		height: 70rpx !important;
		// color: #006DF7;
		width: 91%;
		padding-right: 60rpx;
		border: 1px solid #C4C5C6;
	}

	::v-deep .inputBox .focusBox .inputStyle.data-v-36ae0e32 {
		color: #000 !important;
	}

	::v-deep .srollViewBox .scrollView-item.data-v-36ae0e32 {
		padding-left: 0 !important;
		color: #000 !important;
		line-height: 45rpx !important;
	}

	::v-deep .srollViewBox .scrollView.data-v-36ae0e32 {
		height: 350rpx !important;
		overflow: scroll;
	}

	::v-deep.u-form-item--left__content__label.data-v-5e7216f1 {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1;
		margin-top: -16rpx;
	}

	::v-deep.u-btn--success.data-v-3bf2dba7 {
		color: #ffffff;
		border-color: #4AC4AB;
		background-color: #4AC4AB !important;
	}

	.user_info {
		border: 1px solid #4AC4AB;
		border-radius: 10rpx;
		padding: 40rpx 30rpx;
		background: #f6f6f6;
		margin-top: 50rpx;

		.basic {
			display: flex;
			align-items: center;

			.name {
				font-size: 42rpx;
				margin-right: 30rpx;
				font-weight: 900;
			}
		}

		.illness {
			display: flex;
			margin-top: 25rpx;

			view {
				width: 60px;
				font-size: 14px;
				background-color: #4AC4AB;
				text-align: center;
				color: #fff;
				padding: 8rpx 6rpx;
				border-radius: 20px;
				margin-right: 10px;
			}
		}
	}

	.line {
		height: 2rpx;
		border-bottom: 1px dashed #999;
		margin: 40rpx -40rpx;
	}

	.title {
		display: flex;
		font-size: 34rpx;
		margin-bottom: 20rpx;

		// color: #555;
		// background: #f6f6f6;
		// margin: 0 -40rpx 0 -40rpx;
		// padding: 20rpx 0;
		view {
			width: 10rpx;
			background: #4AC4AB;
			height: 40rpx;
			margin: 0 15rpx 0 0;
		}
	}

	.screenorder {
		padding: 0 40rpx;
	}

	/deep/.u-button--primary.data-v-2bf0e569 {
		background-color: #4AC4AB !important;
		border-color: #4AC4AB !important;
	}

	.btn {
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		position: fixed;
		bottom: 50rpx;
		width: 90%;
		z-index: 2;

		/deep/.u-button {
			height: 90rpx !important;
		}
	}

	/deep/.u-button__text {
		font-size: 34rpx !important;
	}
</style>