<template>
	<div v-if="isShowBreadcrumb" class="layout-navbars-breadcrumb">
		<div
			v-if="route.path == '/detail' || route.path == '/detailKua'"
			style="width: 50px; display: flex; text-align: center; justify-content: center"
			@click="goBack"
		>
			<img :src="iconBack" class="back_icon" />
		</div>

		<router-link to="/home" v-if="route.path !== '/detail' || route.path == '/detailKua'" class="r_logo">
			<img :src="logo_hol" class="logo" />
			<div class="line"></div>
			<span class="text">中证智能财保</span>
		</router-link>
		<div>
			<span class="route_name" v-if="detailName && route.path == '/detail'" :key="route.path"> {{ detailName }}</span>
		</div>

		<!-- <el-breadcrumb separator="-" style="margin-left: 30px" v-if="pathTwo">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: pathTwo }">{{ nameTwo }}</el-breadcrumb-item>
		</el-breadcrumb> -->

		<!-- <el-breadcrumb class="layout-navbars-breadcrumb-hide" style="margin-left: 20px">
			<transition-group name="breadcrumb">
				<el-breadcrumb-item v-for="(v, k) in state.breadcrumbList" :key="!v.meta.tagsViewName ? v.meta.title : v.meta.tagsViewName">
					<span v-if="k === state.breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
						<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />
						<div v-if="!v.meta.tagsViewName">{{ $t(v.meta.title) }}</div>
						<div v-else>{{ v.meta.tagsViewName }}</div>
					</span>
					<a v-else @click.prevent="onBreadcrumbClick(v)">
						<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />{{ $t(v.meta.title) }}
					</a>
				</el-breadcrumb-item>
			</transition-group>
		</el-breadcrumb> -->
	</div>
</template>

<script setup lang="ts" name="layoutBreadcrumb">
import { reactive, computed, onMounted, ref, nextTick, watch, defineAsyncComponent } from 'vue';
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
import { Local } from '/@/utils/storage';
import other from '/@/utils/other';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useRoutesList } from '/@/stores/routesList';
import iconBack from '/@/assets/images/icon_back.png';
import { getInfoTitle } from '/@/api/api';
import { Session } from '/@/utils/storage';
import logo_hol from '/@/assets/logo_hol.png';
// import HeadFilter from '/@/components/Filter/HeadFilter.vue';

// 定义变量内容
const stores = useRoutesList();
const { routesList } = storeToRefs(stores);

const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const route = useRoute();
const router = useRouter();
const state = reactive<BreadcrumbState>({
	breadcrumbList: [],
	routeSplit: [],
	routeSplitFirst: '',
	routeSplitIndex: 1,
	menuList: [],
});

const detailName = ref();

// 角色判断
// const roleName = ['Director', 'subCenter', 'CSRC'];
// const roleAuth = computed(() => {
// 	return roleName.includes(Session.get('roleName')) && route.path === '/dashboard';
// });
const nickName = computed(() => {
	// return Session.get('userData')?.name || Session.get('userData')?.companyName || '';
	return Session.get('userData')?.companyName || '';
});

watch(
	() => route.path,
	(val) => {
		getInfo();
		// if (Session.get("detail_name")) {
		// 	detailName.value = Session.get("detail_name")
		// }
	},
	{
		deep: true,
	}
);

function goBack() {
	if (route.path == '/detail' || route.path == '/detailKua') {
		// router.go(-1)
		router.push(route.query.fromPath);
		// if (route.query.type == 1) {
		// 	router.push('/index');
		// } else {
		// 	router.push('/dashboard');
		// }
	} else {
		router.go(-1);
	}
	// router.go(-1)
}

// 动态设置经典、横向布局不显示
const isShowBreadcrumb = computed(() => {
	initRouteSplit(route.path);
	const { layout, isBreadcrumb } = themeConfig.value;
	if (layout === 'classic' || layout === 'transverse') return false;
	else return isBreadcrumb ? true : false;
});
// 面包屑点击时
const onBreadcrumbClick = (v: RouteItem) => {
	const { redirect, path } = v;
	if (redirect) router.push(redirect);
	else router.push(path);
};
// 展开/收起左侧菜单点击
const onThemeConfigChange = () => {
	themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
	setLocalThemeConfig();
};
// 存储布局配置
const setLocalThemeConfig = () => {
	Local.remove('themeConfig');
	Local.set('themeConfig', themeConfig.value);
};
// 处理面包屑数据
const getBreadcrumbList = (arr: RouteItems) => {
	arr.forEach((item: RouteItem) => {
		state.routeSplit.forEach((v: string, k: number, arrs: string[]) => {
			if (state.routeSplitFirst === item.path) {
				state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
				state.breadcrumbList.push(item);
				state.routeSplitIndex++;
				if (item.children) getBreadcrumbList(item.children);
			}
		});
	});
};

// 当前路由字符串切割成数组，并删除第一项空内容
const initRouteSplit = (path: string) => {
	if (!themeConfig.value.isBreadcrumb) return false;
	state.breadcrumbList = [routesList.value[0]];
	state.routeSplit = path.split('/');
	state.routeSplit.shift();
	state.routeSplitFirst = `/${state.routeSplit[0]}`;
	state.routeSplitIndex = 1;
	getBreadcrumbList(routesList.value);
	if (route.name === 'home' || (route.name === 'notFound' && state.breadcrumbList.length > 1)) state.breadcrumbList.shift();
	if (state.breadcrumbList.length > 0)
		state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = other.setTagsViewNameI18n(<RouteToFrom>route);
};

async function getInfo() {
	if (route.query?.id && route.path == '/detail') {
		let { code, data } = await getInfoTitle({
			id: route.query.id,
			type: 2,
		}).catch((e) => {});
		if (code == 200) detailName.value = data;
	}
}

const pathTwo = ref();
const nameTwo = ref();

// 页面加载时
onMounted(() => {
	initRouteSplit(route.path);

	// if (Session.get("detail_name")) {
	// 	detailName.value = Session.get("detail_name")
	// }
	// state.menuList = filterRoutesFun(routesList.value);

	if (route.path != '/home') {
		pathTwo.value = route.path;
		nameTwo.value = route.meta.title;
	}

	getInfo();
});
// 路由更新时
onBeforeRouteUpdate((to) => {
	initRouteSplit(to.path);
});
</script>

<style scoped lang="scss">
.layout-navbars-breadcrumb {
	// flex: 1;
	height: inherit;
	display: flex;
	align-items: center;

	.layout-navbars-breadcrumb-icon {
		cursor: pointer;
		font-size: 18px;
		color: var(--next-bg-topBarColor);
		height: 100%;
		width: 40px;
		opacity: 0.8;

		&:hover {
			opacity: 1;
		}
	}

	.layout-navbars-breadcrumb-span {
		display: flex;
		opacity: 0.7;
		color: var(--next-bg-topBarColor);
	}

	.layout-navbars-breadcrumb-iconfont {
		font-size: 14px;
		margin-right: 5px;
	}

	:deep(.el-breadcrumb__separator) {
		opacity: 0.7;
		color: var(--next-bg-topBarColor);
	}

	:deep(.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link) {
		font-weight: unset !important;
		color: var(--next-bg-topBarColor);

		&:hover {
			color: var(--el-color-primary) !important;
		}
	}
}

.route_name {
	// color: #2d3643;
	// font-family: 'PingFang SC';
	// font-size: 14px;
	// font-style: normal;
	// font-weight: 600;
	// line-height: 22px;
	margin-left: 10px;
	color: #000000;
	font-family: 'Noto Sans CJK SC';
	font-size: 18px;
	font-style: normal;
	font-weight: bold;
	line-height: 26px;
	letter-spacing: 0.56px;
	white-space: nowrap;
}

.back_icon {
	width: 24px;
	height: 24px;
	cursor: pointer;
}

.r_logo {
	display: flex;
	align-items: center;
	margin-left: 20px;
	text-decoration: none;

	.logo {
		width: 140px;
		height: 32px;
	}

	.line {
		width: 1px;
		height: 15px;
		background-color: #ccc;
		margin-left: 12px;
		margin-right: 12px;
	}

	.text {
		color: #000000;
		font-family: 'Noto Sans CJK SC';
		font-size: 18px;
		font-style: normal;
		font-weight: bold;
		line-height: 26px;
		letter-spacing: 0.56px;
		white-space: nowrap;
		text-decoration: none;
	}
}

// .head-filter {
// 	margin-left: 24px;
// }
</style>
