<template>
	<div class="d-flex align-center flex-column">
		<v-card width="800">
			<v-card-title justify-center
				><v-spacer />
				<div class="text-center">
					<h3 class="headline pink--text text--accent-2">Scan QR</h3>
				</div>
				<v-spacer
			/></v-card-title>
			<v-card-text>
				<v-row class="align-center">
					<v-col><qrcode-vue :value="qrVal" :size="size" level="H" /></v-col>
				</v-row>
				<v-row
					><v-col><v-btn block  color="info" @click="sendPrintCommand">Print QR Code</v-btn></v-col></v-row
				>
			</v-card-text>
		</v-card>
	</div>
</template>
<script setup>
import QrcodeVue from "qrcode.vue";
const runtimeConfig = useRuntimeConfig();

definePageMeta({
	layout: "default",
});
const { searchid } = useRoute().params;
const qrVal = ref(searchid);
const size = ref(300);

async function sendPrintCommand() {
	try {
		let myPayload = { publicid: qrVal };
		const myResult = await axios.post(`https://prescription-cms-e3btluzbiq-oa.a.run.app/api/slip/print`, myPayload);
		if (myResult) {
			toast.success("Printing Medicine Slip Code");
		}
	} catch (err) {
		console.log(err);
	}
}
</script>
<style scoped>
canvas {
	padding-left: 0;
	padding-right: 0;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
</style>
