<script setup lang="ts">
import { ref, reactive, watch } from "vue"
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/BirthForm"
import { useCounterMixin } from "@/stores/mixin"

const mixin = useCounterMixin()
const { date2Thai, calculateDurationYmd } = mixin
const edit = ref<boolean>(true)

/** รับ props มาจากหน้าหลัก */
const props = defineProps({
	data: {
		type: Object,
		default: null,
	},
	onSubmit: {
		type: Function,
		default: () => "",
	},
})

/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
	leaveNo: "",
	startLeaveDate: null,
	endLeaveDate: null,
	contractTel: "",
	leaveTotal: "",
	leaveLast: "",
	leaveContactTel: "",
	leaveContactLocation: "",
	leaveDetail: "",
	file: [],
})

/** ตัวแปร ref สำหรับแสดง validate */
const leaveNoRef = ref<object | null>(null)
const startLeaveDateRef = ref<object | null>(null)
const endLeaveDateRef = ref<object | null>(null)
const contractTelRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null)
const leaveContactTelRef = ref<object | null>(null)
const leaveContactLocationRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
const fileRef = ref<object | null>(null)

/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
	leaveNo: leaveNoRef,
	startLeaveDate: startLeaveDateRef,
	endLeaveDate: endLeaveDateRef,
	contractTel: contractTelRef,
	leaveTotal: leaveTotalRef,
	leaveContactTel: leaveContactTelRef,
	leaveContactLocation: leaveContactLocationRef,
	leaveDetail: leaveDetailRef,
	file: fileRef,
}

/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
	// console.log("data==>", props.data)
	formData.leaveNo = props.data.leaveNo
	formData.startLeaveDate = props.data.startLeaveDate
	formData.endLeaveDate = props.data.endLeaveDate
	formData.contractTel = props.data.contractTel
	formData.leaveTotal = props.data.leaveTotal
	formData.leaveContactTel = props.data.leaveContactTel
	formData.leaveDetail = props.data.leaveDetail
	formData.file = props.data.file
})

/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const fileDocDataUpload = ref<File[]>([])
async function fileUploadDoc(files: any) {
	files.forEach((file: any) => {
		fileDocDataUpload.value.push(file)
	})
}

/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
	const hasError = []
	for (const key in FormRef) {
		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
			const property = FormRef[key]
			if (property.value && typeof property.value.validate === "function") {
				const isValid = property.value.validate()
				hasError.push(isValid)
			}
		}
	}
	if (hasError.every(result => result === true)) {
		props.onSubmit()
	}
}
</script>

<!-- ฟอร์มลาคลอดบุตร-->
<template>
	<div style="display: flex; align-items: center">
		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
	</div>
	<form @submit.prevent.stop="onValidate">
		<q-card bordered class="q-pa-md bg-grey-1">
			<div class="col-12 row q-pa-sm q-col-gutter-sm">
				<q-input
					class="col-12 col-sm-12"
					ref="leaveNoRef"
					for="leaveNoRef"
					dense
					outlined
					v-model="formData.leaveNo"
					label="เขียนที่"
					hide-bottom-space
					bg-color="white"
					:readonly="!edit"
					:rules="[val => !!val || `${'เขียนที่'}`]"
				/>

				<datepicker
					class="col-12 col-md-3 col-sm-12"
					menu-class-name="modalfix"
					v-model="formData.startLeaveDate"
					:locale="'th'"
					autoApply
					hide-bottom-space
					borderless
					:enableTimePicker="false"
					week-start="0"
					:readonly="!edit"
				>
					<template #year="{ year }">
						{{ year + 543 }}
					</template>
					<template #year-overlay-value="{ value }">
						{{ parseInt(value + 543) }}
					</template>
					<template #trigger>
						<q-input
							outlined
							dense
							ref="startLeaveDateRef"
							for="startLeaveDateRef"
							hide-bottom-space
							bg-color="white"
							:readonly="!edit"
							class="full-width datepicker"
							:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
							:label="`${'ลาตั้งแต่วันที่'}`"
							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
						>
							<template v-slot:prepend>
								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
							</template>
						</q-input>
					</template>
				</datepicker>

				<datepicker
					class="col-12 col-md-3 col-sm-12"
					menu-class-name="modalfix"
					v-model="formData.endLeaveDate"
					:locale="'th'"
					autoApply
					borderless
					hide-bottom-space
					:enableTimePicker="false"
					week-start="0"
					:readonly="!formData.startLeaveDate"
					:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
				>
					<template #year="{ year }">
						{{ year + 543 }}
					</template>
					<template #year-overlay-value="{ value }">
						{{ parseInt(value + 543) }}
					</template>
					<template #trigger>
						<q-input
							outlined
							dense
							ref="endLeaveDateRef"
							for="endLeaveDateRef"
							hide-bottom-space
							bg-color="white"
							:readonly="!formData.startLeaveDate"
							class="full-width datepicker"
							:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
							:label="`${'ลาถึงวันที่'}`"
							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
						>
							<template v-slot:prepend>
								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
							</template>
						</q-input>
					</template>
				</datepicker>
				<q-input class="col-12 col-md-2 col-sm-6" dense outlined ref="leaveTotalRef" for="leaveTotalRef" v-model="formData.leaveTotal" label="จำนวนวันที่ลา" readonly hide-bottom-space />
				<q-input
					class="col-12 col-md-3 col-sm-6"
					dense
					outlined
					ref="leaveLastRef"
					for="leaveLastRef"
					v-model="formData.leaveLast"
					label="ลาครั้งสุดท้ายเมื่อวันที่"
					readonly
					hide-bottom-space
					bg-color="white"
				/>
				<div class="full-width">
					<div class="q-col-gutter-sm row">
						<q-input
							class="col-12 col-md-3 col-sm-12"
							dense
							outlined
							hide-bottom-space
							bg-color="white"
							ref="leaveContactTelRef"
							for="leaveContactTelRef"
							v-model="formData.leaveContactTel"
							mask="(###)-###-####"
							unmasked-value
							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
							:readonly="!edit"
							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
						/>

						<q-input
							class="col-12 col-md-9 col-sm-12"
							dense
							outlined
							hide-bottom-space
							bg-color="white"
							ref="leaveContactLocationRef"
							for="leaveContactLocationRef"
							v-model="formData.leaveContactLocation"
							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
							:readonly="!edit"
							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
						/>
					</div>
				</div>
				<q-input
					type="textarea"
					class="col-12 col-md-12 col-sm-12"
					dense
					outlined
					bg-color="white"
					ref="leaveDetailRef"
					for="leaveDetailRef"
					v-model="formData.leaveDetail"
					label="รายละเอียด"
					:readonly="!edit"
				/>

				<q-file
					ref="fileRef"
					for="fileRef"
					hide-bottom-space
					v-model="formData.file"
					@added="fileUploadDoc"
					dense
					bg-color="white"
					label="เอกสารประกอบ"
					outlined
					use-chips
					multiple
					class="q-pl-sm col-12"
					:rules="[val => !!val || `${'กรุณาเลือกไฟล์'}`]"
				>
					<template v-slot:prepend>
						<q-icon name="attach_file" color="primary" />
					</template>
				</q-file>

				<div class="col-12 row" v-if="!edit">
					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
					</div>
					<q-card bordered flat class="full-width">
						<q-list separator>
							<q-item v-for="(file, index) in formData.file" :key="index" class="q-my-xs">
								<q-item-section>
									<q-item-label class="full-width ellipsis">
										{{ file.name }}
									</q-item-label>
									<q-item-label caption> </q-item-label>
								</q-item-section>
							</q-item>
						</q-list>
					</q-card>
				</div>
			</div>
		</q-card>

		<q-separator class="q-mt-sm" />

		<div class="row col-12 q-pt-md">
			<q-space />
			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
		</div>
	</form>
</template>
