<template>
	<Subtitle value="Inbox" />
	<div>
		<div class="card mb-3 shadow">
			<div class="card-header d-flex justify-content-between align-items-center">
				<span>Alerts</span>
			</div>
			<div class="card-body">
				<table class="table" style="font-family: monospace;" v-if="(resultset) && (resultset.length > 0)">
					<thead>
						<tr><th>I</th><th>Patient</th><th>Loc</th><th>Urg</th><th>Time</th><th>Message</th><th>XQAID</th><th>DUZ</th></tr>
					</thead>
					<tbody>
						<tr v-for="row in resultset" :style="{ backgroundColor: strHashHSL(row.patient, '90%') }">
							<td>{{row.info}}</td>
							<td>{{row.patient}}</td>
							<td>{{row.location}}</td>
							<td>{{urgency[row.urgency]}}</td>
							<td>{{datefmt(strptime_vista(row.meta_time))}}</td>
							<td>{{row.message}}</td>
							<td>{{row.meta_xqaid}}</td>
							<td>{{row.meta_duz}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</template>

<script>
	import { strHashHSL, strptime_vista } from './util.mjs';

	import Subtitle from './Subtitle.vue';

	export default {
		components: {
			Subtitle
		},
		props: {
			client: Object
		},
		data() {
			return {
				resultset: [],
				urgency: { 'n/a': 'n/a', 'low': 'L', 'Moderate': 'M', 'HIGH': 'H' }
			};
		},
		methods: {
			strHashHSL,
			strptime_vista,
			datefmt(date) {
				return date ? date.toLocaleDateString('sv-SE') + ' ' + date.toLocaleTimeString('en-GB') : '';
			}
		},
		created() {
			this.$watch(
				() => this.client,
				async () => {
					if(this.client) this.resultset = await this.client.ORWORB_FASTUSER();
					else this.resultset = [];
				},
				{ immediate: true }
			);
		}
	};
</script>
