<template>
	<view class="box font-14">
		<!-- 特效礼物 -->
		<special :url="specialUrl"></special>
		<view class="chat">
			<view class="cavasation my-2" v-for="(item,index) in msgList" :key="index">
				<view class="person">
					<u-avatar :src="item.avatar" size="60"></u-avatar>
					<span class="ml-1">{{item.sendName}}</span>
				</view>
				<view class="content">
					<span class="text">{{item.text}}</span>
				</view>
			</view>
		</view>
		<view class="btn_gobottom" v-if="!auto_bottom" @click="go_bottom">
			<img src="../../static/images/go_bottom.png" alt="">
			返回底部
		</view>
	</view>
</template>

<script>
	import special from "@/components/footer/gift/special-effects/special.vue"
	export default {
		name: "chat",
		components: {
			special
		},
		props: {
			specialUrl: String,
			msgList: Array,
		},
		data() {
			return {
				scrollFalg: false,
				scrollTop: 0,
				auto_bottom: true,
			}
		},
		watch: {
			msgList() {
				this.scroll_msg()
			}
		},
		mounted() {
			document.querySelector('.chat').addEventListener('scroll', this.handleScroll)
		},
		methods: {
			//滚动窗口
			scroll_msg() {
				var scr_msg = document.querySelector('.chat')
				if (this.auto_bottom) {
					this.$nextTick(() => {
						scr_msg.scrollTo(0, scr_msg.scrollHeight)
					})
				}
			},
			//返回底部
			go_bottom() {
				var scr_msg = document.querySelector('.chat')
				this.$nextTick(() => {
					scr_msg.scrollTo(0, scr_msg.scrollHeight)
				})
				this.auto_bottom = true
			},
			//监听上滑
			handleScroll(e) {
				var scr_msg = document.querySelector('.chat')
				if (scr_msg.scrollTop < scr_msg.scrollHeight - 430) {
					this.auto_bottom = false
				}
				if (scr_msg.scrollTop > scr_msg.scrollHeight - 430) {
					this.auto_bottom = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ml-1 {
		margin-left: 10rpx;
	}

	.font-14 {
		font-size: 28rpx;
	}

	.my-2 {
		margin: 20rpx 0;
		padding-top: 10rpx;
	}

	.box {
		flex: 1;
		overflow: hidden;
	}

	.chat {
		box-sizing: border-box;
		height: calc(100vh - 500rpx);
		padding-bottom: 100rpx;
		letter-spacing: 2rpx;
		margin-left: 30rpx;
		overflow-y: scroll;

		.person {
			display: flex;
			align-items: center;
		}

		.content {
			line-height: 80rpx;
			margin-left: 80rpx;

			.text {
				display: inline-block;
				border-radius: 10rpx;
				padding: 0 24rpx;
				box-shadow: 5rpx 5rpx 10rpx #dedede;
			}
		}
	}

	.chat::-webkit-scrollbar {
		width: 0rpx;
	}

	.btn_gobottom {
		position: fixed;
		top: 64%;
		right: 0rpx;
		background-color: #FAFAFA;
		border-radius: 30rpx 0 0 30rpx;
		padding: 10rpx;
		font-size: 28rpx;
		img{
			width: 28rpx;
			vertical-align: middle;
			height: 28rpx;
			margin-right: 10rpx;
		}
	}
</style>
