<template>
	<view class="container">
		<up-navbar class="u-navbar-box" title="护理申请" auto-back placeholder bgColor="transparent"
			:title-style="{fontWeight:'bold'}">
		</up-navbar>
		<scroll-view scroll-y class="flex-column flex-1" style="overflow: hidden;background-color: #F6F8FD;">
			<view class="p-32 flex-column" style="width: 686rpx;">
				<view class="w-100p flex-column">
					<view class="flex-row align-center">
						<view style="width: 6rpx;height: 32rpx;background-color: #39A1FF;border-radius: 4rpx;"></view>
						<text class="font-xmd text-black3" style="margin-left: 14rpx;">申请人信息</text>
					</view>
					<view class="flex-column py-4 px-24 mt-24"
						style="background: linear-gradient( 180deg, #E8F4FF 0%, #FFFFFF 100%);border-radius: 16rpx;">
						<view class="flex-row align-center justify-between">
							<text class="font text-black2">姓名</text>
							<text class="font text-black2" @click="goChoosePeople">{{formData.name}}</text>
						</view>
						<view class="flex-row align-center justify-between mt-4">
							<text class="font text-black2">护理需求</text>
							<view style="width: 440rpx;">
								<up-input placeholder="请输入护理需求" border="none" v-model.trim="formData.demand" clearable
									:maxlength="50" inputAlign="right"></up-input>
							</view>
						</view>
						<view class="flex-row align-center justify-between mt-4">
							<text class="font text-black2">首选护理人员性别</text>
							<text class="font text-black2" @click="chooseGender">{{formData.sex === '1'?'女':'男'}}</text>
						</view>
						<view class="flex-row align-center justify-between mt-4">
							<text class="font text-black2">所在医院</text>
							<text class="font text-black2" @click="goChooseHospital">{{formData.hospital}}</text>
						</view>
						<view class="flex-row align-center justify-between mt-4">
							<text class="font text-black2">详细地址</text>
							<view style="width: 440rpx;">
								<u-input placeholder="请输入具体科室/楼层/房间/床号" border="none" v-model.trim="formData.address"
									clearable :maxlength="50" inputAlign="right"></u-input>
							</view>
						</view>
						<view class="flex-row align-center justify-between mt-4">
							<text class="font text-black2">预计天数</text>
							<view style="width: 440rpx;">
								<u-input placeholder="请输入预计天数" border="none" type="number"
									v-model.trim="formData.dayCount" clearable :maxlength="5"
									inputAlign="right"></u-input>
							</view>
						</view>
						<view class="flex-row align-center justify-between mt-4">
							<text class="font text-black2">备注</text>
							<view style="width: 440rpx;">
								<u-input placeholder="请输入备注" border="none" v-model.trim="formData.remark" clearable
									:maxlength="100" inputAlign="right"></u-input>
							</view>
						</view>
					</view>
				</view>

				<view class="w-100p flex-row align-center justify-center mt-4"
					style="background-color: #39A1FF;height: 88rpx;border-radius: 50rpx;" @click="handleSubmit">
					<text class="font-md text-white">确认提交</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		applyUrl,
		applyModifyUrl
	} from '@/common/config/api.js';
	import {
		getCareInfo
	} from '@/common/config/application-api.js'
	export default {
		data() {
			return {
				formId: '',
				formData: {
					personId: '',
					name: '请选择申请人',
					demand: '',
					sex: '0',
					hospital: '请选择所在医院',
					address: '',
					dayCount: '',
					remark: ''
				}
			}
		},
		onLoad(options) {

			if (options.id) {
				this.formId = options.id;
				this.getApplyInfo();
			} else {
				this.formId = '';
			}

			// 监听器
			uni.$on('personChoose', (e) => {
				console.log(e);
				this.formData.personId = e.id;
				this.formData.name = e.name;
			});

			uni.$on('hospitalChoose', (e) => {
				console.log(e);
				this.formData.hospital = e.name;
			})
		},
		onUnload() {
			uni.$off('personChoose');
			uni.$off('hospitalChoose');
		},
		methods: {
			getApplyInfo() {
				getCareInfo({
						id: this.formId
					})
					.then(res => {
						console.log('申请详情', res);
						this.formData = {
							personId: res.personId,
							name: res.personName,
							demand: res.careNeeds,
							sex: res.nurseGender,
							hospital: res.hospital,
							address: res.address,
							dayCount: res.careDays,
							remark: res.remark
						}
					})
					.catch(err => {
						console.log('申请详情Err', err);
					})
			},
			goChooseHospital() {
				uni.navigateTo({
					url: '/pages/subpack/pages/choose-hospital/choose-hospital'
				})
			},
			goChoosePeople() {
				uni.navigateTo({
					url: '/pages/subpack/pages/choose-people/choose-people'
				})
			},
			chooseGender() {
				uni.showActionSheet({
					title: '首选护理人员性别',
					itemList: ['男', '女'],
					success: (res) => {
						// console.log('选择了第' + (res.tapIndex) + '个选项');
						this.formData.sex = res.tapIndex + '';
					},
					fail: (err) => {
						console.log('弹窗取消');
					}
				});
			},

			apply() {
				uni.showLoading();
				let params = {};
				if (this.formId) {
					params = {
						applyId: this.formId,
						address: this.formData.address,
						applyDate: dayjs().format('YYYY-MM-DD'),
						careDays: this.formData.dayCount,
						careNeeds: this.formData.demand,
						hospital: this.formData.hospital,
						nurseGender: this.formData.sex,
						personId: this.formData.personId,
						personName: this.formData.name,
						remark: this.formData.remark
					}
					applyModifyUrl(params)
						.then(res => {
							uni.hideLoading();
							uni.showModal({
								title: '提示',
								content: `提交成功`,
								showCancel: false,
								confirmText: '返回',
								success: (e) => {
									if (e.confirm) {
										uni.navigateBack()
									}
								}
							})
						})
						.catch(err => {
							uni.hideLoading();
							console.log(err);
						})

				} else {
					params = {
						address: this.formData.address,
						applyDate: dayjs().format('YYYY-MM-DD'),
						careDays: this.formData.dayCount,
						careNeeds: this.formData.demand,
						hospital: this.formData.hospital,
						nurseGender: this.formData.sex,
						personId: this.formData.personId,
						personName: this.formData.name,
						remark: this.formData.remark
					}
					applyUrl(params)
						.then(res => {
							uni.hideLoading();
							uni.showModal({
								title: '提示',
								content: `提交成功`,
								showCancel: false,
								confirmText: '返回',
								success: (e) => {
									if (e.confirm) {
										uni.navigateBack()
									}
								}
							})
						})
						.catch(err => {
							uni.hideLoading();
							console.log(err);
						})
				}

			},

			handleSubmit() {
				if (this.formData.name === '请选择申请人' || !this.formData.name) {
					return uni.$u.toast('请选择申请人')
				}

				if (!this.formData.demand) {
					return uni.$u.toast('请输入护理需求')
				}

				if (this.formData.hospital === '请选择所在医院' || !this.formData.hospital) {
					return uni.$u.toast('请选择所在医院')
				}

				if (!this.formData.address) {
					return uni.$u.toast('请输入详情地址')
				}

				if (!this.formData.dayCount) {
					return uni.$u.toast('请输入预计天数')
				}

				uni.showModal({
					title: '提示',
					content: `确定提交此次申请吗?`,
					showCancel: true,
					success: (e) => {
						if (e.confirm) {
							this.apply();
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		// background-image: url('@/static/images/index-bg.png');
		// background-size: cover;
		// background-position: center;
		display: flex;
		flex-direction: column;
	}

	.u-navbar-box {
		background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
	}
</style>