<template>
    <ClientOnly>
      <Card style="margin-top: 78px; min-height: 200px;"> 
            <template #content>
                <Panel header="Maintainance / Assign Measures" class="bg-white rounded-4 gap-3">
                    

                  
                    <div class="g-3 mb-20 needs-validation">
                      <div class="grid nested-grid">
                        <Card class="col-12">
                            <template #content>                          
                                <DataTable class="p-datatable-sm" :filters="filters" dataKey="id" filterDisplay="row" :value="measures" 
                                    showGridlines stripedRows paginator :rows="10" :rowsPerPageOptions="[5, 10, 20, 50]" 
                                    :globalFilterFields="['kurz']"  
                                    v-model:selection="selectedTyp" selection-mode="single" @row-select="onRowSelect" :meta-key-selection="false"
                                    tableStyle="min-width: 50rem;">
                                    <template #header>
                                      <div class="flex justify-content-end">
                                          <span class="p-input-icon-left">
                                              <i class="pi pi-search" />
                                              <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
                                          </span>
                                      </div>
                                    </template>
                                    <template #empty> No customers found. </template>
                                    <!--<template #loading> Loading customers data. Please wait. </template> -->
                                  <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" sortable :filter-field="col.field" >
                                    
                                  </Column>
                                    
                              </DataTable>
                            </template>
                            
                            <template #footer>
                                <Button label="Assign" icon="pi pi-check" text @click="onSubmit(id)" />
                            </template>
                             
                        </Card>
                      </div>
                    </div>
                    
                </Panel>
            </template>
        </Card>
      </ClientOnly>
      
  </template>

<script setup lang="ts">
//import { MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBContainer } from "mdb-vue-ui-kit";
import { ref, onMounted } from "vue";
import { FilterMatchMode } from "primevue/api";
import { useToast } from 'primevue/usetoast';

interface cMeasures {
      id: number;
      kurz: string;
      brust: number;
      laenget: number;
      schulterbreite: number;
      taillenumfangt: number;
      hueftumfang: number;
      innennaht: number;
      laengeb: number;
      taillenumfangb: number;
}
const mea = ref({id: 0, kurz: '', brust:0, laenget:0, schulterbreite:0, taillenumfangt:0, hueftumfang:0, innennaht:0, laengeb:0, taillenumfangb:0});
const kurz = ref("");
    //const loading = ref(true); 
const selectedTyp = ref("");
const id = ref(0);
const toast = useToast();

let params: any;
params = inject('dialogRef');
 

const {data: measures } = await useFetch('http://ubodroid-2:8081/api/v1/meas');



    const columns = [
      { field: 'id', header: '#'}, 
      { header: 'Description', field: 'kurz'},
      { header: 'Breast', field: 'brust'},
      { header: 'Lengh Top', field: 'laenget'},
      { header: 'Shoulder Width', field: 'schulterbreite'},
      { header: 'Waist Girth Top', field: 'taillenumfangt'},
      { header: 'Hip Girth', field: 'hueftumfang'},
      { header: 'Inner Seam', field: 'innennaht'},
      { header: 'Length Bottom', field: 'laengeb'},
      { header: 'Waist Girth Bottom', field: 'taillenumfangb'},
    ];

    const filters = ref({
      global: { value: null, matchMode: FilterMatchMode.CONTAINS },
      kurz: {value: null, matchMode: FilterMatchMode.STARTS_WITH }
    })

    const onRowSelect = (event) => {
      id.value = event.data.id;
      kurz.value = event.data.kurz;     
      toast.add({ severity: 'info', summary: 'Measure Selected', detail: 'Description: ' + event.data.kurz, life: 3000 });
    };

onMounted(() => {
    
    mea.value = params.value.data.mea;
});

async function onSubmit(id: number) {
    console.log('id = ', id);
    await this.params.close({ id: id });
}

</script>
  