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

import { useEvaluateDetailStore } from "@/modules/12_evaluate/store/EvaluateDetail";

const store = useEvaluateDetailStore();
</script>

<template>
  <q-stepper
    v-model="store.step"
    vertical
    animated
    flat
    ref="stepper"
    :bordered="false"
  >
    <q-step
      keep-alive
      :name="1"
      prefix="1"
      title="ตรวจสอบคุณสมบัติ"
      :done="store.step > 1"
    >
    </q-step>

    <q-step :name="2" prefix="2" title="จัดเตรียมเอกสาร" :done="store.step > 2">
    </q-step>

    <q-step :name="3" prefix="3" title="ตรวจสอบเอกสาร" :done="store.step > 3">
    </q-step>

    <q-step
      :name="4"
      prefix="4"
      title="รอตรวจสอบคุณสมบัติ"
      :done="store.step > 4"
    >
    </q-step>

    <q-step
      :name="5"
      prefix="5"
      title="ประกาศบนเว็บไซต์"
      :done="store.step > 5"
    >
    </q-step>

    <q-step
      :name="6"
      prefix="6"
      title="จัดเตรียมเอกสารเล่ม 2"
      :done="store.step > 6"
    >
    </q-step>

    <q-step
      :name="7"
      prefix="7"
      title="ตรวจสอบเอกสารเล่ม 2"
      :done="store.step > 7"
    >
    </q-step>

    <q-step :name="8" prefix="8" title="รอพิจารณาผล" :done="store.step > 8">
    </q-step>

    <q-step :name="9" prefix="9" title="เสร็จสิ้น" :done="store.step > 9">
    </q-step>
  </q-stepper>
</template>

<style scoped></style>
