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

/** import Components*/
import DialogHeader from "@/components/DialogHeader.vue";

/** import Store*/
import { useCounterMixin } from "@/stores/mixin";
import { useEvaluateStore } from "@/modules/06_evaluate/store";

/** use*/
const router = useRouter();
const $q = useQuasar();
const mixin = useCounterMixin();
const store = useEvaluateStore();
const slide = ref<string>("1");

const { dialogConfirm } = mixin;

const props = defineProps({
  modal: {
    type: Boolean,
  },
  menu: {
    type: Object,
    require: true,
  },
  close: {
    type: Function,
  },
});

const step = ref<number>(1);

/** function click ดำเนินการต่อ */
function onCklicNext() {
  dialogConfirm(
    $q,
    () => {
      const type = props.menu ? props.menu.val?.toLowerCase() : "";
      store.step = 1;
      store.currentStep = 1;
      store.statusUpload = false;
      router.push(`/evaluate/add/${type}`);
    },
    "ยืนยันการดำเนินการ",
    "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
  );
}

/** function Callblck ทำงานเมื่อ props มีการเปลี่ยนแปลง */
watch(props, () => {
  step.value = 1;
});
</script>

<template>
  <q-dialog v-model="props.modal">
    <q-card style="width: 800px; max-width: 90vw; border-radius: 20px">
      <DialogHeader
        class="text-center text-edit"
        :tittle="`ขั้นตอนการ${props.menu ? props.menu.label : ''}`"
        :close="props.close"
        elevated
      />
      <q-separator />
      <q-carousel
        v-model="slide"
        transition-prev="slide-right"
        transition-next="slide-left"
        swipeable
        animated
        control-type="regular"
        control-color="grey-5"
        navigation
        padding
        arrows
        height="auto"
        class="text-dark rounded-borders"
      >
        <template v-slot:navigation-icon="{ active, btnProps, onClick }">
          <q-btn
            v-if="active"
            size="xs"
            :icon="btnProps.icon"
            color="edit"
            flat
            round
            dense
            @click="onClick"
          />
          <q-btn
            v-else
            size="xs"
            :icon="btnProps.icon"
            color="grey"
            flat
            round
            dense
            @click="onClick"
          />
        </template>
        <q-carousel-slide name="1" class="no-wrap">
          <q-card bordered>
            <q-card-section class="bg-grey-2" style="height: 150px">
              <div class="text-center">
                <q-img
                  class="absolute-center"
                  src="@/modules/06_evaluate/components/img/page1.png"
                  spinner-color="white"
                  style="height: auto; max-width: 100px"
                />
              </div>
            </q-card-section>
            <q-card-actions vertical align="left" class="q-pa-lg">
              <div class="flex">
                <q-icon
                  name="mdi-numeric-1-circle"
                  size="20px"
                  color="primary"
                />
                <div class="q-pl-sm text-weight-bold text-dark">
                  ตรวจสอบคุณสมบัติ
                </div>
              </div>
              ตรวจสอบคุณสมบัติของตนเอง เพื่อทำการยื่นขอประเมิน
            </q-card-actions>
          </q-card>
        </q-carousel-slide>

        <q-carousel-slide name="2" class="no-wrap">
          <q-card bordered>
            <q-card-section class="bg-grey-2" style="height: 150px">
              <div class="text-center">
                <q-img
                  class="absolute-center"
                  src="@/modules/06_evaluate/components/img/page2.png"
                  spinner-color="white"
                  style="height: auto; max-width: 100px"
                />
              </div>
            </q-card-section>
            <q-card-actions vertical align="left" class="q-pa-lg">
              <div class="flex">
                <q-icon
                  name="mdi-numeric-2-circle"
                  size="20px"
                  color="primary"
                />
                <div class="q-pl-sm text-weight-bold text-dark">
                  จัดเตรียมเอกสารเล่ม 1
                </div>
              </div>
              ดาวน์โหลดเอกสารต้นแบบ ทำการกรอกข้อมูลในฟอร์มให้ครบ
              และอัปโหลดเข้าสู่ระบบ
            </q-card-actions>
          </q-card>
        </q-carousel-slide>

        <q-carousel-slide name="3" class="no-wrap">
          <q-card bordered>
            <q-card-section class="bg-grey-2" style="height: 150px">
              <div class="text-center">
                <q-img
                  class="absolute-center"
                  src="@/modules/06_evaluate/components/img/page3.png"
                  spinner-color="white"
                  style="height: auto; max-width: 100px"
                />
              </div>
            </q-card-section>
            <q-card-actions vertical align="left" class="q-pa-lg">
              <div class="flex">
                <q-icon
                  name="mdi-numeric-3-circle"
                  size="20px"
                  color="primary"
                />
                <div class="q-pl-sm text-weight-bold text-dark">
                  ตรวจสอบเอกสารเล่ม 1
                </div>
              </div>
              ทำการตรวจสอบความถูกต้องของเอกสารเล่ม 1 และยืนยันการยื่นเอกสาร
            </q-card-actions>
          </q-card>
        </q-carousel-slide>

        <q-carousel-slide name="4" class="no-wrap">
          <q-card bordered>
            <q-card-section class="bg-grey-2" style="height: 150px">
              <div class="text-center">
                <q-img
                  class="absolute-center"
                  src="@/modules/06_evaluate/components/img/page4.png"
                  spinner-color="white"
                  style="height: auto; max-width: 100px"
                />
              </div>
            </q-card-section>
            <q-card-actions vertical align="left" class="q-pa-lg">
              <div class="flex">
                <q-icon
                  name="mdi-numeric-4-circle"
                  size="20px"
                  color="primary"
                />
                <div class="q-pl-sm text-weight-bold text-dark">
                  รอตรวจสอบคุณสมบัติ
                </div>
              </div>
              ขั้นตอนนี้คำขอของคุณจะถูกส่งไปยังเจ้าหน้าที่ที่รับผิดชอบ
              และทางเจ้าหน้าที่จะทำการตรวจสอบคุณสมบัติ
            </q-card-actions>
          </q-card>
        </q-carousel-slide>

        <q-carousel-slide name="5" class="no-wrap">
          <q-card bordered>
            <q-card-section class="bg-grey-2" style="height: 150px">
              <div class="text-center">
                <q-img
                  class="absolute-center"
                  src="@/modules/06_evaluate/components/img/page5.png"
                  spinner-color="white"
                  style="height: auto; max-width: 100px"
                />
              </div>
            </q-card-section>
            <q-card-actions vertical align="left" class="q-pa-lg">
              <div class="flex">
                <q-icon
                  name="mdi-numeric-5-circle"
                  size="20px"
                  color="primary"
                />
                <div class="q-pl-sm text-weight-bold text-dark">
                  ประกาศบนเว็บไซต์
                </div>
              </div>
              เอกสารที่เกี่ยวข้องจะถูกประกาศขึ้นบนเว็บไซต์เป็นเวลา 30 วัน
            </q-card-actions>
          </q-card>
        </q-carousel-slide>

        <q-carousel-slide name="6" class="no-wrap">
          <q-card bordered>
            <q-card-section class="bg-grey-2" style="height: 150px">
              <div class="text-center">
                <q-img
                  class="absolute-center"
                  src="@/modules/06_evaluate/components/img/page6.png"
                  spinner-color="white"
                  style="height: auto; max-width: 100px"
                />
              </div>
            </q-card-section>
            <q-card-actions vertical align="left" class="q-pa-lg">
              <div class="flex">
                <q-icon
                  name="mdi-numeric-6-circle"
                  size="20px"
                  color="primary"
                />
                <div class="q-pl-sm text-weight-bold text-dark">
                  จัดเตรียมเอกสารเล่ม 2
                </div>
              </div>
              ผู้ประเมินทำการอัปโหลดเอกสารเล่ม 2
              โดยมีระยะเวลาการส่งผลงานหลังจากประกาศบนเว็บไซต์แล้ว 6 เดือน
            </q-card-actions>
          </q-card>
        </q-carousel-slide>

        <q-carousel-slide name="7" class="no-wrap">
          <q-card bordered>
            <q-card-section class="bg-grey-2" style="height: 150px">
              <div class="text-center">
                <q-img
                  class="absolute-center"
                  src="@/modules/06_evaluate/components/img/page7.png"
                  spinner-color="white"
                  style="height: auto; max-width: 100px"
                />
              </div>
            </q-card-section>
            <q-card-actions vertical align="left" class="q-pa-lg">
              <div class="flex">
                <q-icon
                  name="mdi-numeric-7-circle"
                  size="20px"
                  color="primary"
                />
                <div class="q-pl-sm text-weight-bold text-dark">
                  ตรวจสอบเอกสารเล่ม 2
                </div>
              </div>
              ทำการตรวจสอบความถูกต้องของเอกสารเล่ม 2 และยืนยันการยื่นเอกสาร
            </q-card-actions>
          </q-card>
        </q-carousel-slide>

        <q-carousel-slide name="8" class="no-wrap">
          <q-card bordered>
            <q-card-section class="bg-grey-2" style="height: 150px">
              <div class="text-center">
                <q-img
                  class="absolute-center"
                  src="@/modules/06_evaluate/components/img/page8.png"
                  spinner-color="white"
                  style="height: auto; max-width: 100px"
                />
              </div>
            </q-card-section>
            <q-card-actions vertical align="left" class="q-pa-lg">
              <div class="flex">
                <q-icon
                  name="mdi-numeric-8-circle"
                  size="20px"
                  color="primary"
                />
                <div class="q-pl-sm text-weight-bold text-dark">
                  รอพิจารณาผล
                </div>
              </div>
              เจ้าหน้าที่ทำการพิจารณาผลการประเมิน
              และดำเนินการดาวน์โหลดเอกสารต้นแบบ กรอกข้อมูลในฟอร์มให้ครบ
              และอัปโหลดเข้าสู่ระบบ
            </q-card-actions>
          </q-card>
        </q-carousel-slide>

        <q-carousel-slide name="9" class="no-wrap">
          <q-card bordered>
            <q-card-section class="bg-grey-2" style="height: 150px">
              <div class="text-center">
                <q-img
                  class="absolute-center"
                  src="@/modules/06_evaluate/components/img/page9.png"
                  spinner-color="white"
                  style="height: auto; max-width: 100px"
                />
              </div>
            </q-card-section>
            <q-card-actions vertical align="left" class="q-pa-lg">
              <div class="flex">
                <q-icon
                  name="mdi-numeric-9-circle"
                  size="20px"
                  color="primary"
                />
                <div class="q-pl-sm text-weight-bold text-dark">เสร็จสิ้น</div>
              </div>
              เสร็จสิ้นการประเมิน
            </q-card-actions>
          </q-card>
        </q-carousel-slide>
      </q-carousel>
      <q-separator />
      <q-card-actions align="right" class="bg-edit q-px-md">
        <q-btn
          style="border-radius: 10px; padding: 5px 20px"
          unelevated
          icon-right="mdi-arrow-right"
          outline
          color="white"
          label="ข้าม"
          @click="
            router.push(
              `/evaluate/add/${props.menu ? props.menu.val?.toLowerCase() : ''}`
            )
          "
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
