<template>
	<view>
		<b-navbar toggleable="lg" type="dark" class="b-navbar">
			<b-navbar-brand :title="$t('hdk.gohome')" href="/mobile">
				<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="collapseR">
				<b-navbar-nav>
					<b-nav-item v-show="!isHome && !$isMobile" @click="handleClick(0)"
						:class="{ 'activeCSS': selectedNavItem === 0 }">
						{{$t('hdk.productInformation')}}
					</b-nav-item>
					<b-nav-item v-show="!isHome && !$isMobile" @click="handleClick(1)"
						:class="{ 'activeCSS': selectedNavItem === 1 }">
						{{$t('hdk.inspectionInformation')}}
					</b-nav-item>
					<b-nav-item v-show="!isHome && !$isMobile" @click="handleClick(2)"
						:class="{ 'activeCSS': selectedNavItem === 2 }">
						{{$t('hdk.attachmentInformation')}}
					</b-nav-item>
					<b-nav-item-dropdown :text="selectedLanguage" right>
						<template #button-content>
							<img src="@/static/images/icon/language.png" width="17px" height="17px" alt="Kitten"
								style="margin:2px 2px 5px 2px;">
							<text>{{selectedLanguage}}</text>
						</template>
						<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-collapse>
		</b-navbar>
	</view>
</template>

<script>
	import {
		getIp,
		getIpToCountry
	} from '@/api/ip.js'
	export default {
		data() {
			return {
				selectedLanguage: this.$t('index.language'),
				selectedNavItem: 0
			}
		},
		props: {
			isHome: {
				type: Boolean,
				default: true
			},
		},
		async created() {
			// try {
			// 	const response = await uni.request({
			// 		url: 'https://ipinfo.io/ip',
			// 		method: 'GET'
			// 	});
			// 	this.userIP = response[1].data.trim();
			// 	console.log("ip地址",this.userIP);
			// 	// if(this.userIP){
			// 	// 	let result = await getIpToCountry(this.userIP);
			// 	// 	console.log(result);
			// 	// }
			// } catch (error) {
			// 	console.error('Error getting IP:', error);
			// 	this.userIP = 'Error';
			// }
		},
		async mounted() {
			var url = window.location.href;
			var lang = this.getQueryString('lang');
			let that = this;
			console.log("地址携带语种", lang);
			if (lang) {
				if (lang === "zh") {
					that.$i18n.locale = 'zh-Hans';
					uni.setLocale('zh-Hans');
					that.selectedLanguage = `${that.$t('index.language')}:${that.$t('locale.zh-hans')}`;
				} else if (lang === "en") {
					that.$i18n.locale = 'en';
					uni.setLocale('en');
					that.selectedLanguage = `${that.$t('index.language')}:${that.$t('locale.en')}`;
				} else {
					let Localelang = 'en';
					console.log("本地语言", Localelang);
					that.selectedLanguage = Localelang == 'en' ?
						`${that.$t('index.language')}:${that.$t('locale.en')}` :
						`${that.$t('index.language')}:${that.$t('locale.zh-hans')}`
				}
				that.$emit('lanChange', uni.getLocale())
			} else {
				// 地址未携带则
				const Choice = sessionStorage.getItem('Choice');
				console.log("是否已选择",Choice);
				if(!Choice){
					const response = await uni.request({
						url: 'https://ipinfo.io/ip',
						method: 'GET'
					});
					this.userIP = response[1].data.trim();
					let result = await getIpToCountry(that.userIP); //1.208.112.0 外国ip地址测试
					if (result) {
						if (result && result.country === 'CN') {
							console.log("CN");
							that.$i18n.locale = 'zh-Hans';
							uni.setLocale('zh-Hans');
							that.selectedLanguage = `${that.$t('index.language')}:${that.$t('locale.zh-hans')}`;
						} else {
							console.log("EN");
							that.$i18n.locale = 'en';
							uni.setLocale('en');
							that.selectedLanguage = `${that.$t('index.language')}:${that.$t('locale.en')}`;
						}
					}
					that.$emit('lanChange', uni.getLocale())
				}
			}
		},
		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')}`;
				}
				sessionStorage.setItem('Choice', 'true');
				this.$emit('lanChange', uni.getLocale())
			}
		}
	}
</script>

<style scoped lang="scss">
	.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;
		display: flex;
	}

	/* PC端样式 */
	@media screen and (min-width: 768px) {
		.b-navbar {
			padding: 0 10%;
			height: 50px;
		}

		.navbar-nav {
			height: 100%;
		}

		.nav-item {
			padding: 0 20px;
		}

		.collapseR {
			width: 100%;
			height: 100%;
			line-height: 30px !important;
			justify-content: flex-end;
		}
	}

	/* 移动端样式 */
	@media screen and (max-width: 767px) {
		.nav-item {
			padding-left: 10px;
		}
	}

	.activeCSS {
		.nav-link {
			color: #000;
		}

		background: #fff;
	}



	.b-navCss {
		color: #fff;
	}
</style>