<template>
  <div class="q-pa-md q-gutter-y-md">
    <div
      class="flex justify-between items-center bg-white q-pa-md rounded-borders"
    >
      <div class="text-h5">
        {{ $t(title) }}
      </div>
    </div>
    <q-stepper
      v-model="currentStepId"
      animated
      class="no-shadow"
      color="primary"
      header-nav
      vertical
    >
      <q-step
        v-for="(step, i) in historyCast"
        :key="`${step.taskDefKey}-${i}`"
        :disable="step.disable"
        :name="step.taskDefKey"
        :title="$t(step.title)"
      >
        <component
          :is="form"
          v-if="form"
          :key="step.formKey"
          class="q-ma-md"
          :input-data="step.inputData"
          :readonly="step.isReadonly"
          @submit="submit"
        />
        <q-inner-loading :showing="loading">
          <q-spinner-gears color="primary" size="50px" />
        </q-inner-loading>
      </q-step>
    </q-stepper>
  </div>
</template>

<script lang="ts" src="./index.ts"></script>
