<template>
	<view class="floating-service-card" @click="handleClick">
		<view class="service-left">
			<image class="service-icon" src="/static/link.png" mode="aspectFit"></image>
			<view class="service-content">
				<text class="service-title">需要帮助？</text>
				<text class="service-desc">专属客服在线解答</text>
			</view>
		</view>
		<view class="service-btn">立即联系</view>
	</view>
</template>

<script setup>
	const emit = defineEmits(['tap']);

	const handleClick = () => {
		emit('tap');
	};
</script>

<style scoped lang="scss">
	.floating-service-card {
		position: fixed;
		bottom: 20rpx;
		left: 20rpx;
		right: 20rpx;
		height: 120rpx;
		background: #fff;
		border-radius: 60rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx 0 24rpx;
		z-index: 1000;
	}

	.service-left {
		display: flex;
		align-items: center;
		gap: 20rpx;

		.service-icon {
			width: 60rpx;
			height: 60rpx;
		}

		.service-content {
			display: flex;
			flex-direction: column;
			gap: 4rpx;

			.service-title {
				font-size: 28rpx;
				font-weight: 600;
				color: var(--text-primary);
			}

			.service-desc {
				font-size: 22rpx;
				color: var(--text-tertiary);
			}
		}
	}

	.service-btn {
		padding: 16rpx 32rpx;
		background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
		color: #fff;
		font-size: 26rpx;
		font-weight: 600;
		border-radius: 40rpx;
	}
</style>