<template>
	<b-row>
		<b-col md="6">
			<b-card title="報到人員" style="height: 65vh;">
				<b-row>
					<b-col md="6">
						<b-img
							:src="avatar(user.user_id)"
							blank-color="#ccc"
							fluid
							alt="placeholder"
							style="width:42vh;"
							onerror="this.src='/images/error.png'" />
					</b-col>
					<b-col md="6">
						<div style="font-size: 2rem;">
							<b-card-text style="color: #0085DD">
								姓名
							</b-card-text>
							<b-card-text>
								{{ user.name }}
							</b-card-text>
							<b-card-text style="color: #0085DD">
								工號
							</b-card-text>
							<b-card-text>
								{{ user.user_id }}
							</b-card-text>
							<b-card-text style="color: #0085DD">
								部門
							</b-card-text>
							<b-card-text>
								{{ user.department }}
							</b-card-text>
							<b-card-text style="color: #0085DD">
								報到狀態
							</b-card-text>
							<b-card-text>
								{{ checkinStatus(user.is_checked_in) }}
							</b-card-text>
						</div>
					</b-col>
				</b-row>
				

			</b-card>
		</b-col>
		<b-col md="6">
			<b-card title="報到輸入" style="height: 65vh;">
				<b-input-group prepend="編號" class="mt-3">
					<b-form-input v-model="input" @keydown.native="keyListener"
						placeholder="請輸入員工編號或來賓編號..."></b-form-input>
					<b-input-group-append>
						<b-button @click="searchData" variant="info">送出</b-button>
					</b-input-group-append>
				</b-input-group>
				<br>
				<b-button
					v-ripple.400="'rgba(255, 255, 255, 0.15)'"
					variant="success"
					@click="showToast('success')">
					確認為本人報到
				</b-button>
				<b-button
					v-ripple.400="'rgba(255, 255, 255, 0.15)'"
					variant="danger"
					@click="showMsgBoxTwo">
					非本人取消報到
				</b-button>
			</b-card>

		</b-col>
	</b-row>
</template>
<script>
import { BRow, BCol, BCard, BCardText, BButton, BMedia, BFormInput, BImg, BMediaAside, BMediaBody, BInputGroup, BInputGroupAppend } from 'bootstrap-vue'
import Ripple from 'vue-ripple-directive'
import Pusher from 'pusher-js';
import useJwt from '@/auth/jwt/useJwt'
import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
import { avatarText } from '@core/utils/filter';

export default {
	name: "websocket",
	components: {
		BRow,
		BCol,
		BCard,
		BCardText,
		BButton,
		BMedia,
		BFormInput,
		BImg,
		BMediaAside,
		BMediaBody,
		BInputGroup,
		BInputGroupAppend,
		ToastificationContent,
	},
	directives: {
		Ripple,
	},
	data() {
		return {
			boxTwo: '',
			user: { name: "　", user_id: "　", department: "　" },
			scannerText: "",
			input: "",
		}
	},
	created() {


		Pusher.logToConsole = true;

		var pusher = new Pusher('9fb7f6f0141efc7e1293', {
			cluster: 'ap3'
		});

		var channel = pusher.subscribe('my-channel');
		channel.bind('my-event', data => {
			useJwt.postData('/api/user/show', { 'id': data.message }).then(response => {
				this.user = response.data.user;
			}).catch(error => {
				console.log(error)
				this.user = {};
			});
		});


	},
	computed: {

	},
	methods: {
		keyListener(event) {
			if (event.which === 13) {
				this.searchData()
			}
		},
		searchData() {
			useJwt.postData('/api/checkin/show', { 'user_id': this.input, 'activity_id': this.$route.params.activity_id }).then(response => {
				console.log(response.data.user);
				if (response.data.user) {
					this.user = response.data.user;
				} else {
					this.user = { name: "查無此人", user_id: "　", department: "　" };
				}
				this.input = "";
			}).catch(error => {
				console.log(error)
				this.user = { name: "查無此人", user_id: "　", department: "　" };
				this.input = "";
			});
		},
		showMsgBoxTwo() {
			this.user = { name: "　", user_id: "　", department: "　" };
		},
		showToast(variant) {
			useJwt.postData('/api/check_in/update', { 'user_id': this.user.user_id }).then(response => {
				console.log(response.data)
				this.$toast({
					component: ToastificationContent,
					props: {
						title: '報到成功',
						icon: 'CheckCircleIcon',
						text: this.user.user_id + '報到成功!',
						variant,
					},
				})
				this.user.is_checked_in = 1;
			}).catch(error => {
				console.log(error)
			});


		},
		checkinStatus(status) {

			return status == true ? "已經報到" : "尚未報到";
		},
		avatar(user_id) {
			if (this.user && this.user.department == "來賓") {
				return '/images/vip.jpg';
			} else {
				return '/images/profile-picture/' + user_id + '.jpg';
			}
		}
	},
	watch: {

	},
	mounted() {

	}
}

</script>

<style></style>
