<script setup lang="ts">
import { watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useErrorStore } from '@/stores/error'
import { useLoader } from '@/stores/loader'

const { visible, title, msg } = storeToRefs(useErrorStore())
const loader = useLoader()

watch(visible, () => {
  loader.hide()
})
</script>

<template>
  <q-dialog transition-show="scale" transition-hide="scale" v-model="visible">
    <q-card style="width: 400px">
      <q-card-section>
        <div class="flex items-center" style="flex-wrap: nowrap">
          <div class="q-pa-sm">
            <div style="border-radius: 50%" class="bg-secondary q-pa-sm">
              <q-icon name="mdi-alert" color="negative" size="2.5rem" />
            </div>
          </div>
          <div>
            <h6 class="q-my-none">{{ title }}</h6>
            <p class="q-my-none">{{ msg }}</p>
          </div>
        </div>
      </q-card-section>

      <q-card-actions align="right" class="bg-white text-primary">
        <q-space />
        <q-btn
          flat
          v-close-popup
          label="ปิด"
          @click="() => (visible = !visible)"
          id="globalErrorClose"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
