<template>
    <div ref="body">
        <div class="func-group">
            <button class="func-btn" @click.prevent="draw">
            </button>
        </div>
    </div>
</template>

<script>
import BCardCode from "@core/components/b-card-code/BCardCode.vue";
import {
    BCard,
    BCardTitle,
    BRow,
    BCol,
    BBadge,
    BButton,
    BProgress,
} from "bootstrap-vue";

import useJwt from "@/auth/jwt/useJwt";

export default {
    components: {
        BCard,
        BCardTitle,
        BCardCode,
        BRow,
        BCol,
        BBadge,
        BButton,
        BProgress,
    },
    data() {
        return {};
    },
    created() {
        this.bodyListener = (e) => {
			if ((e.keyCode === 13 || e.keyCode === 32) && e.target === document.body) {
				console.log("enter");
				this.draw();
			}
		}
        document.body.addEventListener('keyup', this.bodyListener, false)
    },
    mounted() {},
    beforeDestroy() {
        document.removeEventListener('keyup', this.bodyListener);
    },
    methods: {
        draw(){
            useJwt.postData('/api/drawManager', {
				message: "draw"
			}).then(res => {
				// console.log(res);
			});
        },
    },
    computed: {},
};
</script>

<style lang="scss">
@import "~@resources/scss/vue/libs/vue-select.scss";
html,
body {
	width: 100%;
}

body {
	background-color: white;
	background-image: url('/draw-button.png');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: left top;
	font-family: 'Open Sans', Verdana, Geneva, "新微軟正黑體", 'Microsoft JhengHei', "微軟正黑體", sans-serif,'全真海報體';
}

.func-group {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 使容器填滿視窗高度 */
}

.func-btn {
    opacity: 0; /* 使按鈕透明但仍可點擊 */
    cursor: pointer; /* 可選，更改鼠標樣式以指示可點擊 */
    width: 50%;
    height: 50%;
}
</style>
