<template>
	<section class="relative pt-16 pb-32 flex content-center items-center justify-center">
		<div class="container mx-auto px-1 lg:px-4">
			<div class="flex flex-wrap justify-center text-center pt-4">
				<div class="w-full lg:w-6/12 px-4">
					<h2 class="text-2xl font-semibold uppercase">Patients</h2>
				</div>
			</div>
			<div class="card flex flex-wrap items-center pt-8">
				<div class="card-body w-full md:w-12/12 px-4 mr-auto ml-auto bg-emerald-700 rounded shadow-lg">
					<div class="flex flex-wrap justify-between">
						<div class="grid gap-4 grid-cols-2">
						<label for="SearchField" class="text-white dark:text-white text-xs font-bold">Search Field :
							<select id="SearchField" v-model="searchField"
								class="peer px-4 py-2 text-black dark:text-white dark:bg-dark-grey text-sm rounded transition-colors outline outline-1 outline-medium-grey/25
									cursor-pointer hover:outline-main-purple focus:outline-main-purple placeholder:text-black/25 dark:placeholder:text-white/25"
							>
								<option value="lastName">Last Name</option>
								<option value="firstName">First Name</option>
              					<option value="dob">DOB(Date of birth)</option>
          					</select>
						</label>
						
						<label for="SearchValue" class="text-white dark:text-white text-xs font-bold">Search Value :
							<input v-if="searchField === 'dob'" type="text" id="SearchValue"
			 					class="peer px-4 py-2 text-black dark:text-white dark:bg-dark-grey text-sm rounded transition-colors outline outline-1 outline-medium-grey/25
									cursor-pointer hover:outline-main-purple focus:outline-main-purple placeholder:text-black/25 dark:placeholder:text-white/25"
									v-model="searchValue"
									size=10 maxlength=10  onkeydown="this.value=this.value.replace(/^(\d\d)(\d)$/g,'$1/$2').replace(/^(\d\d\/\d\d)(\d+)$/g,'$1/$2').replace(/[^\d\/]/g,'')" 
							/>
							<input v-else type="text" id="SearchValue"
			 					class="peer px-4 py-2 text-black dark:text-white dark:bg-dark-grey text-sm rounded transition-colors outline outline-1 outline-medium-grey/25
									cursor-pointer hover:outline-main-purple focus:outline-main-purple placeholder:text-black/25 dark:placeholder:text-white/25"
									v-model="searchValue"
							/>
						</label>
						</div>
						<button class="btn btn-active btn-accent" v-on:click="createNewPatient"><i class="fas fa-plus"></i></button>
					</div>
					
					<EasyDataTable 
						:headers="headers" 
						:items="patientsStore.getPatients" 
						:rows-per-page="12" 
						:loading="patientsStore.getLoading" 
						:search-field="searchField"
                		:search-value="searchValue"
						border-cell 
						buttons-pagination
						>
						<template #item-sex="item">{{ item.sex == "0" ? 'male' : 'female' }}</template>
						<template #item-actions="item">
							<div class="operation-wrapper">
								<button class="btn btn-xs btn-error" @click="deleteItem(item)"><i class="fas fa-trash-alt"></i>Delete</button>
								<button class="btn btn-xs btn-warning" @click="editItem(item)"><i class="fas fa-edit"></i>Update</button>
							</div>
						</template>
					</EasyDataTable>
				</div>
			</div>
		</div>
		<bgOverlay data-no-dragscroll />
		<div class="absolute top-16 z-10 max-w-max w-11/12 lg:w-8/12">
		<!-- <div class="absolute top-1/2 left-1/2 translate-x-[-50%] py-10 z-10 max-w-max w-8/12"> -->
			<PatientForm v-if="systemStore.patientForm.visible" />
		</div>
	</section>

	<!-- toast alert 메세지 -->
	<Toast ref="toastRef" :content="content"></Toast>
</template>

<script>
import moment from 'moment'

import Toast from "@/components/utils/Toast.vue";

import bgOverlay from '@/components/utils/bgOverlay.vue';
import PatientForm from '@/components/patient/PatientForm.vue';

import { mapState } from "vuex";

import { useBoardsStore } from '@/store/boards.js';
import { useSystemStore } from '@/store/system.js';
import { usePatientsStore } from '@/store/patients.js';


export default {
	name: "Patients",
	data() {
		return {
			content: "",
			boardsStore: useBoardsStore(),
			systemStore: useSystemStore(),
			patientsStore: usePatientsStore(),

			loading: true,

			headers: [
				{ text: "Last Name", value: "lastName" },
				{ text: "First Name", value: "firstName" },
				{ text: "SSN", value: "ssn" },
				{ text: "DOB", value: "dob" },
				{ text: "Gender", value: "sex" },
				{ text: "CellPhone", value: "cellPhone" },
				{ text: "City", value: "city" },
				// { text: "State", value: "state" },
				{ text: "ACTIONS", value: "actions" }
			],
			// items: [],

			searchField: "lastName",
      		searchValue: "",

		};
	},
	mounted() {
		// this.boardsStore.$subscribe((mutations, state) => {
		//   localStorage.setItem('data', JSON.stringify(state))
		// })
		// const storageData = localStorage.getItem("data")
		// if (storageData === null) {
		//   const jsonData = import("@/assets/json/data.json")
		//   this.boardsStore.boards = jsonData.boards;
		// } else {
		//   this.boardsStore.$state = JSON.parse(storageData)
		// }

		// this.$nextTick(function () {
		// 	this.$refs.target?.scrollIntoView();
		// });
		this.patientsStore.load();

	},
	unmounted(){
		this.systemStore.hideOverlay();
	},
	methods: {
		yyyymmdd(date) {
			return moment(date).format('YYYY-MM-DD');
		},
		// toggleModal: function () {
		// 	this.showModal = !this.showModal;
		// },

		deleteItem: function (val) {
			this.patientsStore.delete(val);
		},
		editItem: function (val) {
			this.patientsStore.selectedPatient = val;
			this.systemStore.overlay = true
			this.systemStore.patientForm = { visible: true, edit: true }
			// this.items = this.items.filter((item) => item.id !== val.id);
		},

		// editItem: function(val: Item) => {
		//   isEditing.value = true;
		//   const { height, weight, id } = val;
		//   editingItem.height = height;
		//   editingItem.weight = weight;
		//   editingItem.id = id;
		// };
		createNewPatient: function () {
			this.systemStore.overlay = true
			this.systemStore.patientForm = { visible: true, edit: false }
		},
	},
	components: {
		Toast,
		PatientForm,
		bgOverlay,
		// Profile
	},
	computed: {
		...mapState(["isRTL", "isAbsolute"]),

		// currentUser() {
		// 	return this.$store.state.auth.user;
		// },
	},

};
</script>
