<template>
    <div>
        <b-row>
            <b-col md="12">
                <b-card title="輸入工號查詢個人資訊">
                    <b-input-group prepend="編號" class="mt-3">
                        <b-form-input v-model="user_id" @keydown.native="keyListener"
                            placeholder="請輸入員工編號或來賓編號..."></b-form-input>
                        <b-input-group-append>
                            <b-button size="sm" @click="getUserStatus" variant="info">送出</b-button>
                        </b-input-group-append>
                    </b-input-group>
                </b-card>
            </b-col>
        </b-row>
        <b-row>
            <b-col md="12">
                <b-card>
                    <b-row>
                        <b-col>
                            <b-img :src="avatar(searchData.user_id)" blank-color="#ccc" fluid alt="placeholder"
                                onerror="this.src='/images/error.png'" />
                        </b-col>
                    </b-row>
                </b-card>
            </b-col>
            <b-col md="12">
                <b-card>
                    <b-row>
                        <b-col>
                            <div style="font-size: 2rem;">
                                <div>
                                    <span style="color: #0085DD">
                                        姓　　名
                                    </span>
                                    <span>
                                        {{ searchData.user_name }}
                                    </span>
                                </div>
                                <div>
                                    <span style="color: #0085DD">
                                        工　　號
                                    </span>
                                    <span>
                                        {{ searchData.user_id }}
                                    </span>
                                </div>
                                <div>
                                    <span style="color: #0085DD">
                                        部　　門
                                    </span>
                                    <span>
                                        {{ departmentList[searchData.department_id] }}
                                    </span>
                                </div>
                                <div>
                                    <span style="color: #0085DD">
                                        報到狀態
                                    </span>
                                    <span :style="statusColoer(searchData.is_checked_in)">
                                        {{ checkinStatus(searchData.is_checked_in) }}
                                    </span>
                                </div>
                                <div>
                                    <span style="color: #0085DD">
                                        中獎狀態
                                    </span>
                                    <span :style="statusColoer(searchData.is_awarded)">
                                        {{ awardStatus(searchData.is_awarded, searchData.prize_name) }}
                                    </span>
                                </div>
                                <div>
                                    <span style="color: #0085DD">
                                        領獎狀態
                                    </span>
                                    <span :style="statusColoer(searchData.is_claimed)">
                                        {{ claimStatus(searchData.is_claimed) }}
                                    </span>
                                </div>
                            </div>
                        </b-col>
                    </b-row>
                </b-card>
            </b-col>
        </b-row>
    </div>
</template>

<script>
import { BRow, BCol, BCard, BCardText, BButton, BFormInput, BImg, BInputGroup, BInputGroupAppend } from 'bootstrap-vue'
import useJwt from '@/auth/jwt/useJwt'
import Ripple from 'vue-ripple-directive'
import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'

export default {
    components: {
        BRow,
        BCol,
        BCard,
        BCardText,
        BButton,
        BFormInput,
        BImg,
        BInputGroup,
        BInputGroupAppend,
        ToastificationContent,
    },
    directives: {
        Ripple,
    },
    data() {
        return {
            activity_id: this.$route.params.activity_id,
            user_id: '',
            searchData: [],
            departmentList: [],
        }
    },
    created() {
        useJwt.postData('/api/department/index').then(res => {
            this.departmentList = res.data;
        });
    },
    methods: {
        statusColoer(status) {
            return status == true ? 'color: #00DD88' : 'color: #868686';
        },
        keyListener(event) {
            if (event.which === 13) {
                this.getUserStatus()
                event.srcElement.blur();
            }
        },
        avatar(user_id) {
            if (this.searchData && this.searchData.department_id == "來賓") {
                return '/images/vip.jpg';
            } else {
                return '/images/profile-picture/' + user_id + '.jpg';
            }
        },
        getUserStatus() {
            useJwt.postData('/api/draw/search_user_status', { activity_id: this.activity_id, user_id: this.user_id }).then(res => {
                this.searchData = res.data;
            });
        },
        checkinStatus(status) {
            return status == true ? "已經報到" : "尚未報到";
        },
        awardStatus(is_awarded, prize_name) {
            if (is_awarded == true) {
                return prize_name ? prize_name : "獎品已捐出"
            }
            return "未中獎";
        },
        claimStatus(status) {
            return status == true ? "已領獎" : "尚未領獎";
        },
    },
}
</script>

<style lang="scss">
@import '~@resources/scss/vue/libs/vue-select.scss';
</style>
