<script setup lang="ts">
import BaseFormSelect from '@/components/base/BaseFormSelect.vue'
import BaseFormTextField from '@/components/base/BaseFormTextField.vue'
import SectionFormPage from '@/components/sections/SectionFormPage.vue'
import { useSectionsDemoPage } from '@/composables/page-drivers/useSectionsDemoPage'

const { demoForm, handleFormBack, handleFormSubmit, pageModel, resetDemoForm } =
  useSectionsDemoPage()
</script>

<template>
  <SectionFormPage
    reset-label="清除"
    submit-label="送出"
    :message="pageModel.formMessage"
    title="SectionFormPage 報表申請"
    @back="handleFormBack"
    @reset="resetDemoForm"
    @submit="handleFormSubmit"
  >
    <template #fields>
      <v-row density="compact">
        <v-col cols="12" md="6">
          <BaseFormTextField v-model="demoForm.title" label="標題" />
        </v-col>
        <v-col cols="12" md="3">
          <BaseFormSelect v-model="demoForm.owner" label="單位" :items="pageModel.ownerOptions" />
        </v-col>
        <v-col cols="12" md="3">
          <BaseFormSelect
            v-model="demoForm.category"
            label="類型"
            :items="pageModel.categoryOptions"
          />
        </v-col>
        <v-col cols="12">
          <BaseFormTextField v-model="demoForm.description" label="說明" />
        </v-col>
      </v-row>
    </template>

    <template #sections>
      <v-card class="mb-2">
        <v-card-title class="text-title-medium font-weight-bold">明細</v-card-title>
        <v-card-text>
          <v-table density="compact">
            <thead>
              <tr>
                <th>欄位</th>
                <th>值</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>單位</td>
                <td>{{ demoForm.owner }}</td>
              </tr>
              <tr>
                <td>類型</td>
                <td>{{ demoForm.category }}</td>
              </tr>
            </tbody>
          </v-table>
        </v-card-text>
      </v-card>
    </template>

    <template #notices>
      <v-list class="bg-yellow-lighten-5" density="compact">
        <v-list-item>送出前確認標題與單位。</v-list-item>
        <v-list-item>表單狀態由 page driver 管理。</v-list-item>
      </v-list>
    </template>
  </SectionFormPage>
</template>
