(function(){

Vue.component('ln-table',{
    model: {
        prop: 'selectedRowIndex',
        event: 'select'
    },
    props: {
        columns: {
            type: Object,
            required: true,
        },
        rows: {
            type: Array,
            required: true,
        },
        selectedRowIndex: {
            type: Number,
            default: -1,
        },
    },
    computed: {
        selectedrow: {
            get: function(){
                return this.selectedRowIndex == -1 ? null : this.currentRows()[this.selectedRowIndex];
            },
            set: function(row){
                let cr = this.currentRows();
                for (let n=0;n<cr.length;n++)
                {
                    let r = cr[n];
                    if (r===row)
                    {
                        console.log(n);
                        this.selectRow(n);
                    }
                }
                console.log('selectedrow: row not found!');
                console.log(row);
            }
        }
    },
    data: function(){
        return {};
    },
    methods: {
        row: function(rowIndex){
            return rowIndex == -1 ? null : this.currentRows()[rowIndex];
        },
        currentRows: function(){
            return this.rows;
        },
        selectRow: function(rowIndex){
            this.selectedRowIndex = rowIndex; //this.selectedrow === row ? null: row;
            this.$emit('select', this.selectedRowIndex);
            this.$emit('selectrow', this.selectedrow);
        },
        click: function(ev,rowIndex,columnKey){
            ev.preventDefault();
            this.selectRow(rowIndex);
            this.emit('click', rowIndex, columnKey);
        },
        dblclick: function(ev,rowIndex, columnKey){
            ev.preventDefault();
            this.emit('dblclick', rowIndex, columnKey);
        },
        emit: function(signal,rowIndex,columnKey){
            this.$emit(signal, { table: null, rowIndex, columnKey, row: this.row(rowIndex), });
        },
    },
    template: `
<table class="ln-table">
    <thead>
        <tr>
            <td
                v-for="(column,key) in columns"
                >{{ column.label }}</td>
            </tr>
    </thead>
    <tbody>
        <tr
            v-for="(row,index) in currentRows()"
            :selected="selectedRowIndex==index"
            >
                <td
                    v-for="(column,key) in columns"
                    @click="click($event,index,key)"
                    @dblclick="dblclick($event,index,key)"
                    >{{ row[key] }}</td>
            </tr>
    </tbody>
    <tfooter>
    </tfooter>
</table>
`,
});

})();