<template>
  <q-header class="bg-grey-1">
    <div class="bg-grey-1">
      <div class="col-12 row q-gutter-x-md items-center">
        <q-tabs
          dense
          v-model="tab"
          active-class="text-primary text-weight-medium"
          indicator-color="grey-1"
          class="text-grey-7"
        >
          <q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
          <q-btn
            size="12px"
            flat
            dense
            icon="mdi-download"
            :disable="tab !== 'save1'"
            :color="tab !== 'save1' ? 'grey' : 'add'"
          >
            <q-tooltip>ดาวน์โหลด</q-tooltip>
            <q-menu>
              <q-list style="min-width: 150px">
                <q-item clickable v-close-popup>
                  <q-item-section avatar
                    ><q-icon color="red" name="mdi-file-pdf"
                  /></q-item-section>
                  <q-item-section>ไฟล์ .PDF</q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section avatar
                    ><q-icon color="blue" name="mdi-file-word"
                  /></q-item-section>
                  <q-item-section>ไฟล์ .docx</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>

          <q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
          <q-btn
            size="12px"
            flat
            dense
            icon="mdi-download"
            :disable="tab !== 'save2'"
            :color="tab !== 'save2' ? 'grey' : 'add'"
          >
            <q-tooltip>ดาวน์โหลด</q-tooltip>
            <q-menu>
              <q-list style="min-width: 150px">
                <q-item clickable v-close-popup>
                  <q-item-section avatar
                    ><q-icon color="red" name="mdi-file-pdf"
                  /></q-item-section>
                  <q-item-section>ไฟล์ .PDF</q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section avatar
                    ><q-icon color="blue" name="mdi-file-word"
                  /></q-item-section>
                  <q-item-section>ไฟล์ .docx</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
          <!-- <q-tab name="save3" label="บันทึกผลครั้งที่ 3" />
                          <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
                              :color="tab !== 'save3' ? 'grey' : 'add'">
                              <q-tooltip>ดาวน์โหลด</q-tooltip>
                              <q-menu>
                                  <q-list style="min-width: 150px">
                                      <q-item clickable v-close-popup>
                                          <q-item-section avatar><q-icon color="red"
                                                  name="mdi-file-pdf" /></q-item-section>
                                          <q-item-section>ไฟล์ .PDF</q-item-section>
                                      </q-item>
                                      <q-item clickable v-close-popup>
                                          <q-item-section avatar><q-icon color="blue"
                                                  name="mdi-file-word" /></q-item-section>
                                          <q-item-section>ไฟล์ .docx</q-item-section>
                                      </q-item>
                                  </q-list>
                              </q-menu>
                          </q-btn> -->
        </q-tabs>
        <div>
          <q-btn color="blue" flat dense icon="mdi-plus">
            <q-tooltip> เพิ่มบันทึกผลการทดลอง </q-tooltip>
          </q-btn>
        </div>
      </div>
      <q-separator />
    </div>
  </q-header>

  <q-page-container>
    <q-tab-panels v-model="tab" animated>
      <q-tab-panel name="save1">
        <Form />
      </q-tab-panel>

      <q-tab-panel name="save2">
        <Form />
      </q-tab-panel>
    </q-tab-panels>
  </q-page-container>
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue";

const Form = defineAsyncComponent(
  () => import("@/modules/05_placement/components/probation/FormEvaluation.vue")
);
const tab = ref<string>("save1");
</script>
