<script setup>
	import DraggableButton from "@/pages/components/goHome.vue";
	import TabBar from "@/common/TabBar.vue";
	/**
	 * name：
	 * user：selectDoctor
	 * date：2024年9月24日 16:24:50
	 */
	import {
		ref
	} from "vue";
	import {
		$api,
		$response,
		$image
	} from "@/api";
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		useStore
	} from "@/store";
	const $store = useStore();
	let currentDate=ref("");
	let dqDate = ref("");
	let yytjInfo = ref({}); // 预约信息
	let user_person = ref({});
	let zhou_firstday = ref('');
	const $props = defineProps({
		date: {
			type: String,
			default: "",
		},
		person: {
			type: String,
			default: "",
		},
		month: {
			type: String,
			default: "",
		},
	});

	const mountedAction = () => {
		uni.showLoading({
			title: "加载中",
		});
		user_person.value = $store.getUser();
		yytjInfo.value = $store.getYytjInfo();
		yytjInfo.value = {
			doctor_date: "",
			doctor_name: "",
			doctor_id: "",
			nmrIndex: -1,
			...yytjInfo.value,
		}
		dqDate.value = $props.date ? $props.date : "";
		if (dqDate.value || $props.month) {
			getdoctorList(); // 获取医生列表
		}
	};
	const doctor_list = ref(false);
	const week7 = ref([])
	const getdoctorList = async () => {
		let c_type = $store.getCheckupTypeId()
		// 获取 体检报告列表
		let obj = {
			hospital: $store.save.hospital,
			date: dqDate.value,
			month: $props.month,
			person_id: $props.person?$props.person: user_person.value.person_id,
			checkup_type: c_type.id,
			zhou_firstday: zhou_firstday.value
		};
		uni.showLoading({
			title: "加载中",
		});
		const response = await $api("DoctorGetList", obj);
		$response(response, () => {
			console.log(response, "response");
			doctor_list.value = response.data.list;
			week7.value = response.data.week7
			uni.hideLoading();
		});
	};
	const RiLiGetDoctorPaiBan=ref([]);
	const RiLiGetDoctorPaiBanFuc=async()=>{
		return false;
		let c_type = $store.getCheckupTypeId()
		// 获取 体检报告列表
		let obj = {
			hospital: $store.save.hospital,
			date: "",
			month: nowMonth.value,
			person_id: user_person.value.person_id,
			checkup_type: c_type.id,
			zhou_firstday: zhou_firstday.value
		};
		uni.showLoading({
			title: "加载中",
		});
		const response = await $api("DoctorGetList", obj);
		$response(response, () => {
			 
		RiLiGetDoctorPaiBan=res.data.
			uni.hideLoading();
		});
	}
	const config_ref = ref(null);
	const configRef = (e) => {
		if (!config_ref.value) {
			config_ref.value = e;
			mountedAction();
		}
	};
	const clickDoctor = (item) => {
		if(yytjInfo.value.nmr_list != null && yytjInfo.value.nmr_list.length>0 && yytjInfo.value.nmr_list[0].time !="" && yytjInfo.value.nmr_list[0].time.substring(0,10) !=  selectedDate.value && selectedDate.value!='' &&selectedDate.value!=null){
			console.log('日期不一致');
			uni.showModal({
				title: "提示",
				content: "已选择体检日期，切换日期需要重新选择体检号源，是否继续",
				showCancel: true,
				success: ({
					confirm
				}) => {
					if (confirm) {
						 console.log(yytjInfo.value.nmr_list[0].time.substring(0,7));
						 console.log( selectedDate.value);
						 //return false;
						 yytjInfo.value.doctor_date = selectedDate.value;
						 yytjInfo.value.nmr_list[0].time = "";
						 yytjInfo.value.nmr_list[0].id = "";
						 $store.setYytjInfo(yytjInfo.value);
						 
						 yytjInfo.value.doctor_name = item.name;
						 yytjInfo.value.doctor_id = item.id;
						 yytjInfo.value.nmrIndex = -1;
						 $store.setYytjInfo(yytjInfo.value);
						 if ($props.month == 'all') {
						 	let riqiurl=''
						 	if(dqDate.value){
						 		riqiurl='?date='+dqDate.value;
						 	}
						 	uni.navigateTo({
						 		url: '/pages/main/ysdate/ysdate_new'+riqiurl
						 	})
						 } else {
						 	// 关闭当前页面携带医生名称返回上一个，，并且携带item.name
						 	uni.navigateBack({
						 		delta: 1,
						 	});
						 }
					} 
				},
			});
			return;
		}
	    yytjInfo.value.doctor_date= selectedDate.value
		yytjInfo.value.doctor_name = item.name;
		yytjInfo.value.doctor_id = item.id;
		yytjInfo.value.nmrIndex = -1;
		$store.setYytjInfo(yytjInfo.value);
		if ($props.month == 'all') {
			let riqiurl=''
			if(dqDate.value){
				riqiurl='?date='+dqDate.value;
			}
			uni.navigateTo({
				url: '/pages/main/ysdate/ysdate_new'+riqiurl
			})
		} else {
			// 关闭当前页面携带医生名称返回上一个，，并且携带item.name
			uni.navigateBack({
				delta: 1,
			});
		}

	};
	let selectedDate = ref("");
	const selectDateFunc = (date) => {
		selectedDate.value = date
		dqDate.value = date
		getdoctorList()
	}
	let YueLiRef = ref(null);
	let nowMonth = ref('');
	//点击打开日历
	const ClickMore = async () => {
		YueLiRef.value.open()
		RiLiGetDoctorPaiBanFuc()
	}
	const getToday = () => {
		var today = new Date();
		var year = today.getFullYear();
		var month = (today.getMonth() + 1).toString().padStart(2, "0");
		var day = today.getDate().toString().padStart(2, "0");
		return year + "-" + month + "-" + day;
	};
	zhou_firstday.value = getToday()
	nowMonth.value=zhou_firstday.value.substring(0,7)
	let MonthList = ref([]);
	const moreTime = async (m, status) => {
		const [year, month, day] = currentDate.value.split("-");
		let dqmonth = m || `${year}-${month}`; //年 月份
		let obj = {};
		let methods = "";
		getdoctorList(`${year}-${month}`)
		calendarShow.value = true;
	};

	const monthSwitch = (givenDate) => {
		const currentYear = new Date().getFullYear();
		const currentMonth = new Date().getMonth() + 1;
		// 获取当前日期
		if (
			givenDate.year < currentYear ||
			(givenDate.year === currentYear && givenDate.month < currentMonth)
		) {
			// uni.$lu.toast("不能选择过去时间");
			return false;
		} else {
			let str = `${givenDate.year}-${givenDate.month}`;
			nowMonth.value=str
			//moreTime(str, 0);
			RiLiGetDoctorPaiBanFuc()
		}
	};
	//日历点击日期
	const RiLiDateFunc = (e) => {
		console.log(e)
		dqDate.value = e.fulldate
		zhou_firstday.value = e.fulldate
		selectedDate.value=e.fulldate
		getdoctorList()
	}
	onShow(() => {
		zhou_firstday.value = $props.date ? $props.date : "";
		selectedDate.value = $props.date ? $props.date : ""
		dqDate.value = $props.date ? $props.date : ""
		currentDate.value=selectedDate.value
		console.log($props.month);
		if (!!config_ref.value) {
			mountedAction();
		}
	});
</script>
<template>
	<TabBar />
	<view>
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>
		<view class="pb-40rpx">
			<view class="h-38rpx  pl-20rpx pr-20rpx box-border">
				<view style="height: 20rpx;"></view>
				<view style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04)"
					class="pb-80rpx pt-30rpx rounded-15rpx bg-#fff">
					<view class="zhou" v-if="week7.length>1">
						<view class="day" v-for="(item,index) in week7">
							<view :class="item.date==selectedDate?'day_top selected':'day_top'"
								@click="selectDateFunc(item.date)">
								<view>{{item.date.split('-').slice(1).join('/')}}</view>
								<view class="zhou_title">{{ item.xingqi.replace('星期', '周').replace('日', '天')}}</view>
							</view>
						</view>
						<view class="xian_k">
							<view class="xian"></view>
						</view>
						<view class="rili_icon" @click="ClickMore()">
							<uni-icons type="calendar" style="font-size: 50rpx;" color="#239EA3"></uni-icons>
							<text>更多</text>
						</view>
					</view>
					<view v-if="doctor_list.length>0">
						<view v-for="(item, index) in doctor_list" :key="index" class="p-10rpx">
							<view class="flex flex-row text-#8B8B8B text-23rpx">
								<image :src="$image(item.head_img)" class="w-170rpx h-226rpx mr-20rpx"></image>
								<view class="flex-1 flex flex-col flex-justify-start pr-20rpx">
									<view class="text-#0E0E0E text-36rpx">
										{{ item.name }}
										<span class="text-26rpx text-#515151 ml-10rpx">{{
			          item.level
			        }}</span>
									</view>
									<view class="mt-33rpx mb-10rpx line-clamp-1">
										<text v-if=" item.time" >{{ item.hospital }}:</text>
										<text v-if=" item.time" >{{ item.time }}</text>
									</view>
									<view class="line-clamp-2">
										{{ item.desc }}
									</view>
									<view @click="clickDoctor(item)"
										class="ml-a mt-25rpx w-190rpx h-55rpx bg-#239EA3 rounded-33rpx text-#fff text-21rpx flex flex-justify-center items-center">
										预约此医生
									</view>
								</view>
							</view>
							<view class="w-100% h-1rpx bg-#E6E9E9 mt-15rpx"> </view>
						</view>
					</view>
					<view v-else>
						<view v-if="doctor_list!==false"
							style="font-size: 26rpx; text-align: center;color: #ccc;padding-top: 40rpx;">当前日期暂无医生</view>
					</view>

				</view>
			</view>
		</view>
		<uni-calendar class="ylrl" ref="YueLiRef" :selected="MonthList" :startDate="getToday()" :insert="false"
		:date="currentDate"	@confirm="RiLiDateFunc" @monthSwitch="monthSwitch" />
	</view>
</template>
<style scoped>
	.zhou {
		display: flex;
		justify-content: space-between;
		padding: 0rpx 20rpx 20rpx 20rpx;
	}

	.day {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 25rpx;
		font-weight: 500;
		color: #636363;
	}

	.day_top {
		font-size: 24rpx;
		font-weight: 500;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 10rpx;
		padding: 10rpx;
		border-radius: 16rpx;
	}

	.selected {
		background-color: #239EA3;
		color: #fff !important;
	}

	.zhou_title {
		font-size: 28rpx;
		font-weight: 500;
		margin-top: 6rpx;
	}

	.yu {
		background-color: #EFEFEF;
		margin-top: 8rpx;
		border-radius: 10rpx;
		padding: 2rpx 8rpx;
		font-size: 22rpx;
	}

	.xian_k {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.xian {

		height: 70rpx;
		border-left: 1px solid #d8d8d8;
	}

	.rili_icon {
		font-size: 24rpx;
		font-weight: 500;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #239EA3;
		font-weight: 500;
	}
</style>
<style lang="scss">
	::v-deep .ylrl {
	
		.uni-calendar__header,
		.uni-calendar__weeks-day {
			border: none;
		}
	
		.uni-calendar-item--checked {
			background-color: transparent;
	
			.uni-calendar-item__weeks-box-item {
				background-color: #239ea3 !important;
				border-radius: 12rpx;
	
				.uni-calendar-item--extra {
					color: #fff !important;
				}
			}
		}
	
		.uni-calendar-item--isDay {
			background-color: #239ea3 !important;
			border-radius: 12rpx;
			color: #fff !important;
		}
	
		.uni-calendar-item--extra {
			color: #239ea3;
		}
	
		.uni-calendar-item__weeks-box {
			// padding: 10rpx;
			box-sizing: border-box;
		}
	 
		.uni-calendar-item__weeks-box-circle {
			background-color: rgba(0, 0, 0, 0);
		}
	
		.uni-calendar-item--isDay-text {
			color: #333;
			 
		}
		 
		.uni-calendar-item__weeks-box-text {
			font-size: 29rpx;
			 
		}
	 
		.uni-calendar-item__weeks-lunar-text {
			font-size: 30rpx;
		}
	
		.uni-calendar-item__weeks-box-item {
			width: 100%;
		}
	
		.uni-calendar__backtoday {
			display: none;
		}
	
		.uni-calendar-item--disable {
			.uni-calendar-item__weeks-lunar-text {
				display: none;
			}
		}
		 
	}
</style>