<template>
	<view class="chat-dock" :style="{ bottom: safeBottom + 'px' }">
		<scroll-view scroll-y class="chat-scroll" :scroll-into-view="scrollAnchor">
			<view
				v-for="item in lines"
				:id="'line-' + item.id"
				:key="item.id"
				class="chat-row"
			>
				<text class="chat-user">{{ item.user }}：</text>
				<text class="chat-text">{{ item.text }}</text>
			</view>
		</scroll-view>
		<view v-if="interactive" class="chat-input-row">
			<input
				v-model="draft"
				class="chat-input"
				confirm-type="send"
				placeholder="说点什么…"
				placeholder-class="chat-ph"
				@confirm="submit"
			/>
			<view class="chat-like" @tap="$emit('like')">
				<text>♥ {{ likes }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ChatDock',
	props: {
		lines: { type: Array, default: () => [] },
		likes: { type: Number, default: 0 },
		safeBottom: { type: Number, default: 0 },
		interactive: { type: Boolean, default: true }
	},
	data() {
		return { draft: '' }
	},
	computed: {
		scrollAnchor() {
			const last = this.lines[this.lines.length - 1]
			return last ? `line-${last.id}` : ''
		}
	},
	methods: {
		submit() {
			const text = (this.draft || '').trim()
			if (!text) return
			this.$emit('send', text)
			this.draft = ''
		}
	}
}
</script>

<style scoped>
.chat-dock {
	position: absolute;
	left: 24rpx;
	right: 24rpx;
	z-index: 15;
	width: 72%;
}
.chat-scroll {
	max-height: 360rpx;
	margin-bottom: 16rpx;
}
.chat-row {
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 8rpx;
	padding: 8rpx 16rpx;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 12rpx;
}
.chat-user {
	color: #7ec8ff;
	font-size: 24rpx;
}
.chat-text {
	color: #fff;
	font-size: 24rpx;
}
.chat-input-row {
	flex-direction: row;
	align-items: center;
}
.chat-input {
	flex: 1;
	height: 72rpx;
	background: rgba(0, 0, 0, 0.45);
	border-radius: 999rpx;
	padding: 0 28rpx;
	color: #fff;
	font-size: 26rpx;
}
.chat-ph {
	color: rgba(255, 255, 255, 0.6);
}
.chat-like {
	margin-left: 16rpx;
	padding: 16rpx 24rpx;
	background: rgba(0, 0, 0, 0.45);
	border-radius: 999rpx;
}
.chat-like text {
	color: #ff6b8a;
	font-size: 26rpx;
}
</style>
