<template>
  <div class="toptitle text-dark col-12 row items-center">
    <q-btn
      icon="mdi-arrow-left"
      unelevated
      round
      dense
      flat
      color="primary"
      class="q-mr-sm"
      @click="router.go(-1)"
    />
    ออกคำสั่ง
  </div>
  <q-card flat bordered class="col-12 q-my-sm q-mt-sm">
    <q-stepper
      v-model="step"
      ref="stepper"
      color="primary"
      animated
      header-class="bg-grey-1"
    >
      <q-step
        :name="1"
        title="รายละเอียดการออกคำสั่ง"
        prefix="1"
        :done="step > 1"
        :header-nav="step > 1"
      />

      <q-step
        :name="2"
        title="เลือกรายชื่อ"
        prefix="2"
        :done="step > 2"
        :header-nav="step > 2"
      />

      <q-step
        :name="3"
        title="เลือกรายชื่อส่งสำเนาคำสั่ง"
        prefix="3"
        :done="step > 3"
        :header-nav="step > 3"
      />
      <q-step
        :name="4"
        title="รายละเอียดคำสั่งและแนบท้าย"
        prefix="4"
        :header-nav="step > 4"
      />
      <template v-slot:message>
        <step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
        <step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
        <step03 v-if="step === 3" :next="nextStep" :previous="previousStep" />
        <step04 v-if="step === 4" :next="nextStep" :previous="previousStep" />
      </template>
    </q-stepper>
  </q-card>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref, defineAsyncComponent } from "vue";
import type { QStepper } from "quasar";

const step01 = defineAsyncComponent(
  () =>
    import("@/modules/05_placement/components/OrderPlacement/step/step01.vue")
);
const step02 = defineAsyncComponent(
  () =>
    import("@/modules/05_placement/components/OrderPlacement/step/step02.vue")
);
const step03 = defineAsyncComponent(
  () =>
    import("@/modules/05_placement/components/OrderPlacement/step/step03.vue")
);
const step04 = defineAsyncComponent(
  () =>
    import("@/modules/05_placement/components/OrderPlacement/step/step04.vue")
);

const router = useRouter();
const step = ref<number>(1);
const stepper = ref<QStepper>();

const nextStep = () => {
  stepper.value!.next();
};

const previousStep = () => {
  stepper.value!.previous();
};
</script>
<style>
.q-stepper--horizontal .q-stepper__step-inner {
  padding: 0px;
}
</style>
