<template>
    <div>
        <b-card title="員工編號輸入">
            <b-form-input v-model="input" @keydown.native="test_keydown_handler"></b-form-input>
        </b-card>

        <b-card title="中獎人員確認">
            <b-media no-body>
                <b-media-aside>
                    <b-img :src="'/images/profile-picture/' + user.user_id + '.jpg'" blank-color="#ccc" fluid
                        alt="placeholder" style="width:300prox;" onerror="this.src='/images/error.png'" />
                </b-media-aside>

                <b-media-body class="ml-1">
                    <h5 class="mt-0">姓名</h5>
                    <b-card-text>{{ user.name }}</b-card-text>
                    <h5 class="mt-0">編號</h5>
                    <b-card-text>{{ user.user_id }}</b-card-text>
                    <h5 class="mt-0">部門</h5>
                    <b-card-text>{{ department_name }}</b-card-text>
                </b-media-body>
            </b-media>
        </b-card>

        <b-modal ref="true-modal" title="恭喜中獎" ok-title="確認領取" cancel-title="取消" @ok="handleOK">
            <b-card-text>
                恭喜中獎：{{ prize }}，請確認領獎人員是否正確。
            </b-card-text>
        </b-modal>
        <b-modal ref="false-modal" title="沒有中獎" ok-only ok-title="確認">
            <b-card-text>
                你沒有中獎，明年再加油喔。
            </b-card-text>
        </b-modal>
        <b-modal ref="wrong-id-modal" title="沒有此員工編號" ok-only ok-title="確認">
            <b-card-text>
                該員工編號或是來賓編號不存在，或是該編號並沒有報到。
                請再次確認。
            </b-card-text>
        </b-modal>
        <b-modal ref="confirm-modal" title="確認領取" ok-only ok-title="確認">
            <b-card-text>
                以確認領取獎品，恭喜您中獎!
            </b-card-text>
        </b-modal>
        <b-modal ref="already-modal" title="重複領取" ok-only ok-title="確認">
            <b-card-text>
                {{ user.name }}已經領過獎品 {{ prize }} 了喔。
            </b-card-text>
        </b-modal>
    </div>
</template>
<script>
import { BCard, BCardText, BButton, BMedia, BFormInput, BImg, BMediaAside, BMediaBody, BModal } from 'bootstrap-vue'
import useJwt from '@/auth/jwt/useJwt'
import Ripple from 'vue-ripple-directive'

export default {
    name: "websocket",
    components: {
        BCard,
        BCardText,
        BButton,
        BMedia,
        BFormInput,
        BImg,
        BMediaAside,
        BMediaBody,
        BModal,
    },
    directives: {
        Ripple,
    },
    data() {
        return {
            user: {},
            input: "",
            isRecipients: "",
            prize: "",
            prize_id: "",
            isClaimed: false,
            department_name: "",
        }
    },
    methods: {
        test_keydown_handler(event) {
            if (event.which === 13) {
                useJwt.postData('/api/recipient/claim', { 'user_id': this.input, 'activity_id': this.$route.params.activity_id }).then(response => {
                    this.user = response.data.user;
                    this.isRecipients = response.data.isRecipients;
                    this.prize = response.data.prize;
                    this.prize_id = response.data.prize_id;
                    this.isClaimed = response.data.isClaimed;
                    this.department_name = response.data.department_name;
                    if (!this.isRecipients) {
                        this.$refs['false-modal'].toggle();
                    } else if (this.isClaimed == 1) {
                        this.$refs['already-modal'].toggle();
                    } else {
                        this.$refs['true-modal'].toggle();
                    }
                    this.input = "";
                }).catch(error => {
                    this.$refs['wrong-id-modal'].toggle();
                    console.log(error)
                    this.user = {};
                });
            }
        },
        handleOK() {
            useJwt.postData('/api/recipient/isClaimed', { 'user_id': this.user.user_id, 'prize_id': this.prize_id }).then(response => {
                this.$refs['confirm-modal'].toggle();
            }).catch(error => {
                console.log(error)
            });
        }
    },
}

</script>
