<template>
	<!-- 悬浮按钮 -->
	<view v-if="pageCount == 1 || need" class="fixed-box" :style="{ height: fixBtnShow ? '330rpx' : '120rpx' }">
		<!-- 客服按钮 -->
		<!-- #ifdef MP-WEIXIN -->
		<button class="btn-item" v-if="fixBtnShow" hoverClass="none" openType="contact" sessionFrom="weapp" showMessageCard="true" :style="{backgroundImage:'url('+(kefuimg?kefuimg:'')+')',backgroundSize:'100% 100%'}">
			<text class="icox icox-kefu" v-if="!kefuimg"></text>
		</button>
		<!-- #endif -->
		<!-- 电话按钮 -->
		<view class="btn-item" v-if="fixBtnShow" @click="call()"  :style="{backgroundImage:'url('+(phoneimg?phoneimg:'')+')',backgroundSize:'100% 100%'}">
			<text class="iconfont icon-dianhua" v-if="!phoneimg"></text>
		</view>
		<!-- 新增：语言切换按钮 -->
		<view class="btn-item" v-if="fixBtnShow" @click="switchLang" :style="{backgroundSize:'100% 100%'}">
			<text class="lang-text">{{ currentLang === 'zh-cn' ? 'EN' : '中文' }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'hover-nav',
		props: {
			need: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				pageCount: 0,
				fixBtnShow: true,
				tel:'',
				kefuimg:'',
				phoneimg:'',
				// 新增：当前语言（默认中文）
				currentLang: uni.getStorageSync('lang') || 'zh-cn'
			};
		},
		created() {
			this.kefuimg = this.$util.getDefaultImage().kefu
			this.phoneimg = this.$util.getDefaultImage().phone
			this.pageCount = getCurrentPages().length;
			var that = this
			uni.getStorage({
				key:'shopInfo',
				success(e){
					that.tel = e.data.mobile
				}
			})
			// 新增：监听全局语言切换事件，实时更新按钮文字
			uni.$on('lang-changed', (lang) => {
				this.currentLang = lang;
			})
		},
		methods: {
			//拨打电话
			call(){
				uni.makePhoneCall({
					phoneNumber:this.tel+''
				})
			},
			// 新增：语言切换核心方法
			switchLang() {
				// 1. 切换目标语言（中文↔英文）
				const targetLang = this.currentLang === 'zh-cn' ? 'en-us' : 'zh-cn';
				// 2. 保存到本地存储（全局生效）
				uni.setStorageSync('lang', targetLang);
				// 3. 触发全局语言事件（通知其他页面更新）
				uni.$emit('lang-changed', targetLang);
				// 4. 延迟重启当前页面（避免白屏，保证语言生效）
				setTimeout(() => {
					const pages = getCurrentPages();
					const currentPage = pages[pages.length - 1];
					uni.reLaunch({ url: '/' + currentPage.route });
				}, 300);
			}
		},
		// 新增：页面销毁时移除监听，避免内存泄漏
		beforeDestroy() {
			uni.$off('lang-changed');
		}
	};
</script>

<style lang="scss">
	.container-box {
		width: 100%;

		.item-wrap {
			border-radius: 10rpx;

			.image-box {
				border-radius: 10rpx;
			}

			image {
				width: 100%;
				height: auto;
				border-radius: 10rpx;
				will-change: transform;
			}
		}
	}

	//悬浮按钮（容器样式保持原始不变，确保按钮不消失）
	.fixed-box {
		position: fixed;
		right: 0rpx;
		bottom: 200rpx;
		z-index: 10;
		border-radius: 120rpx;
		padding: 20rpx 0;
		display: flex;
		justify-content: center;
		flex-direction: column;
		width: 100rpx;
		box-sizing: border-box;
		transition: 0.3s;
		overflow: hidden;

		.btn-item {
			display: flex;
			justify-content: center;
			align-items: center; // 新增：垂直居中，和其他按钮对齐
			text-align: center;
			flex-direction: column;
			line-height: 1;
			margin: 14rpx 0;
			transition: 0.1s;
			// ========== 修改1：按钮背景改为纯红色（红底） ==========
			background: #E60012; 
			border-radius: 50rpx;
			width: 80rpx;
			height: 80rpx;
			padding: 0;
			text {
				font-size: 36rpx;
				font-weight: bold;
				// ========== 修改2：图标文字改为白色（白字） ==========
				color: #FFFFFF; 
			}
			// 新增：语言按钮文字样式
			.lang-text {
				font-size: 24rpx; // 适配圆形按钮大小
				font-weight: 600;
				// ========== 修改3：语言按钮文字改为白色 ==========
				color: #FFFFFF; 
			}

			view {
				font-size: 26rpx;
				font-weight: bold;
				// ========== 兜底：确保所有文字都是白色 ==========
				color: #FFFFFF; 
			}

			&.show {
				transform: rotate(180deg);
			}

			&.switch {}

			&.icon-xiala {
				margin: 0;
				margin-top: 0.1rpx;
			}

			// ========== 新增：按钮点击交互效果 ==========
			&:active {
				background: #C4000F; // 红色轻微加深
				transform: scale(0.95); // 按钮小幅度缩小
			}
		}
	}
</style>