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

import step01 from "./Step01.vue";
import step02 from "./Step02.vue";
import step03 from "./Step03.vue";

const router = useRouter();

const step = ref<number>(1);

const nextStep = async () => {
  localStorage.setItem("currentStep", step.value.toString());
  step.value++;
};
const previousStep = async () => {
  localStorage.setItem("currentStep", step.value.toString());
  step.value--;
};
</script>

<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.push(`/discipline-order`)"
    />
    ออกคำสั่งลงโทษทางวินัย
  </div>
  <div class="col-12 q-mt-sm">
    <q-card flat bordered>
      <q-stepper
        v-model="step"
        ref="stepper"
        animated
        active-color="pirmary"
        active-icon="none"
        header-class="bg-grey-1 "
      >
        <q-step
          :name="1"
          prefix="1"
          title="รายละเอียดการออกคำสั่ง"
          :done="step > 1"
        >
          <step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
        </q-step>

        <q-step :name="2" prefix="2" title="เลือกรายชื่อ" :done="step > 2">
          <step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
        </q-step>

        <q-step
          :name="3"
          prefix="3"
          title="รายละเอียดคำสั่งและแนบท้าย"
          :done="step > 3"
        >
          <step03 v-if="step === 3" :next="nextStep" :previous="previousStep" />
        </q-step>
      </q-stepper>
    </q-card>
  </div>
</template>

<style scoped></style>
