<template>
	<view>
		<b-navbar toggleable="lg" type="dark" class="b-navbar">
			<b-navbar-brand :title="$t('hdk.gohome')" href="/hdk-web">
				<img src="@/static/hdk-top-logo.png" width="63px" height="32px" style="margin-left: 10px;" alt="Kitten">
			</b-navbar-brand>
			<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
			<b-collapse id="nav-collapse" is-nav class="p-2">
				<!-- <b-navbar-nav>
		        <b-nav-item href="#">Link</b-nav-item>
		        <b-nav-item href="#" disabled>Disabled</b-nav-item>
		      </b-navbar-nav> -->

				<!-- Right aligned nav items -->
				<b-navbar-nav class="ml-auto">
					<b-navbar-nav class="b-navbar">
						<b-nav-item v-show="!isHome" @click="handleClick('productInformation')"
							:class="{ 'activeCSS': selectedNavItem === 'productInformation' }">{{$t('hdk.productInformation')}}</b-nav-item>
						<b-nav-item v-show="!isHome" @click="handleClick('inspectionInformation')"
							:class="{ 'activeCSS': selectedNavItem === 'inspectionInformation' }">{{$t('hdk.inspectionInformation')}}</b-nav-item>
						<b-nav-item v-show="!isHome" @click="handleClick('attachmentInformation')"
							:class="{ 'activeCSS': selectedNavItem === 'attachmentInformation' }">{{$t('hdk.attachmentInformation')}}</b-nav-item>
						<b-nav-item-dropdown :text="selectedLanguage" right>
							<b-dropdown-item href="#"
								@click="changeLanguage('en')">{{$t('locale.en')}}</b-dropdown-item>
							<b-dropdown-item href="#"
								@click="changeLanguage('zh-hans')">{{$t('locale.zh-hans')}}</b-dropdown-item>
						</b-nav-item-dropdown>
					</b-navbar-nav>


				</b-navbar-nav>
			</b-collapse>
		</b-navbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedLanguage: this.$t('index.language'),
				selectedNavItem: 'productInformation'
			}
		},
		props: {
			isHome: {
				type: Boolean,
				default: true
			},
		},
		mounted() {
			var url = window.location.href;
			var lang = this.getQueryString('lang');
			console.log("地址携带语种", lang);
			if (lang === "zh") {
				this.$i18n.locale = 'zh-Hans';
				uni.setLocale('zh-Hans');
				this.selectedLanguage = `${this.$t('index.language')}:${this.$t('locale.zh-hans')}`;
			} else if (lang === "en") {
				this.$i18n.locale = 'en';
				uni.setLocale('en');
				this.selectedLanguage = `${this.$t('index.language')}:${this.$t('locale.en')}`;
			} else {
				let Localelang = uni.getLocale();
				console.log("本地语言", Localelang);
				this.selectedLanguage = Localelang == 'en' ? `${this.$t('index.language')}:${this.$t('locale.en')}` :
					`${this.$t('index.language')}:${this.$t('locale.zh-hans')}`
			}
		},
		methods: {
			getQueryString(key) {
				const url = new URL(decodeURIComponent(location.href));
				return url.searchParams.get(key);
			},
			handleClick(item) {
				this.selectedNavItem = item;
				this.$emit('item-click', item);
			},
			changeLanguage(locale) {
				console.log('切换语言为:', locale);
				// 更新选择的语言
				if (locale === 'en') {
					this.$i18n.locale = 'en';
					uni.setLocale('en');
					this.selectedLanguage = `${this.$t('index.language')}:${this.$t('locale.en')}`;
				} else if (locale === 'zh-hans') {
					this.$i18n.locale = 'zh-Hans';
					uni.setLocale('zh-Hans');
					this.selectedLanguage = `${this.$t('index.language')}:${this.$t('locale.zh-hans')}`;
				}
			}
		}
	}
</script>

<style>
	.uni-top-window {
		padding: 0 15px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		border-bottom: 1px solid #e1e1e1;
		background-color: #00AEAA;
		color: #333;
	}

	.b-navbar {
		width: 100vw;
		background-color: #00AEAA;
	}

	.nav-items {
		background: #000;
	}

	.b-navCss {
		color: #fff;
	}

	#nav-collapse {
		height: 100%;
	}

	.activeCSS {
		/* background: rgba(255, 255, 255, 0.5); */
		/* color: #000 !important; */

	}
</style>