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

const tabHead = ref<string>("save1");
const route = useRoute();
const checkRoutePermisson = ref<boolean>(route.name == "probationFormDetail");
/** รับค่ามาจากหน้าหลัก */
const props = defineProps({
  FileDownload: {
    type: Function,
    default() {
      return "Default function";
    },
  },
  loop: {
    type: Number,
  },
  addData: {
    type: Function,
    default() {
      return "Default function";
    },
  },
  changeTab: {
    type: Function,
    default() {
      return "Default function";
    },
  },
});

/** เรียกใช้ฟังชั่นจากหน้าหลัก */
function downloadFile(type: string) {
  props.FileDownload(type);
}

watch(tabHead, () => {
  props.changeTab(tabHead.value);
});

/** ไปยัง step ต่อไป */
function nextPage() {
  if (props.loop !== undefined) {
    if (props.loop < 3) {
      props.addData();
    }
  }
}
</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 v-for="(i, j) in loop" :name="`save${i}`" :key="j">
            <div class="row col-12 items-center">
              <div class="q-mr-sm">ครั้งที่{{ i }}</div>
              <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
                      @click="downloadFile('pdf')"
                    >
                      <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
                      @click="downloadFile('docx')"
                    >
                      <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>
            </div>
          </q-tab>
        </q-tabs>
        <div>
          <q-btn v-if="!checkRoutePermisson" color="blue" flat dense icon="mdi-plus" @click="nextPage">
            <q-tooltip> เพิ่ม </q-tooltip>
          </q-btn>
        </div>
      </div>
      <q-separator />
    </div>
  </q-header>
</template>
