<template>
	<div class="notice pointer" style="">
		<el-popover placement="bottom" :width="300" trigger="hover">
			<el-tabs v-model="activeTabName" v-loading="loading">
				<el-tab-pane v-if="checkPermi(['apply:apply:list'])" name="todo"
					:label="`我的待办` + (applyListBadge > 0 ? `(${applyListBadge})` : ``)">
					<template #label>
						<div class="flex align-center" @click="handleUseApply()">
							<span>{{ `我的待办` + (applyListBadge > 0 ? `(${applyListBadge})` : ``) }}</span>
						</div>
					</template>
					<div v-if="store.state.data.applyList.length > 0">
						<template v-for="(item, i) in store.state.data.applyList" :key="item.applyNo">
							<van-cell class="pointer" v-if="i < 5" @click="handleApplyItemclick(item)">
								<template #title>
									<dict-tag :options="apply_type" :value="item.applyType" />
								</template>
								<template #value>
									{{ item.userNickName }}
								</template>
								<template #label>
									{{ parseTime(item.applyEstablishTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
								</template>
							</van-cell>
						</template>
					</div>
					<Empty v-else />
					<template v-if="applyListBadge > 5">
						<el-divider />
						<div class="flex justify-center">
							<el-link href="#/workbench/todo">查看更多</el-link>
						</div>
					</template>
				</el-tab-pane>
				<el-tab-pane v-if="checkPermi(['maintenanceRecord:maintenanceRecord:list'])" name="maintenanceRecord"
					:label="`维保记录` + (maintenanceRecordListBadge > 0 ? `(${maintenanceRecordListBadge})` : ``)">
					<template #label>
						<div class="flex align-center" @click="handleUseApply()">
							<span>{{ `维保记录` + (maintenanceRecordListBadge > 0 ? `(${maintenanceRecordListBadge})` : ``) }}</span>
						</div>
					</template>
					<div v-if="store.state.data.maintenanceRecordList.length > 0">
						<template v-for="(item, i) in store.state.data.maintenanceRecordList"
							:key="item.maintenanceApplyId">
							<van-cell class="pointer" v-if="i < 5" @click="handleMaintenanceRecordItemclick(item)">
								<template #title>
									{{item.deptName}}
								</template>
								<template #value>
									{{item.roleName}}
								</template>
								<template #label>
									{{ parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
								</template>
							</van-cell>
						</template>
					</div>
					<Empty v-else />
					<template v-if="maintenanceRecordListBadge > 5">
						<el-divider />
						<div class="flex justify-center">
							<el-link href="#/maintentance/maintenanceRecord">查看更多</el-link>
						</div>
					</template>

				</el-tab-pane>
			</el-tabs>
			<template #reference>
				<el-badge :value="applyListBadge + maintenanceRecordListBadge"
					:hidden="applyListBadge + maintenanceRecordListBadge == 0">
					<div style="line-height:20px">
						<svg-icon :icon-class="`bell`" style="color:#5a5e66;font-size:20px;" />
					</div>
				</el-badge>
			</template>
		</el-popover>


		<MaintenanceRecordDetailDrawer ref="maintenanceRecordDetailDrawerRef" :maintenanceRecordId="maintenanceRecordId"
			@update="useApply" />

	</div>
</template>

<script setup>
	import {
		checkPermi
	} from "@/utils/permission"
	import MaintenanceRecordDetailDrawer from "@/components/MaintenanceRecord/detail/drawer";
	import {
		listRole
	} from "@/api/system/role";
	import {
		listDept
	} from "@/api/system/dept";
	import useApply from "@/hooks/useApply"; // hook

	const store = useStore();
	const {
		proxy
	} = getCurrentInstance();
	// const { com_apply_state, apply_type } = proxy.useDict('com_apply_state', 'apply_type');
	const {
		apply_type
	} = proxy.useDict("apply_type");
	const applyListBadge = computed(() => store.state.data.applyList.length);
	const maintenanceRecordListBadge = computed(
		() => store.state.data.maintenanceRecordList.length
	);
	// const applyListBadge = ref(0)
	// const maintenanceRecordListBadge = ref(0)

	const applyId = ref(null);
	const maintenanceRecordId = ref(null);

	const roleList = ref([]);
	const deptList = ref([]);
	const activeTabName = ref("todo");
	const loading = ref(false);

	watch(
		() => maintenanceRecordListBadge.value,
		(newValue) => {
			console.log(newValue);
			console.log(applyListBadge.value);
			if (newValue == 0 && applyListBadge.value > 0) {
				activeTabName.value = "todo";
			} else if (newValue > 0 && applyListBadge.value == 0) {
				activeTabName.value = "maintenanceRecord";
			}
		}
	);

	watch(
		() => applyListBadge.value,
		(newValue) => {
			console.log(newValue);
			console.log(maintenanceRecordListBadge.value);
			if (newValue == 0 && maintenanceRecordListBadge.value > 0) {
				activeTabName.value = "maintenanceRecord";
			} else if (newValue > 0 && maintenanceRecordListBadge.value == 0) {
				activeTabName.value = "todo";
			}
		}
	);

	const handleApplyItemclick = (item) => {
		applyId.value = item.applyId;
	};

	const handleMaintenanceRecordItemclick = (item) => {
		maintenanceRecordId.value = item.maintenanceRecordId;
		proxy.$refs["maintenanceRecordDetailDrawerRef"].show();
	};

	function initialData() {
		// listDept({
		// 	pageNum: 1,
		// 	pageSize: 9999,
		// }).then((response) => {
		// 	deptList.value = response.data;
		// });
		// listRole(
		// 	proxy.addDateRange({
		// 			pageNum: 1,
		// 			pageSize: 9999,
		// 		},
		// 		undefined
		// 	)
		// ).then((response) => {
		// 	roleList.value = response.rows;
		// });
		useApply();
		activeTabName.value = checkPermi(['apply:apply:list']) ? "todo" : "maintenanceRecord"
	}

	function handleUseApply() {
		loading.value = true;
		useApply(false);
		console.log(`useApply`);
		loading.value = false;
	}

	initialData();
</script>