<template>
  <div>
    <b-card title="報到人員">
      <b-media no-body>
        <b-media-aside>
          <b-img
            :src="'/images/user/' + user.job_id + '.jpg'"
            blank-color="#ccc"
            fluid
            alt="placeholder"
            style="width:300px;"
            onerror="this.src='/images/user/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.job_id }}
          </b-card-text>
          <h5 class="mt-0">
            部門
          </h5>
          <b-card-text>
            {{ user.department }}
          </b-card-text>
          <h5 class="mt-0">
            分部
          </h5>
          <b-card-text>
            {{ user.branch }}
          </b-card-text>


        </b-media-body>
      </b-media>

    </b-card>
    <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>
        <div id="reader" width="600px"></div>


        <b-media-body class="ml-1">
          <h5 class="mt-0">
            掃描結果
          </h5>
          <b-card-text>
            {{ scannerText }}
          </b-card-text>
        </b-media-body>
      </b-media>
    </b-card>
  </div>
</template>
<script>
import { BCard, BCardText, BButton, BMedia, BFormInput, BImg, BMediaAside, BMediaBody } from 'bootstrap-vue'
import Pusher from 'pusher-js';
import useJwt from '@/auth/jwt/useJwt'
import { Html5QrcodeScanner } from "html5-qrcode"
import { Html5Qrcode } from "html5-qrcode"

export default {
  name: "websocket",
  components: {
    BCard,
    BCardText,
    BButton,
    BMedia,
    BFormInput,
    BImg,
    BMediaAside,
    BMediaBody,
  },
  data() {
    return {
      user: {},
      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/lottery/show', { 'id': data.message }).then(response => {
        this.user = response.data.user;
      }).catch(error => {
        console.log(error)
        this.user = {};
      });
    });


  },
  computed: {

  },
  methods: {
    test_keydown_handler(event) {
      if (event.which === 13) {
        // The key pressed was the enter key

        console.log(this.input)
        
        useJwt.postData('/api/lottery/show', { 'id': this.input }).then(response => {
          this.user = response.data.user;
          this.input = "";
        }).catch(error => {
          console.log(error)
          this.user = {};
        });
      }
    }
  },
  watch: {
    number: function (newValue) {
      const path = "/hp.mp3";
      const audio = new Audio(path);
      var playPromise = audio.play();
      if (playPromise !== undefined) {
        playPromise.then(_ => {
          gsap.to(this.$data, { duration: 1.6, tweenedNumber: newValue });
        })
          .catch(error => {
            console.log(`playSound error: ${error}`);
          });
      }

    }
  },
  mounted() {

    var onScanSuccess = (decodedText, decodedResult) => {
      // handle the scanned code as you like, for example:
      console.log(`Code matched = ${decodedText}`, decodedResult);
      this.scannerText = decodedText;
    }

    function onScanFailure(error) {
      // handle scan failure, usually better to ignore and keep scanning.
      // for example:
      console.warn(`Code scan error = ${error}`);
    }

    let html5QrcodeScanner = new Html5QrcodeScanner(
      "reader",
      { fps: 30, qrbox: { width: 500, height: 500 } },
  /* verbose= */ false);
    html5QrcodeScanner.render(onScanSuccess, onScanFailure);
    // This method will trigger user permissions
    Html5Qrcode.getCameras().then(devices => {
      /**
       * devices would be an array of objects of type:
       * { id: "id", label: "label" }
       */
      if (devices && devices.length) {
        var cameraId = devices[0].id;
        // .. use this to start scanning.
      }
    }).catch(err => {
      // handle err
    });
    // html5QrCode.stop().then((ignore) => {
    //   // QR Code scanning is stopped.
    // }).catch((err) => {
    //   // Stop failed, handle it.
    // });
  }
}

</script>

<style>

</style>
