<template>
	<view class="home-notice-container flex-acenter" :style="{ 'background-image': themeStore.imageCssUrl.iconNoticeBg }">
		<theme-image class="notice-icon" src="@/static/icon-notice.png" mode="aspectFit"/>
		<view class="notice-text-view">
			<view id="noticeScroll" class="notice-scroll-view-container">
				<view id="noticeContent" v-html="pageData.text" class="notice-scroll-view" :style="{ 'transform': pageData.scrollTransform }"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref, onMounted, nextTick, onUnmounted, getCurrentInstance } from 'vue'
	import { requestRollMsg } from '@/api/home'
	import { useThemeStore } from '@/store/useThemeStore'
	
	const themeStore = useThemeStore()

	const props = defineProps({
		speed: {
			type: Number,
			default: 1.5
		}
	})
	
	const pageData = reactive({
		rollMsg: [],
		text: '',
		scrollTransform: '',
		timeInterval: null
	})
	
	onMounted(() => {
		getRoll()
	})
	
	onUnmounted(() => {
		if (pageData.timeInterval) {
			clearInterval(pageData.timeInterval)
			pageData.timeInterval = null
		}
	})
	
	const getRoll = async () => {
		const { code, data } = await requestRollMsg()
		if (code !== 200) { return }
		const rollMsg = data.msgList || []
		let text = `<span style="color:${themeStore.theme.text.normal}">`
		rollMsg.forEach((el) => {
			// if (el.msgType !== 1) { return }
			let msg = el.msgContent || ''
			msg = msg.replace(/<\/c>/g, '</span>')
			msg = msg.replace(/<color=/g, '<span style="color:')
			msg = msg.replace(/#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/g, '#$1"')
			msg = '<span style="margin-right: 20px;">'  + msg + '</span>'
			text = text + msg
		})
		text = text + '</span>'
		
		// text = text.replace(/<\/?.+?>/g, '')
		pageData.rollMsg = rollMsg
		pageData.text = text
		
		nextTick(() => {
			setTimeout(() => {
				startMove()
			}, 500);
		})
	}
	
	const startMove = () => {
		const instance = getCurrentInstance()
		
		uni.createSelectorQuery().select('#noticeContent').boundingClientRect((rect) => {
			if (!rect) { return }
			
			const noticeWidth = rect.width
			console.log(instance);
			
			uni.createSelectorQuery().in(instance).select('#noticeScroll').boundingClientRect((rect) => {
				if (!rect) { return }
				const scrollWidth = rect.width
					
				let distance = 0
				// pageData.scrollTransform = `translateX(${distance}px)`
				pageData.timeInterval = setInterval(() => {
					if (noticeWidth < Math.abs(distance)) {
						distance = scrollWidth
					}
					distance--
					pageData.scrollTransform = `translateX(${distance}px)`
				}, 20)
			}).exec()
		}).exec()
	}
</script>

<style lang="scss" scoped>
	.home-notice-container {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		font-size: 18rpx;
		height: 44rpx;
		position: relative;
		color: white;
		
		.notice-scroll-view-container {
			width: 100%;
			height: 44rpx;
			position: relative;
		}
		
		.notice-scroll-view {
			position: absolute;
			line-height: 44rpx;
			font-size: 20rpx;
			white-space: nowrap;
			text-align: left;
		}
		
		.notice-icon { 
			width: 34rpx;
			height: 30rpx;
			flex-shrink: 0;
		}
		
		.notice-text-view {
			flex: 1;
			margin-left: 10rpx;
			overflow: hidden;
			box-sizing: border-box;
		}
	}
</style>
