<template>
    <view class="global-table">
        <view class="table" :class="{ bordered }">
            <view class="thead">
                <view class="tr">
                    <text class="th" v-for="(column, index) in columns" :key="index" :style="getCellStyle(column)">
                        {{ column.title }}
                    </text>
                </view>
            </view>
            <view class="tbody">
                <view class="tr" v-for="(row, rowIndex) in data" :key="rowIndex">
                    <template v-for="(column, _index) in columns" :key="_index">
                        <text class="td" :style="getCellStyle(column)">
                            <slot :name="column.dataIndex" :row="row" :index="rowIndex">
                                {{ row[column.dataIndex] || '-' }}
                            </slot>
                        </text>
                    </template>
                </view>
                <view class="empty" v-if="!data || data?.length <= 0">
                    <global-empty></global-empty>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
const ps = defineProps({
    width: {
        type: Number,
        default: null
    },
    columns: {
        type: Array,
        default: () => []
    },
    data: {
        type: Array,
        default: () => []
    },
    bordered: {
        type: Boolean,
        default: true
    }
})
const getCellStyle = (column) => {
    return {
        width: column?.width ? `${column.width}rpx` : `${750 / ps.columns.length}rpx`,
        textAlign: column?.align || '',
        minWidth: column?.minWidth ? `${column.minWidth}rpx` : `${ps.width}rpx`
    }
}
</script>

<style lang="scss" scoped>
.global-table {
    background: #fff;
    overflow: auto;
    .tr {
        display: flex;
    }
    .th,
    .td {
        padding: 8px;
        text-align: left;
        color: $mocp-text-4;
        font-size: 24rpx;
        word-break: break-all;
    }
    .th {
        color: $mocp-text-3;
    }
    .table {
        &.bordered {
            border-bottom: 1px solid #e7e7e7;
            .th,
            .td {
                border-bottom: 1px solid #e7e7e7;
            }
        }
    }
    .empty {
        padding: 24rpx;
    }
}
</style>
