<template>
    <div class="app-list">
        <table class="app-list__table" cellspacing="0" cellpadding="0">
            <!-- <colgroup>
                <col :width="colWidth" v-for="i in columns.length" :key="i" />
            </colgroup> -->
            <thead>
                <tr class="app-list__row">
                    <th class="app-list__column" v-for="(column, i) in columns" :key="i">
                        <div class="app-list__cell">{{ column.label }}</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <template v-for="(row, i) in dataList" :key="i">
                    <tr class="app-list__row" @click="onClick(row, i)">
                        <td class="app-list__column" :class="column.className" v-for="(column, n) in columns"
                            :key="i + n.toString()">
                            <div class="app-list__cell">
                                <slot :name="column.prop" :value="row[column.prop]" :row="row">{{ row[column.prop] }}
                                </slot>
                            </div>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'

defineProps({
    dataList: {
        type: Array,
        required: true,
    },
    columns: {
        type: Array as PropType<Model.TableColumn[]>,
        required: true,
    },
})

const emit = defineEmits(['click'])
//const colWidth = computed(() => (100 / props.columns.length) + '%')

const onClick = (row: unknown, index: number) => {
    emit('click', row, index)
}
</script>

<style lang="less">
@import './index.less';
</style>