<script setup lang="ts">
import type { QTableProps } from "quasar"
import { ref } from "vue"
import { useQuasar } from "quasar"
import { useRouter } from "vue-router"

const router = useRouter()
const $q = useQuasar()

import Table from "@/components/Table.vue"

const filter = ref<string>("")
const rows = ref<any>([
	{ date: "02/02/2566", position: "นักจัดการงานทั่วไป", noPos: "กบห.2", level: "ปฏิบัติการ", salary: "15920", transfer: "กองบริหารทั่วไป/ฝ่ายการคลัง", status: "รอดำเนินการ" },
	{ date: "02/02/2565", position: "นักจัดการงานทั่วไป", noPos: "กบห.2", level: "ปฏิบัติการ", salary: "15920", transfer: "กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร", status: "เสร็จสิ้น" },
	{ date: "10/01/2565", position: "นักจัดการงานทั่วไป", noPos: "กบห.2", level: "ปฏิบัติการ", salary: "15920", transfer: "กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร", status: "เสร็จสิ้น" },
])
const initialPagination = ref({
	rowsPerPage: 0,
})
const visibleColumns = ref<String[]>(["no", "date", "position", "noPos", "level", "salary", "transfer", "status"])

const columns = ref<QTableProps["columns"]>([
	{
		name: "no",
		align: "left",
		label: "ลำดับ",
		sortable: true,
		field: "no",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:5px;",
	},
	{
		name: "date",
		align: "left",
		label: "วันที่",
		sortable: true,
		field: "date",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:15%;",
	},
	{
		name: "position",
		align: "left",
		label: "ตำแหน่ง",
		sortable: true,
		field: "position",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:15%;",
	},
	{
		name: "noPos",
		align: "left",
		label: "ตำแหน่งเลขที่",
		sortable: true,
		field: "noPos",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px",
	},
	{
		name: "level",
		align: "left",
		label: "อันดับ/ระดับ",
		sortable: true,
		field: "level",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px",
	},
	{
		name: "salary",
		align: "left",
		label: "เงินเดือน",
		sortable: true,
		field: "salary",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px",
	},
	{
		name: "transfer",
		align: "left",
		label: "โอนไปสังกัด",
		sortable: true,
		field: "transfer",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px",
	},
	{
		name: "status",
		align: "left",
		label: "สถานะ",
		sortable: true,
		field: "status",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:10%;",
	},
])
const clickAdd = async () => {
	router.push(`/transfer/add`)
}
</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 class="col-12">
				<q-card bordered class="q-pa-md">
					<Table
						style="max-height: 80vh"
						:rows="rows"
						:columns="columns"
						:filter="filter"
						:visible-columns="visibleColumns"
						v-model:inputfilter="filter"
						v-model:inputvisible="visibleColumns"
						:pagination="initialPagination"
						:inputShow="false"
						:add="clickAdd"
						:titleText="''"
					>
						<template #columns="props">
							<q-tr :props="props" class="cursor-pointer" @click="router.push(`/transfer/1`)">
								<q-td v-for="col in props.cols" :key="col.name" :props="props">
									<div v-if="col.name == 'no'">
										{{ props.rowIndex + 1 }}
									</div>
									<div v-else-if="col.name == 'status'">
										<q-icon size="20px" v-if="props.row.status == 'รอดำเนินการ'" name="mdi-timer-sand" color="deep-orange">
											<q-tooltip>รอดำเนินการ</q-tooltip>
										</q-icon>
										<q-icon size="20px" v-else name="mdi-check" color="teal">
											<q-tooltip>เสร็จสิ้น</q-tooltip>
										</q-icon>
									</div>
									<div v-else>
										{{ col.value }}
									</div>
								</q-td>
							</q-tr>
						</template>
					</Table>
				</q-card>
			</div>
		</div>
	</div>
</template>
<style></style>
