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

const { handleQueryBack, handleQuerySearch, pageModel, queryFilters } = useSectionsDemoPage()
</script>

<template>
  <SectionQueryPage title="查詢頁DEMO" @back="handleQueryBack" @search="handleQuerySearch">
    <template #filters>
      <v-col cols="12" md="4">
        <BaseFormTextField v-model="queryFilters.keyword" label="關鍵字" />
      </v-col>
      <v-col cols="12" md="4">
        <BaseFormSelect v-model="queryFilters.owner" label="單位" :items="pageModel.ownerOptions" />
      </v-col>
    </template>

    <template #results>
      <v-alert v-if="pageModel.queryMessage" class="mb-3" type="success" variant="tonal">
        {{ pageModel.queryMessage }}
      </v-alert>
      <v-table density="compact">
        <thead class="bg-primary">
          <tr>
            <th>名稱</th>
            <th>單位</th>
            <th>狀態</th>
            <th>更新日</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="pageModel.reports.length === 0">
            <td class="text-center" colspan="4">尚無查詢結果</td>
          </tr>
          <tr v-for="row in pageModel.reports" :key="row.id">
            <td>{{ row.title }}</td>
            <td>{{ row.owner }}</td>
            <td>{{ row.status }}</td>
            <td>{{ row.updatedAt }}</td>
          </tr>
        </tbody>
      </v-table>
    </template>
  </SectionQueryPage>
</template>
