<template>
    <div class="toptitle text-dark 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)"
        />
        รายละเอียดการลาออกของ {{ name }}
				
    </div>
    <q-card bordered class="row col-12 text-dark">
			<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
				<div class="q-pl-sm text-weight-bold text-subtitle2">{{ name }}</div>
				<q-space />
				<q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ" />
			</div>
			<div class="col-12"><q-separator/></div>
			<div class="row col-12 q-pa-md">
				<div class="col-12 row bg-white q-col-gutter-md">
					<div class="col-xs-3 col-sm-2 col-md-1 row ">
						<q-img src="@/assets/avatar_user.jpg" />
					</div>
					<div class="col-xs-6 col-sm-3 row items-center">
						<div class="col-12 q-pl-md">
							<div class="col-12 text-top">ตำแหน่งในสายงาน</div>
							<div class="col-12 text-detail">{{position}}</div>
						</div>
					</div>
					<div class="col-xs-6 col-sm-2 row items-center">
						<div class="col-12">
							<div class="col-12 text-top">ระดับ</div>
							<div class="col-12 text-detail">{{level}}</div>
						</div>
					</div>
					<div class="col-xs-6 col-sm-3 row items-center">
						<div class="col-12">
							<div class="col-12 text-top">สังกัด</div>
							<div class="col-12 text-detail">{{institution}}</div>
						</div>
					</div>
					<div class="col-xs-6 col-sm-3 row items-center">
						<div class="col-12">
							<div class="col-12 text-top">สถานะ</div>
							<div class="col-12 text-detail">
								<q-icon size="20px" v-if="status == 'อยู่ระหว่างการพิจารณา'" name="mdi-timer-sand" color="deep-orange" />
								<q-icon size="20px" v-else-if="status == 'อนุมัติ'" name="mdi-close" color="red" />
								<q-icon size="20px" v-else name="mdi-check" color="teal" />
								{{ status }}
							</div>
						</div>
					</div>
				</div>
			</div>
    </q-card>

	<q-card bordered class="row col-12 text-dark q-mt-sm">
			<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>
				<q-space />
				<div class="q-gutter-x-sm">
					<q-btn outline color="primary" dense icon-right="check" class="q-px-sm" label="อนุมัติ" @click="popUp('pass')" />
					<q-btn outline color="red" dense icon-right="close" class="q-px-sm" label="ยับยั้ง" @click="popUp('passNot')"/>

				</div>
				
			</div>
			<div class="col-12"><q-separator/></div>
			<div class="row col-12 q-pa-md">
				<div class="col-12 row bg-white q-col-gutter-md">
					<div class="col-xs-6 col-sm-3 row items-center">
						<div class="col-12 ">
							<div class="col-12 text-top">สถานที่ยื่นขอลาออกจากราชการ</div>
							<div class="col-12 text-detail">{{location}}</div>
						</div>
					</div>
					<div class="col-xs-6 col-sm-3 row items-center">
						<div class="col-12">
							<div class="col-12 text-top">วันที่ยื่นขอลาออกจากราชการ</div>
							<div class="col-12 text-detail">{{filingDate}}</div>
						</div>
					</div>
					<div class="col-xs-6 col-sm-3 row items-center">
						<div class="col-12 ">
							<div class="col-12 text-top">เหตุผลที่ลาออกจากราชการ</div>
							<div class="col-12 text-detail">{{reason}}</div>
						</div>
					</div>
					<div class="col-xs-6 col-sm-3 row items-center">
						<div class="col-12">
							<div class="col-12 text-top">วันที่ขอลาออกจากราชการ</div>
							<div class="col-12 text-detail">{{requestDate}}</div>
						</div>
					</div>
				</div>
			</div>
    </q-card>

	<q-dialog v-model="modalPass" persistent>
    <q-card style="width: 800px">
      <q-form ref="myForm">
        <DialogHeader
          :title="`${modalPass ? 'อนุมัติ' : 'ยับยั้ง'}`"
          :close="clickClose"
        />
        <q-separator />
        <q-card-section class="q-p-sm">
          <div class="col-xs-12 col-sm-12 col-md-12">
            <q-input
              hide-bottom-space
              dense
              lazy-rules
			  outlined 
              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
              v-model="userNote"
              :label="`${'กรอกเหตุผล'}`"
              type="textarea"
            />
          </div>
        </q-card-section>
        <q-separator />
        <DialogFooter
          :editvisible="true"
          :save="modalPass ? savePass : savePassNot"
        />
      </q-form>
    </q-card>
  </q-dialog>
  	<q-dialog v-model="modalPassNot" persistent>
    <q-card style="width: 800px">
      <q-form ref="myForm">
        <DialogHeader
          :title="`${modalPass ? 'อนุมัติ' : 'ยับยั้ง'}`"
          :close="clickClose"
        />
        <q-separator />
        <q-card-section class="q-p-sm">
          <div class="col-xs-12 col-sm-12 col-md-12">
            <q-input
              hide-bottom-space
              dense
			  outlined 
              lazy-rules
              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
              v-model="userNote"
              :label="`${'กรอกเหตุผล'}`"
              type="textarea"
            />
          </div>
        </q-card-section>
        <q-separator />
        <DialogFooter
          :editvisible="true"
          :save="modalPass ? savePass : savePassNot"
        />
      </q-form>
    </q-card>
  </q-dialog>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { useQuasar, QForm } from "quasar";
import { ref, useAttrs } from "vue";
import type { QTableProps } from "quasar";
import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
const router = useRouter();
const userNote = ref<string>("");
const name = ref<string>('นายสมคิด ยอดใจ')
const position = ref<string>('นักจัดการงานทั่วไป')
const level = ref<string>('ชำนาญการพิเศษ')
const institution = ref<string>('ฝ่ายบริหารงานทั่วไป')
const status = ref<string>('อยู่ระหว่างการพิจารณา')
const edit = ref<boolean>(true)
const location = ref<string>('ที่ทำงาน') 
const filingDate = ref<string>('21 ก.ค. 2566')
const reason = ref<string>('เพราะxxx') 
const requestDate = ref<string>('21 ธ.ค. 2566')
	const $q = useQuasar();
const modalPass = ref<boolean>(false);
const modalPassNot = ref<boolean>(false);
const pagination = ref({
  sortBy: "desc",
  descending: false,
  page: 1,
  rowsPerPage: 10,
});

const visibleColumns = ref<string[]>([
  "no",
  "startDate",
	"endDete",
  "intendant",
  "commander",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง

// หัวตาราง
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: true,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "startDate",
    align: "left",
    label: "ตั้งแต่วันที่",
    sortable: true,
    field: "startDate",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
	{
    name: "endDete",
    align: "left",
    label: "ถึงวันที่",
    sortable: true,
    field: "endDete",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
	{
    name: "intendant",
    align: "left",
    label: "ผู้ดูแล",
    sortable: true,
    field: "intendant",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
	{
    name: "commander",
    align: "left",
    label: "ผู้บังคับบัญชา",
    sortable: true,
    field: "commander",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  }
]);

// ข้อมูลตาราง (จำลอง)
const rows = ref<FormProbationDetail[]>([
  {
		no: "1",
		startDate: "09 ก.ย. 2566",
		endDete: "20 ต.ค. 2566",
  	intendant: "นางสาวรัชภรณ์ ภักดี",
  	commander: "นายนภัทร  วันดี"
	},
	{
		no: "2",
		startDate: "09 ก.ย. 2566",
		endDete: "20 ต.ค. 2566",
  	intendant: "นางสาวทวิดา กมลเวชชี",
  	commander: "นางพิศ โพธิ์ดำ"
	},
	{
		no: "3",
		startDate: "09 ก.ย. 2566",
		endDete: "20 ต.ค. 2566",
  	intendant: "นางสาวทวิดา กมลเวชชี",
  	commander: "นายนภัทร  วันดี"
	},
]);

const clickAdd = () => {
};

// ค้นหาในตาราง
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
  filterKeyword.value = "";
  filterRef.value.focus();
};

const attrs = ref<any>(useAttrs());

const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
  else return start + "-" + end + " ใน " + total;
};
const popUp = (action: "pass" | "passNot" ) => {
  if (action === "pass") {
    modalPass.value = true;
  } else if (action === "passNot") {
    modalPassNot.value = true;
  } 
};
const clickClose = () =>{
  userNote.value = ""
	modalPass.value = false
	modalPassNot.value = false
}
const savePass = () =>{

	$q.dialog({
        title: "ยืนยันการขอลาออก",
        message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
        cancel: {
          flat: true,
          const: "negative",
        },
        persistent: true,
      })
        .onOk(() => {
          modalPass.value = false
          console.log('----MSG---- :',userNote.value)
          console.log('passSave (close)')
          userNote.value = ""
        }).onCancel(() => {})
        .onDismiss(() => {});
}

const savePassNot = () => {
  $q.dialog({
        title: "ยืนยันการขอลาออก",
        message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
        cancel: {
          flat: true,
          const: "negative",
        },
        persistent: true,
      })
        .onOk(() => {
          modalPass.value = false
          console.log('----MSG---- :',userNote.value)
          console.log('passSaveNot (close)')
          userNote.value = ""
        }).onCancel(() => {})
        .onDismiss(() => {});
}

</script>
<style lang="scss" scope>
.q-img {
  border-radius: 5px;
	height: 70px;
}
.text-top{
	color: gray;
	font-weight: 400;
	padding-bottom: 3px;
}
.text-detail{
	font-weight: 500;

}
.custom-header-table {
  max-height: 64vh;

  .q-table tr:nth-child(odd) td {
    background: white;
  }

  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
    z-index: 1;
  }

  /* this will be the loading indicator */
  .q-table thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
  }

  .q-table thead tr:first-child th {
    top: 0;
  }
}
</style>