<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> -->
            <swiper :disable-touch="true" :indicator-dots="false" autoplay circular vertical class="roll-swiper" :interval="2500" :duration="800">
                <swiper-item v-for="(item, index) in rollMsg" :key="index">
                    <view class="sw-text" :style="{ color: themeStore.theme.light }">{{ item }}</view>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, onUnmounted } from 'vue'
import { useThemeStore } from '@/store/useThemeStore'
import { getLotteryMsgApi } from '@/api/promo'

const themeStore = useThemeStore()
const timer = ref(null)
// const props = defineProps({
//     speed: {
//         type: Number,
//         default: 1.5
//     },
//     rollMsg: {
//         type: Array,
//         default: () => ([])
//     }
// })

// const pageData = reactive({
//     text: '',
//     scrollTransform: '',
//     timeInterval: null
// })
const rollMsg = ref([])
onMounted(() => {
    getRoll()
    timer.value = setInterval(() => {
        getRoll()
    }, 1000 * 60 * 5)
})
onUnmounted(() => {
    clearInterval(timer.value)
})

// onUnmounted(() => {
//     if (pageData.timeInterval) {
//         clearInterval(pageData.timeInterval)
//         pageData.timeInterval = null
//     }
// })

const getRoll = () => {
    getLotteryMsgApi().then(({data}) => {
        rollMsg.value = data
    })

    // if (props.rollMsg && props.rollMsg?.length > 0) {
    //     return ''
    // }
    // let text = `<span style="color:${themeStore.theme.text.normal}">`
    // props.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.text = text

    // nextTick(() => {
    //     setTimeout(() => {
    //         startMove()
    //     }, 200);
    // })
}

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)`
            }, 16.6)
        }).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;

        .roll-swiper {
            height: 44rpx;

            .sw-text {
                line-height: 44rpx;
                padding-left: 20rpx;
                font-family: Roboto;
                font-weight: 400;
                font-size: 25rpx;
                color: #FFFFFF;
            }
        }
    }
}
</style>
