<template>
	<div class="scroll-txt-box"
		:style="{
			'--box-width': boxWidth.includes('px') || boxWidth.includes('%') ? boxWidth : `${boxWidth}px`,
			'--scroll-speed': speed,
			'--margin-left': txtMargin.includes('px') ? txtMargin : txtMargin.includes('%') ? `${+txtMargin.replace('%', '') / 100 * $el.clientWidth}px` : `${txtMargin}px`
		}"
		:value="value"
		:change:value="scrollTxtBox.updateScrollTxt"
	>
		<span class="txt-content">{{ scrollTxt }}</span>
	</div>
</template>

<script>
	export default {
		name:"k-scroll",
		props: {
			// 滚动文字内容
			text: String,
			// 速度（eg：55px/s）
			speed: {
				type: Number,
				default: 45
			}, 
			// 首尾间距（50 | 50px | 50%）
			margin: {
				type: [Number, String],
				default: 50
			},
			// 停顿时间 （3s）
			pause: {
				type: [Number],
				default: 3
			},
			// 组件宽度 (默认：100% | ~px | ~)
			width: {
				type: [String, Number],
				default: '100%'
			} , 
		},
		data() {
			return {
				value: {}
			};
		},
		computed: {
 			scrollTxt() {
				return this.text
			},
			boxWidth() {
				return String(this.width);
			},
			txtMargin() {
				return String(this.margin);
			},
		},
		mounted() {
			this.value = {
				speed: this.speed, // 速度（eg：45px/s）
				margin: this.margin,// 首尾间距（50 | 50px | 50%）
				pause: this.pause // 停顿时间 （3s）
			}
			// this.init()
		},
		methods: {
			init() {
				// #ifdef H5
				let element = document.querySelector('.scroll-txt-box')
				let child = element.children[0]
				if(child.clientWidth > element.clientWidth) {
					let margin = String(this.margin)
					margin = margin.includes('px') ? margin : margin.includes('%') ? `${+margin.replace('%', '') / 100 * element.clientWidth}px` : `${margin}px`
					let childCopy = child.cloneNode(true)
					element.appendChild(childCopy)
					childCopy.style['margin-left'] = margin
					let time = (child.clientWidth / this.speed) + this.pause
					child.style.animation = `scroll_txt ${time}s infinite linear`
					childCopy.style.animation = `scroll_txt ${time}s infinite linear`
					document.styleSheets[0].insertRule(
						`@keyframes scroll_txt {
							0%,
							${this.pause / time * 100}% { 
								transform: translateX(0%);
							}
							100% {
								transform: translate(calc(-100% - ${margin}));
							}
						}`
					)
				}
				// #endif
			}
		}
	}
</script>

<!-- #ifdef APP-PLUS -->
<script module="scrollTxtBox" lang="renderjs">
	export default {
		data() {
			return {
				marginVal: 50,
				speedVal: 45,
				pauseVal: 3,
				element: null
			}
		},
		mounted() {
			this.element = document.querySelector('.scroll-txt-box')
		},
		methods: {
			initData() {
				let child = this.element.children[0]
				if(child.clientWidth > this.element.clientWidth) {
					let margin = String(this.marginVal)
					margin = margin.includes('px') ? margin : margin.includes('%') ? `${+margin.replace('%', '') / 100 * this.element.clientWidth}px` : `${margin}px`
					let childCopy = child.cloneNode(true)
					this.element.appendChild(childCopy)
					childCopy.style['margin-left'] = margin
					let time = (child.clientWidth / this.speedVal) + this.pauseVal
					child.style.animation = `scroll_txt ${time}s infinite linear`
					childCopy.style.animation = `scroll_txt ${time}s infinite linear`
					document.styleSheets[0].insertRule(
						`@keyframes scroll_txt {
							0%,
							${this.pauseVal / time * 100}% { 
								transform: translateX(0%);
							}
							100% {
								transform: translate(calc(-100% - ${margin}));
							}
						}`
					)
				}
			},
			updateScrollTxt(newValue) {
				if(newValue.speed) {
					this.marginVal = newValue.margin
					this.speedVal = newValue.speed
					this.pauseVal = newValue.pause
					this.initData()
				}
			}
		},
	}
	
</script>
<!-- #endif -->


<style scoped lang="scss">
	.scroll-txt-box {
		width: var(--box-width);
		overflow: hidden;
		display: flex;
		align-items: center;
		.txt-content {
			width: fit-content;
			white-space: nowrap;
		}
	}
</style>