<template>
    <div class="swh">
        <div class="ptable">
            <div :style="{ '--borderc': colors.borderc }" class="theader">
                <div v-for="(it, i) in columns" class="hd" :key="i" :title="it.title" :style="{
                    width: it.width ? it.width + 'px' : 'auto',
                    flex: it.width ? 'none' : 1,
                }">
                    {{ it.title }} </div>
            </div>
            <div :style="{ '--thumbcolor': colors.thumbcolor }" class="tbody">
                <div v-for="(it, i) in dataSource" class="br" :key="i">
                    <div v-for="(   item, j   ) in columns" class="bd" :style="{
                        width: item.width ? item.width + 'px' : 'auto',
                        flex: item.width ? 'none' : 1,
                    }">
                        <div v-if="item.render" :key="j">{{ item.render(_, it) }}</div>
                        <div v-if="!item.render" :key="j" :title="it[item.key]">{{ it[item.key] }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    columns: {
        type: Object,
        default: []
    },
    dataSource: {
        type: Object,
        default: []
    },
    colors: {
        type: Object,
        default: {}
    },
})


</script>

<style lang="less" scoped>
.ptable {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    display: flex;
    flex-direction: column;

    .theader {
        background: transparent;
        color: #fff;
        background: var(--borderc);
        display: flex;
        overflow: hidden;
        flex-shrink: 0;
        width: 100%;

        .hd {
            padding: 4px;
            flex: 1;
            display: -webkit-box;
            //width: 100%;
            overflow: hidden;
            font-size: 14px !important;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            word-break: break-all;
        }
    }

    .tbody {
        flex: 1;
        overflow-y: auto;
        width: 100%;

        .br {
            display: flex;
            overflow: hidden;

            &:nth-child(odd) {
                background: transparent !important;
            }

            &:nth-child(even) {
                background: transparent !important;
            }

            .bd {
                flex: 1;
                padding: 4px;
                color: #fff;
                display: -webkit-box;
                //width: 100%;
                overflow: hidden;
                font-size: 14px !important;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                word-break: break-all;
            }
        }
    }

    .tbody::-webkit-scrollbar {
        /*滚动条整体样式*/

        width: 2px;
        /*高宽分别对应横竖滚动条的尺寸*/

        height: 4px;
    }

    .tbody::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/

        border-radius: 5px;

        -webkit-box-shadow: none;

        background: var(--thumbcolor);
    }

    .tbody::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: none;
        border-radius: 0;
        background: transparent;
    }
}
</style>
