<template>
  <b-card style="max-width: 24rem;">
    <!-- <b-form-input debounce="500" lazy-formatter v-model="id" placeholder="輸入您的工號..."></b-form-input> -->
    <b-form-group
      label-cols="4"
      label-cols-lg="2"
      label="工號"
      label-for="job-id">
      <b-form-input
        id="job-id"
        v-model="id"
        debounce="800"
        placeholder="輸入您的工號..." />
    </b-form-group>
    <div>
      <b-img thumbnail fluid :src="photo" onerror="this.src='/images/user/error.png'" />
      <h1 class="text-center">{{ user.name }}</h1>
      <img :src="barcode" />
    </div>

  </b-card>



</template>
<script>
import { BCard, BCardText, BButton, BFormGroup, BFormInput, BMedia, BImg, BMediaAside, BMediaBody } from 'bootstrap-vue'
import useJwt from '@/auth/jwt/useJwt'
import bwipjs from 'bwip-js';

export default {
  name: "websocket",
  components: {
    BCard,
    BCardText,
    BButton,
    BFormGroup,
    BFormInput,
    BMedia,
    BImg,
    BMediaAside,
    BMediaBody,
  },
  data() {
    return {
      user: {},
      id: "",
      barcode: "",
      photo: "",
    }
  },
  created() {

    let canvas = document.createElement('canvas');
    try {
      let options = {
        bcid: 'code39',
        text: this.id,
        scale: 3,
        height: 10,
        includetext: false,
        textxalign: 'center',
      };
      bwipjs.toCanvas(canvas, options);
      this.barcode = canvas.toDataURL('image/png');
      this.photo = '/images/user/' + this.id + '.jpg';
    } catch (e) {
      // `e` may be a string or Error object
      console.log(e)
    }
  },
  computed: {

  },
  methods: {
  },
  watch: {
    id: function (newValue) {
      let canvas = document.createElement('canvas');
      try {
        let options = {
          bcid: 'code39',
          text: newValue,
          scale: 3,
          height: 10,
          includetext: false,
          textxalign: 'center',
        };
        bwipjs.toCanvas(canvas, options);
        this.barcode = canvas.toDataURL('image/png');
        this.photo = '/images/user/' + newValue + '.jpg';
        useJwt.postData('/api/lottery/show', { 'id': newValue }).then(response => {
          this.user = response.data.user;
        }).catch(error => {
          console.log(error)
          this.user = {};
        });
      } catch (e) {
        // `e` may be a string or Error object
        console.log(e)
      }


    }
  }
}

</script>

<style>

</style>
