<template>
	<view class="ctime_main">
		<view class="top">
			<view v-if="orderInfo" style="display: flex;justify-content: space-between;">
				<view style="font-size: 26rpx; color: #666;">体检医生 - <span v-if="doctor_name"
						style="font-size: 28rpx;font-weight: 700;"> {{doctor_name}}</span></view>
				<view style="font-size: 26rpx; color: #333;font-weight: 700;" @click="selectDoctor()">重新选择 </view>
			</view>
		</view>
		<view class="zhouli">
			<WeeklyCalendar v-if="weekList" :dataInfo="weekList" :selectedTime="selectedTime" :NmrDTime="nmr_date+' '+nmr_time" :TjDTime="tj_date+' '+tj_time" :TjType="itemSelected"
				@selectDate="selectDateFunc" @selectTime="selectTimeFunc" @openMonth="openMonthFunc" />
		</view>
		<view class="dateitem" v-if="orderInfo">
			<view
				style="background-color: #f7f7f7; padding: 20rpx; font-size: 30rpx; border-radius: 20rpx;color: #333;">
				<view>{{orderInfo.name}}</view>
				<view
					style="background-color: #f1f1f1;padding: 20rpx 10rpx; margin-top: 10rpx;border-radius: 14rpx;font-size: 28rpx;color: #666;">
					<view @click="itemClick('nmr')"
						v-if=" orderInfo.buy_info.nmr_list && orderInfo.buy_info.nmr_list.length>0"
						style="padding: 20rpx;" :class="itemSelected=='nmr'?'itemSelected':''">
						<view v-for="(item1,index1) in orderInfo.buy_info.nmr_list">
							{{item1.name}} <span v-if="nmr_date && nmr_time">{{nmr_date}} {{nmr_time}}</span>
						</view>
					</view>
					<view @click="itemClick('tj')" style="margin-top: 10rpx;padding: 20rpx;color: #666;"
						:class="itemSelected=='tj'?'itemSelected':''">体检日期 <span v-if="tj_date && tj_time">{{tj_date}}
							{{tj_time}}</span></view>
				</view>

			</view>
		</view>
		<view class="pb-100rpx">
			<view @click="StartYuYue()"
				class="text-#fff text-32rpx rounded-45rpx bg-#239EA3 mt-40rpx ma w-520rpx h-90rpx flex flex-items-center flex-justify-center">
				确定
			</view>
		</view>
		<view  id="ylrl">
			<uni-calendar :insert="false" :showMonth="false" ref="DoctorMonthCalendar" @confirm="DoctMonthConfirm" />
			<uni-calendar :selected="MonthList"  @monthSwitch="monthSwitch" :insert="false"
				:showMonth="false" ref="MonthCalendar" @confirm="MonthConfirm" />
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		$image,
		$api,
		$response
	} from "@/api";
	import {
		useStore
	} from "@/store";
	const $store = useStore();
	import {
		onShow,onLoad
	} from "@dcloudio/uni-app";
	import WeeklyCalendar from '@/common/WeeklyCalendar.vue';
	let nmr_date = ref(null);
	let nmr_time = ref(null);
	let nmr_plan_id = ref(null); //核磁号源id

	let tj_date = ref(null);
	let tj_time = ref(null);
	let tj_plan_id = ref(null); //体检号源id

	let weekList = ref(null);

	let doctor_name = ref(null);
	//查询体检号源
	const GetDayPlanListFunc = async () => {
		uni.showLoading();
		let data = {
			hospital: orderInfo.value.hospital_id,
			person_id: orderInfo.value.person_id,
			date: selectedDate.value,
			use_type: orderInfo.value.type,
			checkup_type_id: orderInfo.value.checkup_type_id,
			amount: orderInfo.value.true_price,
		}
		const response = await $api("GetDayPlanList", data);
		uni.hideLoading();
		$response(response, () => {
			weekList.value = response.data

		});
	};
	//查询核磁号源
	const NMRGetDayPlanListFunc = async () => {
		uni.showLoading();
		let data = {
			hospital: orderInfo.value.hospital_id,
			date: selectedDate.value,
		}
		const response = await $api("NMRGetDayPlanList", data);
		uni.hideLoading();
		$response(response, () => {
			weekList.value = response.data

		});
	};
	let selectedTime = ref(null);
	let orderInfo = ref(null)
	const GetOrderInfo = async () => {
		uni.showLoading();
		const response = await $api("GetOrderDetail", {
			id: OrderId.value
		});
		uni.hideLoading();
		$response(response, () => {
			orderInfo.value = response.data.info
			doctor_name.value = orderInfo.value.doctor
			//如果有核磁项目
			if (orderInfo.value.buy_info.nmr_list && orderInfo.value.buy_info.nmr_list.length > 0) {
				itemSelected.value = 'nmr'
				if(orderInfo.value.erxian_appointment_info.length>0){
					selectedTime.value = orderInfo.value.erxian_appointment_info[0].time //应该是核磁时间
					selectedDate.value = orderInfo.value.erxian_appointment_info[0].date //应该是核磁日期
					nmr_date.value =  orderInfo.value.erxian_appointment_info[0].date 
					nmr_time.value = orderInfo.value.erxian_appointment_info[0].time
				}
				

				NMRGetDayPlanListFunc()
			} else {
				itemSelected.value = 'tj'
				selectedTime.value = orderInfo.value.appointment_time
				selectedDate.value = orderInfo.value.appointment_date

				GetDayPlanListFunc()
			}
			
			tj_date.value = orderInfo.value.appointment_date
			tj_time.value = orderInfo.value.appointment_time
		});
	}

	//weekly子组件点击了日期
	let selectedDate = ref(null);
	const selectDateFunc = (date) => {
		selectedDate.value = date
		selectedTime.value = null
		if (itemSelected.value == 'nmr') {
			nmr_time.value = null
			nmr_date.value = date

			tj_time.value = null //如果切换核磁日期则清空体检选择的日期时间
			tj_date.value = null
			doctor_name.value = null //清空体检医生
			NMRGetDayPlanListFunc()
		}
		if (itemSelected.value == 'tj') {
			tj_time.value = null
			tj_date.value = date
			doctor_name.value = null //清空体检医生
			GetDayPlanListFunc();
		}

	}
	//weekly子组件点击了时间
	let SelectedPlanId = ref(null)
	const selectTimeFunc = (timeinfo) => {
		selectedTime.value = timeinfo.time
		SelectedPlanId.value = timeinfo.id
		if (itemSelected.value == 'nmr') {
			nmr_time.value = timeinfo.time
			nmr_plan_id.value = timeinfo.id
		}
		if (itemSelected.value == 'tj') {
			tj_time.value = timeinfo.time
			tj_plan_id.value = timeinfo.id
		}
	}
	let itemSelected = ref(null);
	const itemClick = (type) => {
		//weekList.value=null

		if (type == 'nmr') {
			selectedTime.value = nmr_time.value
			selectedDate.value = nmr_date.value
			NMRGetDayPlanListFunc()
		}
		if (type == 'tj') {
			if (orderInfo.value.buy_info.nmr_list && orderInfo.value.buy_info.nmr_list.length > 0) {
				if (nmr_time.value == null || nmr_date.value == null) {
					uni.$lu.toast("请先预约为影像科项目选择时间");
					return false
				}
			}
			if (tj_date.value == null) {
				tj_date.value = nmr_date.value
			}
			selectedTime.value = tj_time.value
			selectedDate.value = tj_date.value
			GetDayPlanListFunc()
		}
		itemSelected.value = type
	}
	
	let DoctorMonthCalendar = ref(null)
	const selectDoctor = () => {
		if (orderInfo.value.buy_info.nmr_list && orderInfo.value.buy_info.nmr_list.length > 0) {
			if (nmr_time.value == null || nmr_date.value == null) {
				uni.$lu.toast("请先预约为影像科项目选择时间");
				return false
			}
		}
		if (tj_date.value == null) { //如果没有选定体检日期，则打开日历
			DoctorMonthCalendar.value.open();
		} else {
			uni.navigateTo({
				url: `/pages/main/selectDoctor/selectDoctor?date=${tj_date.value}`,
			});
		}

	}
	//点击医生月历日期后跳转
	const DoctMonthConfirm = (e) => {
		tj_date.value = e.year + "-" + e.month + "-" + e.date
		uni.navigateTo({
			url: `/pages/main/selectDoctor/selectDoctor?date=${tj_date.value}`,
		});
	}
	let MonthCalendar = ref(null)
	let MonthList = ref([]); //月历号源数据
	let currentDate = ref(null); //月历当前日期
	const monthSwitch = (e) => { //月历切换月份
		let ym=e.year+""+"-"+e.month+""
		if (itemSelected.value == 'nmr') {
			NMRGetMonthPlanListFunc(ym)
		}
		if (itemSelected.value == 'tj') {
			GetMonthPlanListFunc(ym)
		}
	}
	const MonthConfirm = (e) => { //月历确认日期
      console.log(e.fulldate)
	  selectedDate.value=e.fulldate
	  selectedTime.value = null
	  if (itemSelected.value == 'nmr') {
		  nmr_time.value = null
		  nmr_date.value = e.fulldate
		  
		  tj_time.value = null //如果切换核磁日期则清空体检选择的日期时间
		  tj_date.value = null
		  doctor_name.value = null //清空体检医生
	  	NMRGetDayPlanListFunc()
	  }
	  if (itemSelected.value == 'tj') {
		  tj_time.value = null
		  tj_date.value = e.fulldate
		  doctor_name.value = null //清空体检医生
	  	GetDayPlanListFunc()
	  }
	}
	//获取体检每月号源数量
	const GetMonthPlanListFunc = async (ym='') => {
		uni.showLoading();
		let data = {
			hospital: orderInfo.value.hospital_id,
			person_id: orderInfo.value.person_id,
			month: ym?ym:tj_date.value.substring(0, 7),
			use_type: orderInfo.value.type,
			checkup_type_id: orderInfo.value.checkup_type_id,
			amount: orderInfo.value.true_price,
		}
		const response = await $api("GetMonthPlanCount", data);
		uni.hideLoading();
		$response(response, () => {
			let rlArr = [];
			response.data.list.forEach((item) => {
				let o = {
					date: item.date,
					info: "余号" + item.count,
				};
				rlArr.push(o);
			});
			MonthList.value = rlArr;
			 //MonthCalendar.value.open()
		});
	};
	//获取核磁每月号源数量
	const NMRGetMonthPlanListFunc = async (ym='') => {
		uni.showLoading();
		let data = {
			hospital: orderInfo.value.hospital_id,
			month: ym?ym:nmr_date.value.substring(0, 7),
		}
		const response = await $api("NMRGetMonthPlanCount", data);
		uni.hideLoading();
		$response(response, () => {
			let rlArr = [];
			response.data.list.forEach((item) => {
				let o = {
					date: item.date,
					info: "余号" + item.count,
				};
				rlArr.push(o);
			});
			MonthList.value = rlArr;
			//MonthCalendar.value.open()
		});
	};
	//打开月历
	const openMonthFunc = async() => {
		if (itemSelected.value == 'nmr') {
		  await	NMRGetMonthPlanListFunc()
		}
		if (itemSelected.value == 'tj') {
			await GetMonthPlanListFunc()
		}
		MonthCalendar.value.open()
	}
	//点击提交
	const StartYuYue = async() => {
		if(tj_time.value==null){
			uni.$lu.toast("请选择体检日期");
			return false
		}
		console.log(tj_plan_id.value);
		uni.showLoading();
		let data = {
			orderid: orderInfo.value.id,
			planid: tj_plan_id.value,
			nmrPlanid:nmr_plan_id.value,
			doctor: doctor_name.value
		}
		const response = await $api("ChangeAppointment", data);
		uni.hideLoading();
		$response(response, () => {
			 if(response.status){
				 uni.showToast({
				 	title: '改约完成'
				 });
				 setTimeout(()=>{
					 uni.redirectTo({
					 	url:'/pages/main/order/order'
					 })
				 },1000)
				 
			 }
		});
	}

	let temp = null
	onMounted(() => {
		//清空一下缓存的医生，防止出问题
		temp = $store.getYytjInfo()
		temp.doctor_name = ""
		$store.setYytjInfo(temp)

		GetOrderInfo()
	});
	let OrderId=ref(0)
	onLoad((e)=>{
		OrderId.value=e.id
	})
	onShow(() => {
   
		temp = $store.getYytjInfo()
		if (temp.doctor_name != null && temp.doctor_name != '') {
			doctor_name.value = temp.doctor_name
		}

	})
</script>

<style scoped lang="scss">
	.ctime_main {
		padding: 20rpx;
	}

	.top {
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
	}

	.zhouli {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.itemSelected {
		background-color: #e0fafa;
		border-radius: 10rpx;

	}

	.dateitem {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}
	
	::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: 26rpx;
	  }
	  .uni-calendar-item__weeks-lunar-text {
	    font-size: 16rpx;
	  }
	
	  .uni-calendar-item__weeks-box-item {
	    width: 100%;
	  }
	  .uni-calendar__backtoday {
	    display: none;
	  }
	}
</style>