<template>
	<!-- 悬浮按钮 -->
	<view v-if="pageCount == 1 || need" class="fixed-box" :style="{ height: fixBtnShow ? '330rpx' : '120rpx' }">
		<!-- <view class="btn-item" v-if="fixBtnShow" @click="$util.redirectTo('/pages/index/index')"> -->
		<!-- #ifdef MP-WEIXIN -->
		<!-- 微信小程序默认客服按钮 -->
		<button class="btn-item" v-if="fixBtnShow && useOfficialService" hoverClass="none" open-type="contact"
			sessionFrom="weapp" showMessageCard="true"
			:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }">
			<text class="icox icox-kefu" v-if="!kefuimg"></text>
		</button>
		
		<!-- 自定义客服按钮 -->
		<button class="btn-item" v-if="fixBtnShow && !useOfficialService" hoverClass="none" @click="contactServicer"
			: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 icon-xiala" v-if="fixBtnShow" @click="fixBtnShow ? (fixBtnShow = false) : (fixBtnShow = true)">
			<text class="iconfont icon-unfold"></text>
		</view>
		<view class="btn-item switch" v-else :class="{ show: fixBtnShow }"
			@click="fixBtnShow ? (fixBtnShow = false) : (fixBtnShow = true)">
			<view class="">快捷</view>
			<view>导航</view>
		</view> -->
	</view>
</template>

<script>
import { createCustomerService } from '@/common/js/customer-service.js';

export default {
	name: 'hover-nav',
	props: {
		need: {
			type: Boolean,
			default: false
		},
	},
	data() {
		return {
			pageCount: 0,
			fixBtnShow: true,
			tel: '',
			kefuimg: '',
			phoneimg: '',
			customerService: null, // 客服服务实例
			buttonConfig: null    // 按钮配置
		};
	},
	created() {
		this.kefuimg = this.$util.getDefaultImage().kefu
		this.phoneimg = this.$util.getDefaultImage().phone
		this.pageCount = getCurrentPages().length;

		// 初始化客服服务
		this.customerService = createCustomerService(this);
		this.buttonConfig = this.customerService.getButtonConfig();

		var that = this
		uni.getStorage({
			key: 'shopInfo',
			success(e) {
				that.tel = e.data.mobile
			}
		})
	},
	computed: {
		/**
		 * 是否使用官方客服
		 */
		useOfficialService() {
			if (!this.buttonConfig) return true;
			
			// #ifdef MP-WEIXIN
			// 如果是微信小程序，检查配置
			if (this.buttonConfig.type === 'weapp') {
				// 默认使用官方客服，除非明确设置为false
				return this.buttonConfig.useOfficial !== false;
			}
			// #endif
			
			return false;
		}
	},
	methods: {
		//拨打电话
		call() {
			uni.makePhoneCall({
				phoneNumber: this.tel + ''
			})
		},

		//处理客服点击事件
		contactServicer() {
			// 使用统一客服处理
			this.customerService.handleCustomerClick();
		}
	}
};
</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;
	// background: #fff;
	// box-shadow: 2rpx 2rpx 22rpx rgba(0, 0, 0, 0.3);
	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;
		text-align: center;
		flex-direction: column;
		line-height: 1;
		margin: 14rpx 0;
		transition: 0.1s;
		background: #fff;
		border-radius: 50rpx;
		width: 80rpx;
		height: 80rpx;
		padding: 0;

		text {
			font-size: 36rpx;
			font-weight: bold;
		}

		view {
			font-size: 26rpx;
			font-weight: bold;
		}

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

		&.switch {}

		&.icon-xiala {
			margin: 0;
			margin-top: 0.1rpx;
		}
	}
}
</style>