<script setup lang="ts">
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";

const store = useEvaluateDetailStore();
</script>

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

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

    <q-step
      :name="3"
      prefix="3"
      title="ตรวจสอบเอกสารเล่ม 1"
      :done="store.currentStep >= 3"
      :disable="store.currentStep < 3"
      class="subStep"
    >
    </q-step>

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

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

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

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

    <q-step
      :name="8"
      prefix="8"
      title="รอพิจารณาผลการประเมิน"
      :done="store.currentStep >= 8"
      :disable="store.currentStep < 8"
      class="subStep"
    >
    </q-step>

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

<style>
.stepEva {
  padding: 0px !important;
}
.subStep .q-stepper__tab {
  padding: 10px 10px !important;
  border-radius: 8px;
  font-size: 0.9rem;
}

/* steppe active */
.stepEva .q-stepper__tab--active .q-stepper__title {
  color: #34373c !important;
  font-weight: 500 !important;
}
.stepEva .q-stepper__tab--active .q-stepper__dot {
  color: white !important;
  border: 1.5px solid #02a998;
}

.stepEva .q-stepper__tab--active .q-stepper__dot span {
  color: #02a998;
}

/* steppe done */
.stepEva .q-stepper__tab--done .q-stepper__dot {
  color: #02a998;
}

.stepEva.q-stepper--vertical .q-stepper__dot:before,
.stepEva.q-stepper--vertical .q-stepper__dot:after {
  width: 1px;
  background: #c8d3db;
}
.stepEva .q-stepper__tab .q-stepper__title {
  color: #9a9a9a;
  font-weight: 400;
}
</style>
