<script setup lang="ts">
import type { QTableProps } from "quasar"
import { ref, onMounted } from "vue"
import { useQuasar } from "quasar"
import { useRouter, useRoute } from "vue-router"
import { useCounterMixin } from "@/stores/mixin"
import http from "@/plugins/http"
import config from "@/app.config"

const router = useRouter()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader } = mixin
const leaveReason = ref("")
const noteReason = ref("")
const routeName = router.currentRoute.value.name

const saveForm = () => {
	$q.dialog({
		title: "ยืนยันข้อมูลแบบสอบถาม",
		message: "ต้องการส่งข้อมูลแบบสอบถามนี้ใช่หรือไม่?",
		cancel: {
			flat: true,
			color: "negative",
		},
		persistent: true,
	})
		.onOk(async () => {
			createResult()
		})
		.onCancel(() => {})
		.onDismiss(() => {})
}

const createResult = async () => {
	// const formData = new FormData()
	// // formData.append("Location", tranferOrg.value)
	// // formData.append("SendDate", dateToISO(dateCommand.value))
	// await http
	// 	.post(config.API.listResign(), formData)
	// 	.then((res: any) => {
	// 		// console.log(res);
	// 		success($q, "บันทึกข้อมูลสำเร็จ")
	// 		router.push(`/leave`)
	// 	})
	// 	.catch((e: any) => {
	// 		messageError($q, e)
	// 		console.log(e)
	// 	})
	success($q, "บันทึกข้อมูลสำเร็จ")
	router.push(`/leave`)
}
</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" @click="router.go(-1)" />
				<div>เราได้รับแบบฟอร์มของคุณแล้ว กรุณาตอบแบบสอบถาม</div>
			</div>
			<div class="col-12">
				<q-card bordered>
					<div class="col-12 row q-col-gutter-md q-pa-md">
						<div class="col-xs-12 col-sm-12">
							<q-card bordered flat>
								<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">แบบสอบถาม</div>
								<q-separator />
								<div class="col-12 row q-pa-sm q-col-gutter-sm">
									<q-input class="col-12" dense outlined v-model="leaveReason" label="ทำไมคุณถึงลาออก?" type="textarea" />
									<q-input class="col-12" dense outlined v-model="noteReason" label="สิ่งที่คุณต้องการจะบอกเรา?" type="textarea" />
									<q-separator />
								</div>
							</q-card>
						</div>
					</div>
					<div class="row col-12 q-pa-sm">
						<q-space />
						<q-btn unelevated dense class="q-px-md items-center" color="primary" label="บันทึกข้อมูลแบบสอบถาม" @click="saveForm" />
					</div>
				</q-card>
			</div>
		</div>
	</div>
</template>
