<script setup lang="ts">
import { ref, defineAsyncComponent, watch, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";

const route = useRoute();
const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, success } = mixin;
const assignId = ref<string>(route.params.form.toString());

const evaluate = ref<any>([]);
const tabHead = ref<string>("save1");
const tabs = ref<any>([]);
const tab = ref<string>("save1");
const activeTab = ref<string>("tab2");

const props = defineProps({
  activeTab: String,
});
onMounted(() => {
  console.log(props.activeTab);
  // fecthAssign(assignId.value);
});
watch(props, () => {
  console.log(props);
});
// const fecthAssign = async (id: string) => {
//   showLoader();
//   await http
//     .get(config.API.formevaluate(id))
//     .then((res: any) => {
//       evaluate.value = res.data.data.evaluate;
//       tabs.value = evaluate.value;

//       console.log(tabs.value);
//     })
//     .catch((e: any) => {
//       console.log(e);
//       messageError($q, e);
//     })
//     .finally(() => {
//       hideLoader();
//     });
// };

const changeTab = (tabVal: string) => {
  console.log(tabVal);
  tab.value = tabVal;
};
const nextPage = () => {
  const newTabLabel = tabs.value.length + 1;
  tabs.value.push({ no: newTabLabel });
};

const Header = defineAsyncComponent(
  () =>
    import(
      "@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
    )
);
const FormSaveResult = defineAsyncComponent(
  () =>
    import(
      "@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue"
    )
);
</script>

<template>
  <Header :change-tab="changeTab" :activeTab="activeTab" />
  <!-- <q-header class="bg-grey-1">
    <div class="bg-grey-1">
      <div class="col-12 row q-gutter-xs-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="tabData in tabs"
            :key="tabData.no"
            :name="tabData.no"
            :label="'ครั้งที่' + tabData.no"
            @click="changeTab('save' + tabData.no)"
          >
            <q-btn
              size="12px"
              flat
              dense
              icon="mdi-download"
              :disable="tabHead !== tabData.no"
              :color="tabHead !== tabData.no ? '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-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> -->
  <!-- <q-page-container>
    <q-tab-panels v-model="tab" animated>
      <q-tab-panel
        v-for="tabName in tabs"
        :key="tabName"
        :name="'save' + tabName.no"
      >
        <FormSaveResult :tab="tab" />
      </q-tab-panel>
    </q-tab-panels>
  </q-page-container> -->

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

      <q-tab-panel name="save2">
        <FormSaveResult :tab="tab" />
      </q-tab-panel>
    </q-tab-panels>
  </q-page-container>
</template>
