<template>
    <div class="vgt-table">
        <input
            class="vgt-input"
            v-model="search"
            @input="$emit('on-search', { searchTerm: search })"
        >
        <div v-if="rows.length === 0">No data</div>
        <table v-else>
            <tbody>
                <tr v-for="(row, i) in rows" :key="i" :class="getRowClass(row)">
                    <td v-for="col in columns" :key="col.field">
                        <slot
                            name="table-row"
                            :row="Object.assign(row, { originalIndex: i })"
                            :column="{ field: col.field }"
                            :formattedRow="{ [col.field]: row[col.field] }"
                        ></slot>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    name: 'VueGoodTable',
    props: ['rows', 'columns', 'rowStyleClass'],
    data() {
        return {
            search: ''
        };
    },
    methods: {
        getRowClass(row) {
            if (typeof this.rowStyleClass === 'function') {
                return { [this.rowStyleClass(row)]: true };
            } else if (typeof this.rowStyleClass === 'string') {
                return { [this.rowStyleClass]: true };
            } else {
                return {};
            }
        }
    }
};
</script>
