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

const router = useRouter();

const tabHead = ref<string>("save1");
const props = defineProps({
  changeTab: {
    type: Function,
    default() {
      return "Default function";
    },
  },
  activeTab: String,
});
onMounted(() => {
  console.log(props);
});

watch(tabHead, () => {
  console.log(props);

  props.changeTab(tabHead.value);
});
const nextPage = () => {
  if (props.activeTab) {
    router.push(
      "/probation/detail/add/08db721d-ade4-480e-8d84-0853946a0ea5/f4ce5428-98b6-4425-88fe-24c29db9f885"
    );
  }

  // const url =
  //   "/probation/detail/add/08db721d-ade4-480e-8d84-0853946a0ea5/f4ce5428-98b6-4425-88fe-24c29db9f885";
  // window.open(url, "_blank");
};
</script>

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