<template>
	<div>
		<div class="head">
			<el-row>
			<!-- 	<el-form-item>
					<el-select :filterable="true" clearable v-model="searchInfo.department_id" placeholder="选择科室"
						style="margin-left: 8px;width: 150px;">
						<el-option v-for="(item,index) in EnableDepartmentList" :key="index"
							:label="item.department_name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select :filterable="true" clearable v-model="searchInfo.resources_id" placeholder="选择资源"
						style="margin-left: 8px;width: 150px;">
						<el-option v-for="(item,index) in enableResourceList" :key="index"
							:label="item.department_resources_name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select :filterable="true" clearable v-model="searchInfo.device_id" placeholder="选择服务组"
						style="margin-left: 8px;width: 150px;">
						<el-option v-for="(item,index) in EnableDeviceList" :key="index" :label="item.device_name"
							:value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select :filterable="true" clearable v-model="searchInfo.xingqi" placeholder="星期"
						style="margin-left: 8px;width: 150px;">
						<el-option v-for="(item,index) in xingqi" :key="index" :label="item.label"
							:value="item.label" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select :filterable="true" clearable v-model="searchInfo.status" placeholder="状态"
						style="margin-left: 8px;width: 150px;">
						<el-option label="正常" value="1" />
						<el-option label="关闭" value="0" />
					</el-select>
				</el-form-item> -->
				<el-form-item>
					<el-date-picker style="margin-left: 8px; width: 300px" v-model="searchInfo.dateRange"
						type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
						value-format="YYYY-MM-DD" />
				</el-form-item>
				<el-button @click="GetList()" style="margin-left: 10px;">搜索</el-button>
				<el-button type="danger" @click="Del()" style="margin-left: 10px;">删除</el-button>
			</el-row>
		</div>
		<div style="display: flex;" class="planInfo">
			<div style=" border-right: 1px solid #dadada;padding-right: 4px;">
				<div v-for="(item,index) in enableResourceList" :key="index" @click="zhenshiClick(item.id)"
					:class="{'zhenshiButton zhenshiButtonActive':item.id===ResourceActive,'zhenshiButton':item.id !==ResourceActive}">
					{{item.department_resources_name}}
				</div>
			</div>
			<div v-loading="loading" style="border: 1px solid #efefef;width: 100%; overflow-x: auto;">
				<div style="text-align: right; padding: 8px; font-size: 12px; color: #999;">数据格式：占位/已用/总数</div>
				<table class="planTable" v-if="planTableData.length>0">
					<tr style="background-color:  #f1f1f1;position: relative;">
						<td>
							<div style="width: 120px;display: flex;font-size: 12px;justify-content: center;align-items: center;">
								<div style="margin-left: 30px;margin-right: 6px;">全选</div>
								<div :class="{'plan_checkAllbox plan_checkAllbox_active':PlanSelectedAll===1,'plan_checkAllbox ':PlanSelectedAll===0}"
									@click="selectedAllPlanFunc()">
									<el-icon v-if="PlanSelectedAll===1" color="#ffffff"><Select /></el-icon>
								</div>
							</div>
						</td>
						<td style="min-width: 120px;font-size: 14px;" v-for="(item,index) in date_list">{{item.substring(5,10)}} {{getWeekday(item)}}</td>
					</tr>
					<tr v-for="(item,index) in planTableData" :key="index">
						<td v-for="(item2,index2) in item" :key="index2" @mouseover="showTools(item2.id)"
							@mouseleave="hideTools(item2.id)">
							<div>
								<span v-if="index2=='time_range'">{{item2}}</span>
								<div v-if="item2.countsInfo && item2.countsInfo.length>0"
									:class="{'planInfo_k':item2.status==1,'planInfo_k planInfo_k_disabled':item2.status==0}">
									<div v-if="hoverIndex==item2.id" class="hoverTools" >
										<div class="icon_k" @click="getDetail(item2.id)">
											<el-icon color="#409eff" size="20">
												<Edit />
											</el-icon>
										</div>
										<div class="icon_k" @click="GetMingXi(item2,0)">
											<el-icon color="#409eff" size="20">
												 <Document />
											</el-icon>
										</div>
										<div class="icon_k" @click="OpenZhanWeiDialog(item2)">
											<el-icon color="#409eff" size="20">
												 <Lock />
											</el-icon>
										</div>

									</div>
									<div :class="{'plan_checkbox plan_checkbox_active':isSelected(item2.id),'plan_checkbox':!isSelected(item2.id)}"
										@click="checkBoxCheckFunc(item2.id)">
										<el-icon v-if="isSelected(item2.id)" color="#ffffff"><Select /></el-icon>
									</div>
									<div class="zong_row"><div class="qudao_title_zong"><span>总数:</span>{{item2.countsInfo[0].max_total}}</div></div>
									<div class="qudao_count_row">
										<template v-for="(item3,index3) in item2.countsInfo" :key="index3">
											<div v-if="item3 && !(item3.count===0 && item3.used_count===0)">
												<span> {{item3.jiancheng}}</span><span><span v-if="item3.locked_count" class="yellow bold-text">{{item3.locked_count}}</span><span v-if="item3.locked_count">/</span><span class="font_color">{{item3.used_count}}</span>/{{item3.count}} </span>
											</div>
										</template>
									</div>
									<div class="patient_type_row">
										<div class="tps" v-for="(item3,index3) in item2.patient_type_label">
											{{item3}}
										</div>
									</div>
								</div>
							</div>
						</td>
					</tr>
				</table>
				<div v-if="planTableData.length==0" style="width: 100%;background-color: #fff;">
					<el-empty description="暂无号源" />
				</div>
			</div>
		</div>
		<!--        弹窗修改框-->
		<el-dialog v-model="PlanDetailDialogVisible" title="修改" width="40%">
			<div v-loading="loading">
				<el-form v-if="PlanDetaiInfo" label-width="100px" style="padding-right: 40px;">
					<el-form-item label="日期:">
						{{ PlanDetaiInfo.date }}
					</el-form-item>
					<el-form-item label="星期:">
						{{ PlanDetaiInfo.weekname }}
					</el-form-item>
					<el-form-item label="科室:">
						{{ PlanDetaiInfo.department_name }}
					</el-form-item>
					<el-form-item label="资源:">
						{{ PlanDetaiInfo.resources_name }}
					</el-form-item>
					<el-form-item label="服务组:">
						<el-tag v-for="(item,index) in PlanDetaiInfo.devices" :key="index"
							:type="(item.status===1 && item.is_del===0)?'':'danger'" style="margin-left: 8px">
							{{ item.device_name }}
						</el-tag>
					</el-form-item>
					<el-form-item label="病人类型:">
						<el-checkbox-group disabled v-model="PlanDetaiInfo.patientType">
							<el-checkbox label="0">住院</el-checkbox>
							<el-checkbox label="1">门诊</el-checkbox>
							<el-checkbox label="2">急诊</el-checkbox>
							<el-checkbox label="3">体检</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="时间段:">
						开始时间：<span style="font-weight: 700;display: inline-block;margin-right: 8px">{{ PlanDetaiInfo.begin_time
                        }} </span> 结束时间：<span
							style="font-weight: 700;display: inline-block;margin-right: 8px">{{ PlanDetaiInfo.end_time }}
						</span>
						停止预约时间：<span style="font-weight: 700">{{ PlanDetaiInfo.end_reservation_time }}</span>
					</el-form-item>
					<el-form-item label="渠道名额:" v-if="PlanDetaiInfo.coutsInfo">
						<div style="margin-right: 16px">
							<div>当日总量</div>
							<div class="qudao_k_input">
								<el-input @input="MaxCountChange" type="number" v-model="PlanDetaiInfo.max_total"
									:min="1" placeholder="0" oninput="value=value.replace(/^0|[^0-9]/g, '')" />
							</div>
							<div style="font-size: 12px;color: #999">设置渠道比例可自动分配</div>
						</div>
						<div>
							<div class="qudao_k" v-for="(item,index) in PlanDetaiInfo.coutsInfo" :key="index">
								<div style="width: 50px">{{ item.name }}</div>
								<div class="qudao_k_input">
									<el-input type="number" v-model="PlanDetaiInfo.coutsInfo[index].count" :min="1"
										placeholder="0" oninput="value=value.replace(/^0|[^0-9]/g, '')" />
								</div>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="状态：">
						<el-switch v-model="PlanDetaiInfo.status" size="large" active-text="正常" inactive-text="关闭"
							:active-value="1" :inactive-value="0" />
					</el-form-item>
					<el-form-item label="添加时间：">
						{{ PlanDetaiInfo.created_at }}
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="PlanDetailDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="SavePlanAction">
						确定
					</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog v-model="MingXiDialogVisible" title="预约明细" width="60%">
			<div>
				<div style="text-align: center;font-size: 16px; margin-top: -30px;margin-bottom: 10px;">
					{{selectedPlanRow.department_resources_name}}
					<span v-for="(item,index) in selectedPlanRow.devices" :key="index"
						:class="(item.status==1 && item.is_del==0) ? '':'hongzi'">{{ item.device_name }}
					</span>
				</div>
				<el-form-item label="渠道">
					<el-select :filterable="true" clearable v-model="selectecQuDaoid"
						@change="GetMingXi(selectedPlanRow,selectecQuDaoid)" placeholder="选择渠道"
						style="margin-left: 8px;width: 150px;">
						<el-option label="全部" :value="0" />
						<el-option v-for="(item1,index1) in selectedPlanRow.countsInfo" :key="index1"
							:label="item1.name" :value="item1.appointment_type_id" />
					</el-select>
				</el-form-item>
				<el-table :data="MingXiList" style="width: 100%;" row-key="id" v-loading="MingXiLoading">
					<el-table-column prop="list_status" label="状态" width="100">
						<template #default="scope">
							<el-tag v-if="scope.row.list_status===0" class="ml-2" type="info">申请中</el-tag>
							<el-tag v-if="scope.row.list_status===1" class="ml-2" type="success">已预约</el-tag>
							<el-tag v-if="scope.row.list_status===2" class="ml-2">登记</el-tag>
							<el-tag v-if="scope.row.list_status===3" class="ml-2" type="warning">完成</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="user_name" label="姓名" />
					<el-table-column prop="user_phone" label="电话" />
					<el-table-column prop="reg_num" label="登记号" />
					<el-table-column prop="reservation_department" label="申请科室" />
					<el-table-column prop="entrust" label="项目" />
					<el-table-column prop="qudao_name" label="渠道" />
				</el-table>
			</div>
		</el-dialog>
		<el-dialog v-model="ZhanWeiDialogVisible" title="占位设置" width="40%">
			<div v-loading="loading">
				<el-form v-if="ZhanWeiInfo" label-width="120px" style="padding-right: 40px;">
					<el-form-item label="日期:">
						{{ ZhanWeiInfo.date }}
					</el-form-item>
					<el-form-item label="星期:">
						{{ ZhanWeiInfo.weekname }}
					</el-form-item>
					<el-form-item label="科室:">
						{{ ZhanWeiInfo.department_name }}
					</el-form-item>
					<el-form-item label="资源:">
						{{ ZhanWeiInfo.resources_name }}
					</el-form-item>
					<el-form-item label="服务组:">
						<el-tag v-for="(item,index) in ZhanWeiInfo.devices" :key="index"
							:type="(item.status===1 && item.is_del===0)?'':'danger'" style="margin-left: 8px">
							{{ item.device_name }}
						</el-tag>
					</el-form-item>
					<el-form-item label="时间段:">
						开始时间：<span style="font-weight: 700;display: inline-block;margin-right: 8px">{{ ZhanWeiInfo.begin_time }}</span>
						结束时间：<span style="font-weight: 700">{{ ZhanWeiInfo.end_time }}</span>
					</el-form-item>
					<el-form-item label="渠道占位:">
						<div style="display: flex; flex-direction: column; gap: 10px; width: 100%;">
							<template v-if="ZhanWeiInfo.coutsInfo && ZhanWeiInfo.coutsInfo.length > 0">
								<template v-for="(item,index) in ZhanWeiInfo.coutsInfo" :key="index">
									<div v-if="item && !(item.count===0 && item.used_count===0)"
										style="display: flex; align-items: center; gap: 10px;">
										<div style="width: 80px;">{{ item.name }}</div>
										<div style="flex: 1;">
											<el-input type="number" v-model="ZhanWeiInfo.coutsInfo[index].locked_count" placeholder="占位数量" min="0"
												oninput="value=value.replace(/[^0-9]/g,'')" />
										</div>
										<div style="color: #999; font-size: 12px;">
											剩余可用: {{ item.count - item.used_count }}
										</div>
									</div>
								</template>
							</template>
							<div v-else style="color: #999;">
								暂无渠道数据
							</div>
						</div>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="ZhanWeiDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="SaveZhanWeiAction">
						确定
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		PlanListGetList,
		GetEnableDepartmentList,
		GetEnableDeviceList,
		TimePeriodGetEnableList,
		DepartmentResourceGetEnableList,
		PlanDetailChangeInfo,
		PlanListGetDetail,
		PlanDetailPlanListDel,
		GetPlanUsedList,
		SaveLockedCount
	} from '@/api/api.js'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		Edit,
		Document,
		Select,
		Lock
	} from '@element-plus/icons-vue'

	let planTableData = ref([])
	let loading = ref(false)
	let currentPage = ref(1) //当前页码
	let pageSize = ref(9999) //每页数量
	let total = 0 //总数量

	let selectedPlanArr = ref([])
	let date_list = ref([])
	let PlanSelectedAll = ref(0)
	let searchInfo = ref({
		department_id: null,
		resources_id: null,
		device_id: null,
		xingqi: null,
		status: null,
		dateRange: []
	})
	let PlanDetailDialogVisible = ref(false)
	const GetList = () => {
		searchInfo.value.resources_id = ResourceActive.value
		date_list.value = getAllDatesBetweenDates(searchInfo.value.dateRange)
		loading.value=true
		PlanListGetList({
			page: currentPage.value,
			pageSize: pageSize.value,
			searchInfo: searchInfo.value
		}).then(res => {
			loading.value=false
			if (res.status) {
				planTableData.value = []
				selectedPlanArr.value = []
				let plans = res.data.list
				if (plans.length > 0) {
					const timeSlotsSet = new Set();
					plans.forEach(v => {
						if (v.resources_id == ResourceActive.value) {
							const timeRange =
								`${v.begin_time.substring(0,5)}-${v.end_time.substring(0,5)}`;
							timeSlotsSet.add(timeRange);
						}
					});

					const timeSlots = Array.from(timeSlotsSet).sort(); // 排序可选

					// Step 2: 构建表格数据


					timeSlots.forEach(timeRange => {
						const row = {
							time_range: timeRange
						};

						date_list.value.forEach(date => {
							const matchingPlan = plans.find(
								v =>
								`${v.begin_time.substring(0,5)}-${v.end_time.substring(0,5)}` ===
								timeRange && v.date === date && v.resources_id ==
								ResourceActive.value
							);
							let plan_enable = false
							if (matchingPlan) {
								row[date] = {
									countsInfo: matchingPlan.countsInfo,
									patient_type_label: matchingPlan.patient_type_label,
									status: matchingPlan.status,
									id: matchingPlan.id,
									resources_id: matchingPlan.resources_id

								};
							}else{
								row[date] = {
									countsInfo:null,
									patient_type_label:null,
									status: null,
									id:null,
									resources_id:null
								
								};
							}
						});

						planTableData.value.push(row);
					});

				}
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const selectedAllPlanFunc = () => {
		PlanSelectedAll.value = PlanSelectedAll.value === 0 ? 1 : 0;
		if (PlanSelectedAll.value === 0) {
			selectedPlanArr.value = []
		}
		if (PlanSelectedAll.value === 1) {
			planTableData.value.forEach((v, i) => {
				console.log(v)
				for (let key in v) {
					if (key != 'time_range') {
						selectedPlanArr.value.push(v[key].id)
					}
				}


			})
		}
	}
	const checkBoxCheckFunc = (id) => {
		const index = selectedPlanArr.value.indexOf(id);
		if (index === -1) {
			selectedPlanArr.value.push(id);
		} else {
			selectedPlanArr.value = selectedPlanArr.value.filter(item => item !== id);
		}
	};
	let hoverIndex = ref(null)
	const showTools = (index) => {
		hoverIndex.value = index
	}
	const hideTools = (index) => {
		hoverIndex.value = null
	}
	const zhenshiClick = (zhenshi) => {
		ResourceActive.value = zhenshi
		PlanSelectedAll.value = 0
		selectedPlanArr.value = []
		
		GetList()
	}
	const isSelected = (id) => {
		return selectedPlanArr.value.includes(id)
	}
	let xingqi = ref([{
		label: '星期一',
		value: 1
	}, {
		label: '星期二',
		value: 2
	}, {
		label: '星期三',
		value: 3
	}, {
		label: '星期四',
		value: 4
	}, {
		label: '星期五',
		value: 5
	}, {
		label: '星期六',
		value: 6
	}, {
		label: '星期日',
		value: 7
	}])
	//获取可用服务组
	let EnableDeviceList = ref([])
	const GetEnableDeviceListFunc = () => {
		loading.value = true
		GetEnableDeviceList().then(res => {
			loading.value = false
			if (res.status) {
				EnableDeviceList.value = res.data
			} else {
				ElMessage.error(res.msg)
			}

		})
	}
	let EnableDepartmentList = ref([])
	const GetDepartmentEnableList = () => {
		loading.value = true
		GetEnableDepartmentList({}).then(res => {
			loading.value = false
			if (res.status) {
				EnableDepartmentList.value = res.data.list
			} else {
				ElMessage.error(res.msg)
			}

		})
	}
	// //获取可用的时间段
	// let TimePeriodList = ref([])
	// const GetEnableTimePeriod = () => {
	//     loading.value = true
	//     TimePeriodGetEnableList().then(res => {
	//         loading.value = false
	//         if (res.status) {
	//             TimePeriodList.value = res.data
	//         } else {
	//             ElMessage.error(res.msg)
	//         }
	//
	//     })
	// }
	//获取可用资源列表
	let enableResourceList = ref([])
	let ResourceActive = ref(0)
	const getEnableResource = () => {
		loading.value = true
		DepartmentResourceGetEnableList().then(res => {
			loading.value = false
			if (res.status) {
				enableResourceList.value = res.data
				if (enableResourceList.value.length > 0 && ResourceActive.value == '') {
					ResourceActive.value = enableResourceList.value[0].id
					GetList()
				}

			} else {
				ElMessage.error(res.msg)
			}

		})
	}
	//获取详情
	let PlanDetaiInfo = ref('')
	const getDetail = (id) => {
		PlanDetailDialogVisible.value = true
		loading.value = true
		PlanListGetDetail({
			id: id
		}).then(res => {
			loading.value = false
			if (res.status) {
				PlanDetaiInfo.value = res.data
			} else {
				ElMessage.error(res.msg)
			}

		})
	}
	//监听最大值输入
	const MaxCountChange = (e) => {
		console.log(e)
		if (e === '' || e == null || e === 0) {
			PlanDetaiInfo.value.max_total = 0
		}
		let temp = 0
		let qudao_count = PlanDetaiInfo.value.coutsInfo.length

		for (let i = 0; i < qudao_count; i++) {
			if (PlanDetaiInfo.value.coutsInfo[i].ratio === 0) continue
			PlanDetaiInfo.value.coutsInfo[i].count = Math.round(PlanDetaiInfo.value.max_total * (PlanDetaiInfo.value
				.coutsInfo[i].ratio / 100))
			temp = temp + PlanDetaiInfo.value.coutsInfo[i].count
			//如果各个渠道的总和与设置的总数不一致，最后1项适当加减，平衡总数
			if (i === qudao_count - 1 && temp !== PlanDetaiInfo.value.max_total) {
				PlanDetaiInfo.value.coutsInfo[i].count = PlanDetaiInfo.value.coutsInfo[i].count - (temp - PlanDetaiInfo
					.value.max_total)
			}
		}
	}
	//保存修改
	const SavePlanAction = () => {
		let tempCount = 0
		PlanDetaiInfo.value.coutsInfo.forEach((item) => {
			tempCount = tempCount + Number(item.count)
		})
		if (tempCount !== Number(PlanDetaiInfo.value.max_total)) {
			ElMessage.error('各个渠道数量之和与当日总量不符')
			return false
		}
		loading.value = true
		PlanDetailChangeInfo({
			PlanDetaiInfo: PlanDetaiInfo.value
		}).then(res => {
			loading.value = false
			if (res.status) {
				PlanDetailDialogVisible.value = false
				GetList()
			} else {
				ElMessage.error(res.msg)
			}

		})
	}
	const Del = () => {
		if (selectedPlanArr.value.length == 0) {
			ElMessage.error("请至少勾选1条记录")
			return false
		}
	 
		ElMessageBox.confirm(
			'确定删除吗？',
			'提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
		).then(() => {
			loading.value = true
			PlanDetailPlanListDel({
				ids: selectedPlanArr.value
			}).then(res => {
				loading.value = false
				if (res.status) {
					ElMessage({
						message: res.msg,
						type: 'success',
					})
					GetList()
				} else {
					ElMessage.error(res.msg)
				}
			})
		})
	}
	let MingXiDialogVisible = ref(false);
	let MingXiLoading = ref(false)
	let MingXiList = ref(null);
	let selectedPlanRow = ref(null);
	let selectecQuDaoid = ref(null);
	const GetMingXi = (row, typeid) => {
		selectecQuDaoid.value = typeid
		selectedPlanRow.value = row
		MingXiDialogVisible.value = true
		MingXiLoading.value = true
		GetPlanUsedList({
			planid: row.id,
			qudaoid: typeid
		}).then(res => {
			MingXiLoading.value = false
			if (res.status) {
				MingXiList.value = res.data
			} else {
				ElMessage.error(res.msg)
			}

		})
	}
	//占位功能
	let ZhanWeiDialogVisible = ref(false)
	let ZhanWeiInfo = ref(null)
	const OpenZhanWeiDialog = (row) => {
		ZhanWeiDialogVisible.value = true
		loading.value = true
		PlanListGetDetail({
			id: row.id
		}).then(res => {
			loading.value = false
			if (res.status) {
				ZhanWeiInfo.value = res.data
				ZhanWeiInfo.value.coutsInfo.forEach(item => {
					if (item.locked_count === null) {
						item.locked_count = 0
					}
				})
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const SaveZhanWeiAction = () => {
		let locked_counts = []
		let hasError = false
		ZhanWeiInfo.value.coutsInfo.forEach((item) => {
			if (hasError) return
			const remaining = item.count - item.used_count
			if (Number(item.locked_count) > remaining) {
				ElMessage.error(`${item.name} 的占位数量不能大于剩余可用数量，最多${remaining}个`)
				hasError = true
				return
			}
			if (Number(item.locked_count) < 0) {
				ElMessage.error(`${item.name} 的占位数量不能为负数`)
				hasError = true
				return
			}
			locked_counts.push({
				appointment_type_id: item.appointment_type_id,
				locked_count: item.locked_count || 0
			})
		})
		if (hasError) return
		loading.value = true
		SaveLockedCount({
			roster_detail_id: ZhanWeiInfo.value.id,
			locked_counts: locked_counts
		}).then(res => {
			loading.value = false
			if (res.status) {
				ZhanWeiDialogVisible.value = false
				GetList()
				ElMessage.success('占位设置保存成功')
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const getTotalLocked = (countsInfo) => {
		if (!countsInfo || !Array.isArray(countsInfo)) return 0
		return countsInfo.reduce((total, item) => {
			return total + (Number(item.locked_count) || 0)
		}, 0)
	}

	function formatDateLocal(date) {
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');
		return `${year}-${month}-${day}`;
	}

	function getAllDatesBetweenDates(dateArray) {
		// 将字符串日期转为 Date 对象并排序
		const sortedDates = dateArray
			.map(dateStr => new Date(dateStr))
			.sort((a, b) => a - b);

		const startDate = sortedDates[0];
		const endDate = sortedDates[sortedDates.length - 1];

		const dateList = [];
		let currentDate = new Date(startDate);

		while (currentDate <= endDate) {
			dateList.push(currentDate.toISOString().split('T')[0]); // 格式化为 YYYY-MM-DD
			currentDate.setDate(currentDate.getDate() + 1);
		}

		return dateList;
	}
	function getWeekday(dateString) {
	  const date = new Date(dateString);
	  
	  if (isNaN(date)) {
	    return "无效日期";
	  }
	
	  const weekdays = [
	    "周日",
	    "周一",
	    "周二",
	    "周三",
	    "周四",
	    "周五",
	    "周六"
	  ];
	
	  return weekdays[date.getDay()];
	}
	onMounted(() => {
		const today = new Date();
		const todayStr = formatDateLocal(today);

		// 获取15天后的日期
		const fifteenDaysLater = new Date(today);
		fifteenDaysLater.setDate(today.getDate() + 14);
		const fifteenDaysLaterStr = formatDateLocal(fifteenDaysLater);
		searchInfo.value.dateRange = [todayStr, fifteenDaysLaterStr]
		GetDepartmentEnableList()
		getEnableResource()
		GetEnableDeviceListFunc()
	})
</script>
<style lang="scss" scoped>
	.type_count {
		display: flex;
	}

	.type_count div {
		white-space: nowrap;
		margin-right: 10px;
	}

	.qudao_k {
		display: flex;
	}

	.qudao_k_input {
		width: 150px;
	}

	.hongzi {
		color: #b25252;
	}

	.yiyong {
		font-weight: 700;
		color: #f5a96c;
		cursor: pointer;
	}

	.yiyong:hover {
		color: #666;
	}

	.zhenshiButton {
		width: 150px;
		border: 1px solid #e8e8e8;
		text-align: center;
		margin-top: 4px;
		border-radius: 4px;
		cursor: default;
		padding: 6px 6px;
	}

	.zhenshiButtonActive {
		background-color: #5bc0de;
		color: #fff;
	}

	.plan_checkAllbox {
		height: 20px;
		width: 20px;
		border: 1px solid #7cccc7;
		border-radius: 4px;
	}

	.plan_checkAllbox_active {
		background-color: #409eff;
		justify-content: center;
		align-items: center;
		display: flex;
	}
	.planInfo_k_disabled{
		background-color: #ffd6d2;
	}

	.planInfo_k {
		font-size: 14px;
		color: #333;
		position: relative;
		padding-top: 6px;
		padding-bottom: 10px; 
		padding-right: 8px;
		.zong_row{
			text-align: right;
			.qudao_title_zong {
				font-weight: 600;
					
				span {
					font-weight: 500;
				}
			}
		}
		.plan_checkbox {
			position: absolute;
			top: 2px;
			left: 2px;
			height: 16px;
			width: 16px;
			border: 1px solid #98c4cc;
			border-radius: 4px;
		}

		.plan_checkbox_active {
			background-color: #409eff;
			justify-content: center;
			align-items: center;
			display: flex;
		}
		.hoverTools {
			position: absolute;
			top: 0px;
			left: 0px;
			height: 100%;
			width: 100%;
			 
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 4px;
			.icon_k {
				height: 30px;
				width: 30px;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #ccc;
				background-color: #fff;
				margin-left: 6px;
		
			}
		}
		
		.qudao_count_row {
			display: flex;
		
			div {
				margin-left: 6px;
			}
		
			
		}
	}
	.planInfo {
		.planTable {
			width: 100%;
			background-color: #fff;
			text-align: center;
			border: 1px solid #f1f1f1;
			border-collapse: collapse;
			/* 合并边框 */
			color: #333;
	
			td {
				border: 1px solid #f1f1f1;
				// padding: 6px;
			}
			td:first-child,
			    th:first-child {
			      position: sticky;
			      left: 0;
			      background-color: #fafafa;
			      z-index: 1;
			    }
		}
	
		.table_plan_row td:first-child {
			background-color: #f1f1f1;
			border-bottom: 1px solid #e8e8e8;
		}
	
		.table_plan_row> :not(:first-child):hover {
			background-color: #aeebf0;
			cursor: pointer;
			color: #fff;
		}
	
		.planActive {
			background-color: #5bc0de;
			color: #fff;
		}
	
		.plandisable {
			pointer-events: none;
			opacity: 0.4;
		}
	
		.shuxian {
			border-left: 1px solid #dfdfdf;
			margin-left: 40px;
			margin-right: 40px;
		}
	
		.do_button {
			width: 100px;
		}
	
	}
	.yellow{
		color:#ffaa7f;
	}
	.red{
		color:#c81e00;
	}
	.bold-text{
		font-weight: bold;
	}
</style>