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

import { useCommandListStore } from "@/modules/18_command/store/ListStore";

import DialogFormCommand from "@/modules/18_command/components/Main/DialogFormCommand.vue";
import TableList from "@/modules/18_command/components/Main/TableMain.vue";

const store = useCommandListStore();

const yearly = ref<number>(new Date().getFullYear());
const searchKeyword = ref<string>("");
const modalAdd = ref<boolean>(false);

const tabsManu = ref([
  { label: "แบบร่าง", name: "list_draft" },
  { label: "รอผู้มีอำนาจ", name: "list_authority" },
  { label: "รอออกคำสั่ง", name: "list_orders" },
  { label: "ออกคำสั่งเสร็จสิ้น", name: "list_completed" },
  { label: "ยกเลิก", name: "list_cancel" },
]);

onMounted(() => {
  store.rows = [
    {
      id: "1",
      caseFault: null,
      faultLevel: null,
      fiscalYear: "2024",
      fullName: "นายพิชัยยุทธ แสงศรี",
      orderBy: "สำนักงานเขตพระนคร",
      orderById: "32c99b86-c390-45d2-b1aa-7af5ba2de788",
      orderByOrganization: "สำนักงานเขตพระนคร",
      orderDate: "2024-08-23T03:09:00",
      orderId: "08dcc321-17f7-43a8-80ef-40f7822a6e46",
      orderName: "คำสั่งแต่งตั้ง",
      orderNo: "23",
      orderStatusName: "ออกคำสั่งแล้ว",
      orderStatusValue: "e0d7c384-642d-4a01-a2e9-b06180ab466d",
      orderTypeName: "คำสั่งแต่งตั้ง",
      orderTypeValue: "3b3c8fcf-7940-4963-ab48-b8e803ed534d",
      refRaw: null,
      result: null,
      signatoryBy: "นายวิษณุ สุวรรณรัตน์",
      signatoryDate: "2024-08-23T03:09:00",
      signatoryPosition: "ผู้อำนวยการ",
    },
  ];
  console.log("mounted");
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">รายการคำสั่ง</div>

  <!-- toolbar -->
  <q-card>
    <q-toolbar class="q-pa-sm">
      <datepicker
        menu-class-name="modalfix"
        v-model="yearly"
        :locale="'th'"
        autoApply
        year-picker
        :enableTimePicker="false"
      >
        <template #year="{ year }">{{ year + 543 }}</template>
        <template #year-overlay-value="{ value }">{{
          parseInt(value + 543)
        }}</template>
        <template #trigger>
          <q-input
            dense
            outlined
            hide-bottom-space
            :model-value="yearly == null ? null : yearly + 543"
            :label="`${'ปีงบประมาณ'}`"
          >
            <template v-slot:prepend>
              <q-icon
                name="event"
                class="cursor-pointer"
                style="color: var(--q-primary)"
              >
              </q-icon>
            </template>
          </q-input>
        </template>
      </datepicker>

      <q-btn
        flat
        round
        dense
        icon="add"
        color="primary"
        @click.prevent="modalAdd = true"
      />

      <q-space />
      <q-input
        dense
        outlined
        v-model="searchKeyword"
        label="ค้นหา"
        clearable
        style="width: 300px"
      >
        <template v-slot:append v-if="!searchKeyword">
          <q-icon name="search" /> </template
      ></q-input>
    </q-toolbar>
  </q-card>

  <!-- Tabs -->
  <q-card class="q-mt-sm">
    <q-card-section style="padding: 0px">
      <q-separator />
      <q-tabs
        v-model="store.tabsMain"
        inline-label
        align="justify"
        indicator-color="primary"
        active-color="primary bg-teal-1"
      >
        <q-tab
          v-for="(tab, index) in tabsManu"
          :key="index"
          :name="tab.name"
          :label="tab.label"
        />
      </q-tabs>
      <q-separator />

      <q-tab-panels v-model="store.tabsMain" animated>
        <q-tab-panel
          v-for="(panel, index) in tabsManu"
          :key="index"
          :name="panel.name"
        >
          <TableList />
        </q-tab-panel>
      </q-tab-panels>
    </q-card-section>
  </q-card>

  <DialogFormCommand v-model:modal="modalAdd" :is-copy="false" />
</template>

<style scoped></style>
