<template>
	<div class="layout-navbars-breadcrumb-index">
		<Logo v-if="setIsShowLogo" />
		<Breadcrumb />
		<Horizontal :menuList="menuList" v-if="isLayoutTransverse" />
		<!-- <div v-if="patInfoText" class="now_pat_info_box">{{ patInfoText }}</div> -->
		<div v-if="isPatientManagementMenu" class="now_pat_info_box">
			<div class="now_pat_info_box_left">
				<div class="pat_code_and_ok">
					<span class="pat_code">透析号:{{ patinetInfoText.透析号 }}</span>
					<span v-if="patinetInfoText.阳性" class="pat_ok">阳</span>
				</div>
				<div class="pat_name">{{ patinetInfoText.患者姓名 }}</div>
			</div>
			<div class="now_pat_info_box_right">
				<div class="now_pat_info_box_right_row1">{{ patinetInfoText.性别出生年龄 }}</div>
				<div class="pat_number">透析次数：{{ patinetInfoText.透析次数 }}</div>
			</div>
			<div class="now_pat_info_box_right">
				<div class="now_pat_info_box_right_row1" v-if="isUseHisSyncMode">HIS编号：{{ patinetInfoText.HIS编号 }}</div>
				<div class="pat_number" v-else>门诊住院号：{{ patinetInfoText.门诊住院号 }}  </div>
			</div>
		</div>
		<User />
	</div>
</template>

<script lang="ts">
import { computed, reactive, toRefs, onMounted, onUnmounted, getCurrentInstance, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from '/@/store/index';
import Breadcrumb from '/@/layout/navBars/breadcrumb/breadcrumb.vue';
import User from '/@/layout/navBars/breadcrumb/user.vue';
import Logo from '/@/layout/logo/index.vue';
import Horizontal from '/@/layout/navMenu/horizontal.vue';
import { useI18n } from 'vue-i18n';
import dayjs from 'dayjs';
export default {
	name: 'layoutBreadcrumbIndex',
	components: { Breadcrumb, User, Logo, Horizontal },
	setup() {
		const { t } = useI18n();
		const { proxy } = getCurrentInstance() as any;
		const store = useStore();
		const route = useRoute();
		const state: any = reactive({
			menuList: [],
		});
		// 获取布局配置信息
		const getThemeConfig = computed(() => {
			return store.state.themeConfig.themeConfig;
		});
		// 设置 logo 显示/隐藏
		const setIsShowLogo = computed(() => {
			let { isShowLogo, layout } = store.state.themeConfig.themeConfig;
			return (isShowLogo && layout === 'classic') || (isShowLogo && layout === 'transverse');
		});
		// 设置是否显示横向导航菜单
		const isLayoutTransverse = computed(() => {
			let { layout, isClassicSplitMenu } = store.state.themeConfig.themeConfig;
			return layout === 'transverse' || (isClassicSplitMenu && layout === 'classic');
		});

			// 是否是患者管理菜单
		const isPatientManagementMenu = computed(() => {
			const { path } = route;
			// @ts-ignore
			if (!/^\/PatientManage/.test(path) || !store.state.patientInfos.patientInfos.patientName) return false;
			return true
		});
		const isUseHisSyncMode= computed(() => {
			// @ts-ignore
			return store.state.userInfos.userInfos.client.isUseHisSyncMode;
		});
		const patinetInfoText = computed(() => {
			// @ts-ignore
			const { patientName, age, patientHemoCode, patientIsPositive, patientGenderText, birthday, historyCount,patientNo,hisCode} = store.state.patientInfos.patientInfos;
			let formattedDate = '';
			if (birthday) {
				// 格式化出生日期
				formattedDate = dayjs(birthday).format('YYYY年MM月DD日');
			}
			return {
				患者姓名: patientName,
				透析号: patientHemoCode,
				阳性: patientIsPositive === 1,
				性别出生年龄: `${patientGenderText}性 ${formattedDate}（${age}岁）`,
				透析次数: historyCount || 0,
				门诊住院号:patientNo,
				HIS编号:hisCode
			}
		});


		// 是否是患者管理菜单
		const patInfoText = computed(() => {
			const { path } = route;
			// @ts-ignore
			if (!/^\/PatientManage/.test(path) || !store.state.patientInfos.patientInfos.patientName) return '';
			// @ts-ignore
			return `${t('message.user.当前患者信息')}：${t('message.user.姓名')}: ${store.state.patientInfos.patientInfos.patientName} ${t('message.透析单.年龄')}:${store.state.patientInfos.patientInfos.age} ${t('message.user.透析号')}: ${store.state.patientInfos.patientInfos.patientHemoCode || t('message.user.暂无')}`
		});

		// 设置/过滤路由（非静态路由/是否显示在菜单中）
		const setFilterRoutes = () => {
			let { layout, isClassicSplitMenu } = store.state.themeConfig.themeConfig;
			if (layout === 'classic' && isClassicSplitMenu) {
				state.menuList = delClassicChildren(filterRoutesFun(store.state.routesList.routesList));
				const resData = setSendClassicChildren(route.path);
				proxy.mittBus.emit('setSendClassicChildren', resData);
			} else {
				state.menuList = filterRoutesFun(store.state.routesList.routesList);
			}
		};
		// 设置了分割菜单时，删除底下 children
		const delClassicChildren = (arr: Array<object>) => {
			arr.map((v: any) => {
				if (v.children) delete v.children;
			});
			return arr;
		};
		// 路由过滤递归函数
		const filterRoutesFun = (arr: Array<object>) => {
			return arr
				.filter((item: any) => !item.meta.isHide)
				.map((item: any) => {
					item = Object.assign({}, item);
					if (item.children) item.children = filterRoutesFun(item.children);
					return item;
				});
		};
		// 传送当前子级数据到菜单中
		const setSendClassicChildren = (path: string) => {
			const currentPathSplit = path.split('/');
			let currentData: any = {};
			filterRoutesFun(store.state.routesList.routesList).map((v, k) => {
				if (v.path === `/${currentPathSplit[1]}`) {
					v['k'] = k;
					currentData['item'] = [{ ...v }];
					currentData['children'] = [{ ...v }];
					if (v.children) currentData['children'] = v.children;
				}
			});
			return currentData;
		};
		// 页面加载时
		onMounted(() => {
			setFilterRoutes();
			proxy.mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
				setFilterRoutes();
			});
		});
		// 页面卸载时
		onUnmounted(() => {
			proxy.mittBus.off('getBreadcrumbIndexSetFilterRoutes');
		});
		return {
			isUseHisSyncMode,
			getThemeConfig,
			setIsShowLogo,
			isLayoutTransverse,
			isPatientManagementMenu,
			patinetInfoText,
			...toRefs(state),
		};
	},
};
</script>

<style scoped lang="scss">
.layout-navbars-breadcrumb-index {
	height: 50px;
	display: flex;
	align-items: center;
	padding-right: 15px;
	background: var(--bg-topBar);
	border-bottom: 1px solid #f1f2f3;
	.now_pat_info_box {
		flex: 1;
		display: flex;
		align-items: center;
		.now_pat_info_box_left {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 20px;
			.pat_code_and_ok {
				display: flex;
				align-items: center;
				justify-items: center;
				.pat_code {
					font-size: 12px;
					color: #888;
				}
				.pat_ok {
					padding: 0 2px;
					margin-left: 3px;
					font-size: 12px;
					color: #fff;
					background: red;
					border-radius: 3px;
				}
			}
			.pat_name {
				font-size: 14px;
				color: #333;
				font-weight: bold;
			}
		}
		.now_pat_info_box_right {
			display: flex;
			flex-direction: column;
			align-items: center;
			.now_pat_info_box_right_row1 {
				font-size: 12px;
				color: #888;
			}
			.pat_number {
				font-size: 14px;
				color: #888;
			}
		}
	}
}
</style>
