<template>
	<view class="main">
		<view class="top">
			<view class="nameBox">
				<view class="name">{{param.patientName||'暂无绑定就诊人'}}</view>
				<text class="icon arrow" style="margin-left: 10px;">&#xeb73;</text>
				<view class="change" @click="showChange = true">切换就诊人</view>
			</view>
			<view class="cardNum">{{param.patientId||''}}</view>
			<view style="display: flex;text-align: center;margin: 5px;padding: 13px;font-size: 13px;"
				@click="calendar = true">
				<input placeholder="点击选择时间" :disabled="true" v-model="startTime" type="select" />
				<view>至</view>
				<input placeholder="点击选择时间" :disabled="true" v-model="endTime" type="select" />
			</view>

		</view>

		<view class="tab">
			<u-tabs :list="tab" :current="current" keyName="label" @click="click"></u-tabs>
		</view>
		<view class="content">
			<view class="list">
				<view class="item" v-for="(item, index) in list" @click="go(`/pages/visit/detail?id=${item.id}&patientName=${param.patientName}&patientId=${param.patientId}`)">
					<view class="title omit">{{ item.department }}</view>
					<view class="time">{{ item.admissionTime }}</view>
				</view>
			</view>
			<view class="loading" v-if="loadMore"><u-loadmore :status="loadMore ? 'loading' : 'nomore'" /></view>
			<u-empty v-if="!loadMore && list.length == 0"></u-empty>
		</view>
		<u-calendar :show="calendar" monthNum="120" mode="range" :maxDate="util.getDate()" minDate="2020-01-01"
			@confirm="confirm" @close="close()" :closeOnClickOverlay="true"></u-calendar>
		<u-popup :show="showChange" @close="closePopup" @open="openPopup" :round="10" :closeable="true">
			<view>
				<view class="userChangeTitle">请选择就诊人</view>
				<scroll-view scroll-y="true" class="scroll-Y" style="max-height: 300px;">
						<u-radio-group v-model="param.patientId" iconPlacement="left" placement="column">
							<u-radio v-for="(item,index) in userList" :name="item.patientId"  @change="groupChange(item)"
								:customStyle="{ backgroundColor: '#F8F8F8', margin:'5px 20px',borderRadius: '10px',padding: '10px'}">
								<view class="userChangeItem" @click="groupChange(item)">
									<view class="userChangeItemName">{{ item.patientName }}</view>
									<view class="userChangeCartNo">{{ item.patientId }}</view>
								</view>
							</u-radio>
						</u-radio-group>
				</scroll-view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userList: [],
				showChange: false,
				current: 0,
				time: null,
				tab: [{
					label: '就诊记录'
				}, ],
				startTime: null,
				endTime: null,
				list: [],
				param: {
					// pageNum: 1,
					// pageSize: 10,
					patientId:null,
					patientName:null,
				},
				loadMore: true,
				calendar: false,
				user:{},
			}
		},
		onLoad() {
			this.setDefTime()
			this.getUserList();
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				this.http.request({
					url: '/app/user/info',
					success: (res) => {
						this.user = res.data.data;
						this.param.patientId = res.data.data.patientId
						this.param.patientName = res.data.data.patientName
						this.getData();
					}
				});
			},
			groupChange(n) {
				uni.showModal({
					title: '提示',
					content: '确定切换就诊人',
					success: (res) => {
						if (res.confirm) {
							this.http.request({
								url: '/app/user/bind/change/' + n.id,
								success: (res) => {
									this.param.patientName = n.patientName
									this.param.patientId = n.patientId
									this.closePopup()
									this.refresh()
								}
							});
						}
					}
				});
			},
			getUserList() {
				this.http.request({
					url: '/app/user/bind/list',
					success: (res) => {
						this.userList = res.data.data
					}
				});
			},
			openPopup() {

			},
			closePopup() {
				this.showChange = false
			},
			setDefTime() {
				const today = new Date();
				const todayYear = today.getFullYear()
				const todayMonth = (today.getMonth() + 1) < 10 ? "0" + (today.getMonth() + 1) : (today.getMonth() + 1)
				const todayDay = today.getDate() < 10 ? "0" + today.getDate() : today.getDate()
				this.param.endTime = todayYear + todayMonth + todayDay
				this.endTime = todayYear + '-' + todayMonth + '-' + todayDay

				let beforeTime = new Date(today.getTime() - 24 * 60 * 60 * 1000 * 30);
				//一个月前
				let beforeTimeYear = beforeTime.getFullYear();
				let beforeTimeMonth = beforeTime.getMonth() + 1;
				let beforeTimeDay = beforeTime.getDate();
				beforeTimeMonth = beforeTimeMonth < 10 ? "0" + beforeTimeMonth : beforeTimeMonth;
				beforeTimeDay = beforeTimeDay < 10 ? "0" + beforeTimeDay : beforeTimeDay;
				this.param.startTime = beforeTimeYear + beforeTimeMonth + beforeTimeDay
				this.startTime = beforeTimeYear + "-" + beforeTimeMonth + "-" + beforeTimeDay

			},
			confirm(e) {
				this.calendar = false;
				this.param.startTime = e[0].replace(/-/g, '');;
				this.param.endTime = e[e.length - 1].replace(/-/g, '');;
				this.startTime = e[0]
				this.endTime = e[e.length - 1]
				this.refresh();
			},
			close() {
				this.calendar = false;
			},
			getData() {
				console.log(this.param.patientId);
				this.http.request({
					url: '/app/visit/' + this.param.patientId,
					data:this.param,
					success: (res) => {
						this.list = res.data.data
						this.loadMore = false
						//暂时没有分页
						// this.loadMore = res.data.pages > this.param.pageNum ? true : false;
						// this.list.push(...res.data.rows);
					}
				});
			},
			click(e) {
				this.current = e.index;
				this.param.type = e.dictValue;
				this.refresh();
			},
			selectTime(e) {
				console.log(e);
			},
			go(url) {
				uni.navigateTo({
					url: url
				});
			},
			//刷新数据
			refresh() {
				this.loadMore = true;
				this.param.pageNum = 1;
				this.list = [];
				this.getData();
			}
		}
	}
</script>

<style lang="scss">
	.top {
		padding: 15px;
		background-color: white;
		border-radius: 8px;

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

			.name {
				font-weight: bold;
				font-size: 16px;
			}

			.change {
				color: royalblue;
				margin-left: 20px;
			}
		}

		.cardNum {
			padding-top: 10px;
			font-size: 14px;
		}
	}

	.content {
		padding: 15px;
		background-color: white;
		border-radius: 8px;

		.list {
			.item {
				overflow: hidden;
				padding: 13px 0;
				border-bottom: 1px solid $line;
				margin-bottom: 10px;

				.title {
					font-size: 18px;
					font-weight: bold;
				}

				.time {
					font-size: 14px;
					padding-top: 15px;
					color: $font-c;
				}
			}
		}
	}

	.userChangeTitle {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 48px;
		font-weight: bold;
	}

	.userChangeItem {
		width: 100%;

		.userChangeItemName {
			padding: 5px 10px;
		}

		.userChangeCartNo {
			padding: 5px 10px;
		}
	}
</style>