<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();
const assignId = ref<string>(route.params.form.toString());
const personalId = ref<string>(route.params.personalId.toString());
  

const tabHead = ref<string>("save1");
const props = defineProps({
  loop: {
    type: Number,
  },
  addData: {
    type: Function,
    default() {
      return "Default function";
    },
  },
  changeTab: {
    type: Function,
    default() {
      return "Default function";
    },
  },
  activeTab: String,
});

watch(tabHead, () => {
  props.changeTab(tabHead.value);
});
const nextPage = () => {
  props.addData();
};
</script>

<template>
  <q-header class="bg-grey-1">
    <div class="bg-grey-1">
      |{{tabHead}}|
      <div class="col-12 row q-gutter-x-md items-center">
        <q-tabs
          dense
          v-model="tabHead"
          active-class="text-primary text-weight-medium"
          indicator-color="grey-1"
          class="text-grey-7"
        >

        <q-tab v-for="i in loop" :name="`save${i}`" :label="`ครั้งที่ ${i}`">
          <q-btn
            size="12px"
            flat
            dense
            icon="mdi-download"
            :disable="tabHead !== 'save'+i"
            :color="tabHead !== 'save'+i ? '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>

          <!-- <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" @click="nextPage">
            <q-tooltip> เพิ่ม </q-tooltip>
          </q-btn>
        </div>
      </div>
      <q-separator />
    </div>
  </q-header>
</template>
