<script setup lang="ts">
import { reactive, ref, watch } from "vue"

import SickForm from "@/modules/05_leave/componenst/Forms/01_SickForm.vue"
import HelpWifeBirthForm from "@/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue"
import VacationForm from "@/modules/05_leave/componenst/Forms/05_VacationForm.vue"
import FollowSpouseForm from "@/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue"
const type = ref<number>(0)
const typeOption = reactive([
	{ id: 0, name: "" },
	{ id: 1, name: "ลาป่วย" },
	{ id: 2, name: "ลากิจ" },
	{ id: 3, name: "ลาคลอด" },
	{ id: 4, name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
	{ id: 5, name: "ลาพักผ่อน" },
	{ id: 6, name: "ลาติดตามคู่สมรส" },
])

async function onSubmit() {
	console.log("testOnsub")
}

watch(
	() => type.value,
	() => {
		// save store
		console.log("ประเภทการลา===>", type.value)
	}
)
</script>

<template>
	<div class="col-12 row justify-center">
		<div class="col-xs-12 col-sm-12 col-md-11">
			<div class="toptitle text-white col-12 row items-center">
				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" />
				<div>ยื่นใบลา</div>
			</div>

			<q-card bordered>
				<form>
					<div class="col-12 row q-col-gutter-md q-pa-md">
						<div class="col-xs-12 col-sm-12">
							<q-select filled v-model="type" :options="typeOption" label="ประเภทการลา" option-value="id" option-label="name" map-options emit-value />

							<SickForm v-if="type == 1 || type == 2 || type == 3" />
							<HelpWifeBirthForm v-if="type == 4" />
							<VacationForm v-if="type == 5" />
							<FollowSpouseForm v-if="type == 6" />
						</div>
					</div>

					<q-separator />
					<div class="row col-12 q-pa-md">
						<q-space />
						<q-btn id="submitForm" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" @click="onSubmit" />
					</div>
				</form>
			</q-card>
		</div>
	</div>
</template>
