<template>
  <b-card title="抽獎模擬">
    <div class="counter">
      <div>
        <i :data-final="final0">部門</i>
      </div>
      <i :data-final="final1">0</i>
      <i :data-final="final2">0</i>
      <i :data-final="final3">0</i>
      <i :data-final="final4">0</i>
      <span> {{ name }}</span>
    </div>
    <b-button @click="count">開始抽獎</b-button>
  </b-card>



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

export default {
  name: "websocket",
  components: {
    BCard,
    BCardText,
    BButton,
    BMedia,
    BImg,
    BMediaAside,
    BMediaBody,
  },
  data() {
    return {
      users: [],
      result: {},
      name: "",
      final0: "部門",
      final1: 0,
      final2: 0,
      final3: 0,
      final4: 0,
      department: ["行政管理部", "行政管理部庶務科", "人力資源科", "行政管理部文書科", "南區辦事處", "中區辦事處", "工程管理一部", "工程管理二部", "c3工地", "發展與企畫部", "工程製圖科", "工務部", "大地工程部", "財務部", "六張犁工地", "中華郵政工地", "法務部調查局工地", "三峽國光工地", "河濱高中工地", "運輸及土木工程部", "城鄉發展部", "軌道工程部", "董事長室", "總經理室", "企業發展中心", "成本中心", "資訊中心", "環境及水資源工程部", "環境水務部", "環境永續部", "機電系統工程部", "結構工程部", "工程設計群", "工程監理群", "總管理處", "建築及設施群", "數位工程發展部", "淡海輕軌計畫監造專案", "安坑輕軌計畫監造專案", "先進技術中心", "塭仔圳市地重劃公共工程專案管理與監造專案", "萬大果菜市場專案"]
    }
  },
  created() {

    useJwt.getData('/api/lottery/list', {}).then(response => {
      this.users = response.data;
      console.log(response.data)
    }).catch(error => {
      console.log(error)
      this.user = [];
    });

  },
  computed: {

  },
  methods: {
    count() {
      var departments = this.department;
      var numbers = "0123456789"
      var string = numbers;
      var allCounters = document.querySelectorAll(".counter > i");
      var deps = document.querySelectorAll(".counter > div > i");
      let randomNum = Math.floor(Math.random() * this.users.length);
      let result = this.users[randomNum];
      this.final0 = result.department;
      this.final1 = result.job_id[0];
      this.final2 = result.job_id[1];
      this.final3 = result.job_id[2];
      this.final4 = result.job_id[3];

      deps.forEach(function (el) {
        var duration = 3000;
        var interval = setInterval(function () {
          el.innerText = departments[Math.floor(Math.random() * departments.length)];
          duration = duration - 50;
          if (duration <= 0) {
            clearInterval(interval);
            el.innerText = el.getAttribute("data-final");
          }
        }, 50);
      });
      allCounters.forEach((el, index) => {
        var duration = 4000 + Array.from(allCounters).indexOf(el) * 1000;
        var interval = setInterval(e => {
          el.innerText = string.charAt(Math.random() * string.length);
          duration = duration - 50;
          if (duration <= 0) {
            clearInterval(interval);
            el.innerText = el.getAttribute("data-final");
            if (index == 3) {
              this.name = result.name;
            }
          }
        }, 50);
      });
    }

  },
  watch: {
    result: function (newValue) {
      gsap.to(this.$data, { duration: 1.6, tweenedNumber: newValue });

    }
  }
}

</script>

<style>
.counter {
  height: 100%;
  letter-spacing: 10px;
  color: black;
  display: block;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  cursor: pointer;
}

i {
  min-width: 60px;
  text-align: center;
  font-style: normal;
}
</style>
