<script setup lang="ts">
import { RouterView } from 'vue-router'
import { useTitle } from '@vueuse/core'
import { getImg } from '@/assets/images'
import { NModal, NPopover } from 'naive-ui'
import { useUserStore } from '@/stores/modules/user'
import Searchs from '@/components/search.vue'
import { report, treeDbList } from '@/api/daikin/base'
useTitle('大金中国调达本部 HOMEPAGE')
const { push } = useRouter()
const store = useUserStore()

const { toggle } = inject<any>('fullscreen')

const activeMenuKey = ref('Home')
let idx = ref(0)
const Menus = ref([
	// 首页 集团部门方针 年度活动日程表 其他链接…
	{
		key: 'Home',
		name: '首页',
		icon: getImg('home.png'),
		icon1: getImg('home1.png'),
		link: '',
		path: '/Home',
		other: 'Top Page'
	},
	{
		key: 'Group',
		name: '集团部门方针',
		icon: getImg('company.png'),
		icon1: getImg('company1.png'),
		link: '',
		path: '/Home/group'
		// children: [
		//   { key: 'Group', name: '-集团方针' },
		//    { key: 'Company', name: '-公司方针' },
		//    { key: 'HeadQuarters', name: '-调达本部方针' }
		//   ]
	},
	// { key: 'company', name: '本部长通达', icon: getImg('icon-company.svg') },
	{
		key: 'User',
		name: '年度活动日程表',
		icon: getImg('book.png'),
		icon1: getImg('book1.png'),
		link: '',
		path: '/Home/User'
		//  children: [
		//     { key: '', name: '调达Database' },
		//     ]
	},
	//  { key: 'database', name: '调达Database', icon: getImg('shuju.png'),icon1: getImg('shuju1.png'),link:'https://procurement.daikin.net.cn/scripts/cbgrn/grn.exe/'  },
	{
		key: 'DataBase',
		name: '调达Database',
		icon: getImg('shuju.png'),
		icon1: getImg('shuju1.png'),
		link: ''
	},
	{
		key: 'link',
		name: '其他链接',
		icon: getImg('link.png'),
		icon1: getImg('link1.png'),
		link: '',
		other: 'Other Links',
		children: [
			{
				key: 'YCWZ',
				name: '调达本部才望子',
				link: 'http://172.31.119.37/scripts/cbgrn/grn.exe/portal/index'
			},
			{
				key: 'GCDB',
				name: 'GCDB全球比价系统',
				link: 'http://10.219.11.13/gcdb/'
			},
			{
				key: 'DJ',
				name: '大金空调官方网站',
				link: 'https://www.daikin-china.com.cn'
			},
			{ key: 'CODE', name: '大金空调中国相关' }
		]
	},
	{
		key: 'phone',
		name: '紧急联络体制表',
		icon: getImg('phone.png'),
		icon1: getImg('phone1.png'),
		link: '',
		path: '/Home/phone'
		// children: [
		//     { key: 'inv', name: '邀请' },
		//     { key: 'visit', name: '拜访' },
		//   ]
	}
])

async function getDbTree() {
	const { data = [] } = await treeDbList({})
	Menus.value[3].children = data.map((item: any) => {
		return {
			key: 'DataBase',
			name: item.name,
			params: { id: item.id }
		}
	})
}

getDbTree()
let flag = false
function menuHandler(menu: any, index: number) {
	activeMenuKey.value = menu.key
	console.log(menu, index)
	if (menu.key === 'DataBase' && idx.value === index) {
		report({ moduleCode: 'App_Database' })
		push({ name: menu.key })
		return
	}
	idx.value = index
	console.log(menu.key, 'key')
	if (!menu.key) return
	// if (menu.key === 'DataBase') {
	// 	if (flag) {
	// 		push({ name: menu.key })
	// 		flag = false
	// 		return
	// 	}
	// 	flag = true
	// 	setTimeout(() => {
	// 		flag = false
	// 	}, 300)
	// }
	if (menu.children) return
	if (menu.key === 'DataBase') {
		report({ moduleCode: 'App_Database' })
	}
	push({ name: menu.key })
}
const shorm = ref(false)

const { path } = useRoute()
watchEffect(() => {
	setTimeout(() => {
		const index = Menus.value.findIndex((item: any) => item.path === path)
		if (index > -1 && idx.value !== index) {
			const menu = Menus.value[index]
			menuHandler(menu, index)
		}
	}, 0)
})
function goChild(menu: any) {
	activeItem = menu.key
	if (menu.key === 'CODE') {
		shorm.value = true
		return
	}
	if (menu.link) {
	} else {
		push({ name: menu.key, query: menu.params || {} })
	}
}
var activeItem = 0
</script>

<template>
	<div class="page w-1920px h-1080px p30px flex">
		<div class="w300px -mr-1px flex flex-col shrink-0 overflow-auto">
			<!-- @dblclick="toggle" -->
			<img src="@/assets/images/logo.png" class="w197px h44px mt14px" />
			<div class="text-20px text-#fff font-600 mt6px">
				大金中国调达本部 HOMEPAGE
			</div>

			<div
				class="mt34px w270px min-h80px rd-35px b-4px bg-#fff/16 b-4px b-solid b-#fff/23 overflow-hidden relative"
			>
				<Searchs></Searchs>
			</div>
			<div class="pt10px pb10px flex-1 max-h-636px">
				<div
					class="nav pl36px pr16px py24px m10px mr0 rd-32px rd-r-0 flex flex-col text-#fff cursor-pointer hover:underline"
					v-for="(m, index) in Menus"
					:key="m.key"
					:class="
						activeMenuKey === m.key ? (m.children ? 'actives' : 'active') : ''
					"
					@click="() => menuHandler(m, index)"
				>
					<div :class="activeMenuKey === m.key && 'onActive'">
						<img
							v-if="activeMenuKey === m.key"
							:src="m.icon1"
							class="w22px h22px mr16px mt--5px"
						/>
						<img v-else :src="m.icon" class="w22px h22px mr16px mt--5px" />
						<span
							class="text-22px font-900 leading-22px"
							:class="
								(m.key === 'link' || m.key === 'DataBase') &&
								'underline border-b-0px border-b-solid'
							"
						>
							<a v-if="m.link" class="no-underline text-#fff" :href="m.link">
								{{ m.name }}</a
							>
							<span v-else>
								<a
									v-if="m.key === 'link' || m.key === 'DataBase'"
									class="text-#fff"
								>
									{{ m.name }}</a
								>
								<span v-else>{{ m.name }}</span>
							</span>
							<span class="text-18px italic font-500" v-if="m.other">{{
								m.other
							}}</span>
						</span>
					</div>

					<div v-if="m.children && idx == index" class="pl40px">
						<div
							class="my16px pl30px text-#fff activeChildren text-20px"
							v-for="(item, ind) in m.children"
							:key="item.key"
							@click.stop="goChild(item)"
							@click="activeItem = ind"
						>
							<a
								v-if="item.link"
								class="no-underline !text-#fff flex"
								:href="item.link"
								><span
									class="w7px h7px rd-7px bg-#fff block mr-8px mt4px"
								></span
								>{{ item.name }}</a
							>
							<span v-else class="flex"
								><span
									class="w7px h7px rd-7px bg-#fff block mr-8px mt4px"
								></span
								>{{ item.name }}</span
							>
						</div>
					</div>
				</div>
			</div>
			<div
				class="w270px py14px my20px px24px flex rd-20px bg-#003cb7 hover:underline hover:cursor-pointer"
				style="box-shadow: 0 2rpx 14rpx 0 #00000069"
			>
				<div
					class="flex items-center text-18px"
					@click="push({ name: 'DataBase', query: { id: 267 } })"
				>
					<img
						src="@/assets/images/dianhhh@2x.png"
						class="w22px h22px mr10px"
					/>
					公司内线
				</div>
			</div>
			<n-popover
				v-if="false"
				trigger="hover"
				placement="top"
				:style="{ '--n-border-radius': '8px' }"
			>
				<template #trigger> </template>
				<div
					class="text-14px text-#285FE9 flex items-center hover:underline cursor-pointer"
				>
					<img
						src="@/assets/images/wjqq@2x.png"
						class="w14px h18px mr4px object-contain"
					/>
					<span>{{ '公司内线公司内线公司内线' }}</span>
				</div>
			</n-popover>
			<div
				class="p20px w270px rd-20px b-4px bg-#fff/4 b-4px b-solid b-#fff/23 text-14px relative"
			>
				<a
					href="http://172.31.119.37/scripts/cbgrn/grn.exe/portal/index"
					target="_blank"
					class="no-underline text-#fff"
				>
					<div class="flex items-center text-18px hover:underline">
						<img
							src="@/assets/images/icon-book.svg"
							class="w22px h22px mr10px"
						/>
						个人日程
					</div>
					<!-- <div class="mt18px">9:00-10:00</div>
        <div class="mt8px">召集部门成员召开项目启动会</div>
        <div class="mt16px">10:01-11:00</div>
        <div class="mt8px">召集部门成员召开项目启动会</div> -->
					<img
						src="@/assets/images/zhulj@2x.png"
						class="absolute w22px h22px mr10px top--15px right--20px"
					/>
				</a>
				<div
					class="mt10px ml-30px opacity-70"
					@click="(e) => e.stopPropagation()"
				>
					请点击上方链接登录cybouzu
				</div>
			</div>

			<!-- <div class="p20px w270px rd-20px b-4px bg-#fff/16 b-4px b-solid b-#fff/23 text-14px mt22px">
        <div class="flex items-center text-18px">
          <img src="@/assets/images/icon-memo.svg" class="w22px h22px mr10px" />
          memo
        </div>
        <div class="mt18px lh-24px">新年方针:领先时代的变化开创崭新的 未来</div>
      </div> -->
		</div>

		<div class="main flex-1 rd-32px p30px pb15px pt0px mt62px relative">
			<!-- <Home /> -->
			<RouterView />
		</div>
	</div>
	<div
		class="fixed bottom-4px text-#fff text-12px ml38px"
		style="margin: 0; width: 100%; text-align: center"
	>
		今日访问人数：{{
			store.user.appLoginToDayCount
		}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;累计访问人数：{{ store.user.appLoginCount }}
	</div>
	<NModal v-model:show="shorm" :mask-closable="false">
		<div class="w700px h430px bg-#fff rd-15px">
			<div
				class="py5px px15px"
				style="
					border-bottom: 1px solid #dadada;
					font-weight: bold;
					color: #494a63;
				"
			>
				大金空调中国相关
				<img
					@click="shorm = false"
					src="@/assets/images/chac@2x.png"
					class="w15px float-right mt5px mr5px"
				/>
			</div>
			<div class="flex mt70px text-center">
				<div class="w-full text-center">
					<img src="@/assets/images/ewm1@2x.png" class="w200px" />
					<div
						class="py10px bg-#377CFF text-#fff w200px rd-20px mt35px mx-auto"
					>
						大金空调中国视频号
					</div>
				</div>
				<div class="w-full">
					<img src="@/assets/images/ewm2@2x.png" class="w200px" />
					<div
						class="py10px bg-#377CFF text-#fff w200px rd-20px mt35px mx-auto"
					>
						大金空调抖音号
					</div>
				</div>
			</div>
		</div>
	</NModal>
</template>

<style scoped lang="less">
.page {
	font-family: 'PingFang SC';
	user-select: none;

	// background-image: url('@/assets/images/bg.jpg');
	// background-color: #000;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;

	line-height: 1;
}

.nav {
	position: relative;

	&::before {
		top: -48px;
	}
	.activeChildren:hover {
		a,
		span {
			text-decoration: underline;
		}
	}
	&::after {
		bottom: -49px;
		transform: rotate(-90deg);
	}

	&.active {
		color: #002fa7;
		background-color: #fff;
		a {
			color: #002fa7;
		}
		&::before,
		&::after {
			opacity: 1;
		}
	}
	&.actives {
		padding: 0px !important;
		color: #002fa7;
		background-color: rgba(255, 255, 255, 0.3);
		a {
			color: #002fa7;
		}
		&::before,
		&::after {
			opacity: 1;
		}
		.onActive {
			background-color: #fff;
			border-radius: 32px 0 0 32px;

			padding: 24px 16px 24px 36px;
		}
	}
}

.main {
	background-image: url('@/assets/images/bg-rs-main.svg');
	background-position: 0 0;
	background-repeat: repeat-x;
	background-size: auto;
}
&::-webkit-scrollbar {
	display: none;
	scrollbar-width: none;
}
</style>
