<template>
    <div class="scroll-panel">
        <div class="title">
            <span class="item item1">序号</span>
            <span class="item item2">民族</span>
            <span class="item item3">人数(人)</span>
            <span class="item item4">占有率(%)</span>
        </div>
        <div class="scroll">
            <vue3-seamless-scroll :list="props.data" :step="0.5" :hover="true">
                <div class="line" v-for="(item, index) in props.data" :key="item" @click="onClick(index, item)">
                    <span class="item item1">{{ index + 1 }}</span>
                    <span class="item item2">{{ item.name }}</span>
                    <span class="item item3">{{ item.value }}</span>
                    <span class="item item4">{{ item.percent }}</span>
                </div>
            </vue3-seamless-scroll>
        </div>
        
    </div>
</template>

<script setup>
import { reactive, defineProps, defineEmits } from 'vue';
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

const emits = defineEmits(['click']);

const props = defineProps({
    data: {
        type: Array,
        default: []
    }
})

const onClick = (index, item) => {
    item.index = index;
    emits('click', item);
}

</script>

<style lang="stylus" scoped>
.scroll-panel
    width 400px
    height 200px
    font-size 14px
    .title
        .item
            display inline-block
            text-align center
        .item1
            width 60px
        .item2
            width 140px
        .item3
            width 100px
        .item4
            width 100px
    
    .scroll
        height 180px
        overflow hidden
        .line
            cursor pointer
            height 30px
            line-height 30px
            padding 5px 0
            .item
                display inline-block
                text-align center
                overflow hidden
                text-overflow ellipsis
                white-space nowrap
                
            .item1
                width 60px
            .item2
                width 140px
            .item3
                width 100px
            .item4
                width 100px
            &:nth-child(n)
                background-color rgba(4, 30, 65, 1)
            &:nth-child(2n)
                background-color rgba(4, 30, 65, 0.5)
</style>