<template>
  <q-dialog :model-value="modal" persistent>
    <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="primary-1"
            text-color="primary"
          />
        </div>
        <div class="col text-dark">
          <span class="text-bold">{{ modalTittle }}</span>
          <br />
          <span>{{ modalDetail }}</span>
        </div>
      </q-card-section>

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

const props = defineProps({
  modal: Boolean,
  modalTittle: String,
  modalDetail: String,
  ok: {
    type: Function,
    default: () => console.log('not function')
  },
  cancel: {
    type: Function,
    default: () => console.log('not function')
  }
})

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

const cancel = () => {
  emit('update:modal', false)
  props.cancel()
}
const ok = () => {
  emit('update:modal', false)
  props.ok()
}
</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>
