<template>
  <q-dialog :model-value="modal" persistent @update:model-value="updateClose">
    <q-card class="q-pa-sm">
      <q-card-section class="row items-center">
        <div class="q-pr-md">
          <q-avatar
            icon="mdi-alert-circle-outline"
            font-size="25px"
            size="lg"
            color="red-1"
            text-color="red"
          />
        </div>
        <div class="col text-dark">
          <span class="text-bold text-red">{{ tittle }}</span>
          <br />
          <span>{{ detail }}</span>
        </div>
      </q-card-section>

      <q-card-actions align="right" class="bg-white text-teal">
        <q-btn label="ตกลง" color="primary" @click="updateClose" v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script setup lang="ts">
import { ref, useAttrs } from 'vue'

const props = defineProps({
  modal: Boolean,
  tittle: String,
  detail: String,
  close: {
    type: Function,
    default: () => console.log('not function')
  }
})

const emit = defineEmits(['update:modal', 'update:tittle', 'update:detail'])

const updateClose = () => {
  emit('update:modal', false)
  emit('update:tittle', '')
  emit('update:detail', '')
  props.close()
}
</script>
<style lang="scss">
.icon-color {
  color: #4154b3;
}
.custom-header-table {
  max-height: 64vh;
  .q-table tr:nth-child(odd) td {
    background: white;
  }
  .q-table tr:nth-child(even) td {
    background: #f6f6f6ae;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
    z-index: 1;
  }
  /* this will be the loading indicator */
  .q-table thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
  }
  .q-table thead tr:first-child th {
    top: 0;
  }
}
</style>
