<template>
    <div v-show="showTable" class="grid-container">
        <div class="grid">
            <div  v-for="(column, indexColumn) of headers" :key="indexColumn" class="grid-col" :class="{ 'grid-col--fixed-left' : indexColumn === 0 && isColumnFixedLeft == true}">
               
                <div class="grid-item" :class="[isHeaderFixed, 'grid-item--header']">
                    <p>{{column.title}}</p>
                </div>
                <div v-for="(row , index) of rows" :key="index" style="padding: 4px;" @click="sendClick(row[columnEvent], index)" class="grid-item" :class="[{ 'row-selected' : index == selectedRow && hasColumnEvent && indexColumn != 0 }, {'pointer' : hasColumnEvent}]">
                    <span v-html="row[indexColumn]"></span>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import '@/assets/bootstrap/css/bootstrap.min.css';
import '@/assets/fonts/fontawesome-all.min.css';
import '@/assets/fonts/font-awesome.min.css';
import '@/assets/fonts/fontawesome5-overrides.min.css';
import '@/assets/css/datatables/datatables.min.css';
import '@/assets/css/datatables/fixedColumns.bootstrap4.min.css';
import '@/assets/css/uno-dq.css';

export default{
    name: 'DataTable',
    props:{
        showTable :{
            default: false,
            type: Boolean
        },
        headers :  [],
        rows : [],
        isColumnFixedLeft : {
            default: false,
            type: Boolean
        },
        isHeaderFixed : {
            default: false,
            type: Boolean
        },
        columnEvent: { default: 0, type: Number },
        hasColumnEvent: { default: false, type: Boolean },
        selectedRow: { default: -1, type: Number}
    },
    data: () =>{
        return {
        }
    },
    mounted(){
    },
    methods :{
      sendClick(indexColumn: Number, indexRow: Number){
        console.log('indexColumn', indexColumn);
        this.$emit('sendClick', indexColumn, indexRow);
      }
    },
}
</script>
<style scoped>
.grid-container {
  display: grid; /* This is a (hacky) way to make the .grid element size to fit its content */
  overflow: auto;
  height: 385px;
  width: 100%;
}
.grid {
  display: flex;
  flex-wrap: nowrap;
}
.grid-col {
  width: 100%;
}

.grid-item--header {
  
  position: sticky;
  position: -webkit-sticky;
  background: #808080;
  color: white;
  top: 0;
  font-weight: bold;
  padding: 4px 17px;
}

.grid-col--fixed-left {
  position: sticky;
  left: 0;
  z-index: 9998;
  background: white;
}
.grid-col--fixed-right {
  position: sticky;
  right: 0;
  z-index: 9998;
  background: white;
}

.grid-item {
  font-size: 12px;
  white-space: nowrap;
  height: 30px;
  border-top: 1px solid #ddd;
}

.pointer{
  cursor: pointer;
}

.row-selected{
  background: #fb4d0a;
  color: white;
}
</style>
