<template>
	<view class="chat-side-fab-root">
		<view
			class="chat-side-fab-wrap"
			:class="{ 'chat-side-fab-wrap--open': expanded }"
			:style="{ bottom: bottom + 'px' }"
		>
			<view class="chat-side-fab-menu" :class="{ 'chat-side-fab-menu--open': expanded }">
				<view
					class="chat-side-fab-item guide-target guide-target--sidebar"
					@tap.stop="onMenuByIndex(0)"
				>
					<text class="chat-side-fab-item__icon">☰</text>
					<text class="chat-side-fab-item__label">会话</text>
				</view>
				<view
					class="chat-side-fab-item guide-target guide-target--new-chat"
					@tap.stop="onMenuByIndex(1)"
				>
					<text class="chat-side-fab-item__icon">＋</text>
					<text class="chat-side-fab-item__label">新对话</text>
				</view>
				<view class="chat-side-fab-divider" />
			</view>

			<view
				class="chat-side-fab-main"
				:class="{ 'chat-side-fab-main--open': expanded }"
				@touchstart="onTouchStart"
				@touchmove.stop.prevent="onTouchMove"
				@touchend="onTouchEnd"
			>
				<text class="chat-side-fab-main__icon">{{ expanded ? '×' : '✦' }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'FeChatSideFab',
	data() {
		return {
			bottom: 0,
			expanded: false,
			dragging: false,
			touchStartY: 0,
			startBottom: 0,
			moved: false
		}
	},
	mounted() {
		this.initPosition()
	},
	methods: {
		initPosition() {
			// 默认贴在右下角（紧贴底部操作栏上方）
			this.bottom = this.getBounds().min
		},
		/** bottom 越大越靠上；min/max 为距屏幕底的距离 */
		getBounds() {
			const sys = uni.getSystemInfoSync()
			const insetBottom = (sys.safeAreaInsets && sys.safeAreaInsets.bottom) || 0
			const footerH = uni.upx2px(128 + 112) + insetBottom
			const mainH = uni.upx2px(96)
			const menuH = this.expanded ? uni.upx2px(220) : 0
			const winH = sys.windowHeight || 600
			return {
				min: footerH + uni.upx2px(24),
				max: winH - uni.upx2px(24) - mainH - menuH
			}
		},
		clampBottom(value) {
			const { min, max } = this.getBounds()
			const lo = Math.min(min, max)
			const hi = Math.max(min, max)
			return Math.max(lo, Math.min(hi, value))
		},
		onTouchStart(e) {
			this.dragging = true
			this.moved = false
			this.touchStartY = e.touches[0].clientY
			this.startBottom = this.bottom
		},
		onTouchMove(e) {
			if (!this.dragging) return
			const dy = e.touches[0].clientY - this.touchStartY
			if (Math.abs(dy) > 4) {
				this.moved = true
				if (this.expanded) this.expanded = false
			}
			// 手指上移 → bottom 增大
			this.bottom = this.clampBottom(this.startBottom - dy)
		},
		onTouchEnd() {
			this.dragging = false
			this.bottom = this.clampBottom(this.bottom)
			if (!this.moved) {
				this.expanded = !this.expanded
				this.$nextTick(() => {
					this.bottom = this.clampBottom(this.bottom)
				})
			}
		},
		onMenuByIndex(idx) {
			this.expanded = false
			if (idx === 0) this.$emit('sessions')
			else if (idx === 1) this.$emit('new-chat')
		},
		collapse() {
			this.expanded = false
		}
	}
}
</script>

<style lang="scss" scoped>
.chat-side-fab-root {
	position: relative;
	z-index: 80;
}

.chat-side-fab-wrap {
	position: fixed;
	right: 16rpx;
	z-index: 81;
	width: 96rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 48rpx;
	transition: background 0.18s ease, box-shadow 0.18s ease, padding 0.18s ease;
}

/* 展开：白底圆角柱包住菜单+主钮，看起来是一整块 */
.chat-side-fab-wrap--open {
	width: 96rpx;
	padding: 12rpx 8rpx 8rpx;
	background: #ffffff;
	box-shadow: 0 12rpx 36rpx rgba(15, 23, 42, 0.16);
	border: 1rpx solid $fe-border-light;
}

.chat-side-fab-menu {
	width: 100%;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(12rpx);
	pointer-events: none;
	transition: max-height 0.2s ease, opacity 0.18s ease, transform 0.18s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
}

.chat-side-fab-menu--open {
	max-height: 280rpx;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	margin-bottom: 8rpx;
}

.chat-side-fab-item {
	width: 80rpx;
	padding: 12rpx 0 10rpx;
	border-radius: 20rpx;
	background: $fe-primary-bg;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rpx;
}

.chat-side-fab-item__icon {
	font-size: 28rpx;
	line-height: 1;
	color: $fe-primary;
	font-weight: 600;
}

.chat-side-fab-item__label {
	font-size: 18rpx;
	color: $fe-gray-600;
	line-height: 1.2;
}

.chat-side-fab-divider {
	width: 40rpx;
	height: 2rpx;
	margin-top: 4rpx;
	background: $fe-border-light;
	border-radius: 2rpx;
}

.chat-side-fab-main {
	width: 96rpx;
	height: 96rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, $fe-primary, $fe-secondary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10rpx 28rpx rgba(124, 58, 237, 0.35);
	flex-shrink: 0;
}

.chat-side-fab-main--open {
	width: 80rpx;
	height: 80rpx;
	background: $fe-gray-100;
	color: $fe-gray-500;
	box-shadow: none;
}

.chat-side-fab-main__icon {
	font-size: 40rpx;
	line-height: 1;
	font-weight: 500;
}
</style>
