<script setup>
import { vue3ScrollSeamless } from "vue3-scroll-seamless";
import Api from '@/api/index';
import { onMounted, reactive, ref } from 'vue'


let list = ref([]);

const classOptions = {
    limitMoveNum: 6,
};


onMounted(() => {
    init()
    setInterval(() => {
        init()
    }, 10000)
})


function init() {
    Api('/orderStats/realTimeData').then((res) => {
        list.value = res
    })
}

</script>

<template>
    <div class="demo">
        <!-- <vue3ScrollSeamless class="scroll-wrap" :classOptions="classOptions" :dataList="list"> -->
        <ul class="ui-wrap">
            <li class="li-item" v-for="(item, i) in (list.length > 6 ? list.splice(6, 4) : list)" :key="i">
                <div class="li-item-top">
                    <div class="li-item-top-yuan"></div>
                    {{ item.createTime }}
                </div>
                <div class="li-item-bottom">
                    <!-- <div>
                            {{ item.stationName }}
                        </div> -->
                    <div>
                        {{ item.phone }}
                    </div>
                    <div>
                        {{ item.amount }}元
                    </div>
                </div>
            </li>
        </ul>
        <!-- </vue3ScrollSeamless> -->
    </div>
</template>
<style lang="scss">
.demo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-wrap {
    height: 260px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 15px;
}

.ui-wrap {
    width: 100%;
    height: 260px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    overflow: hidden;
}

.li-item {
    width: 100%;
    margin-bottom: 3px;
    
    .li-item-top {
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 14px;

        .li-item-top-yuan {
            margin-right: 10px;
            width: 10px;
            height: 10px;
            border: 1px solid #00FFFF;
            border-radius: 50%;
        }
    }

    .li-item-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #84D1FF;
        font-size: 13px;
        padding-left: 20px;

        div:nth-child(2) {
            color: #1CFFAC;
        }
    }
}
</style>
