<template>
  <div>
    <b-row class="prize-list-wrapper">
      <b-col md="6">
        <b-card title="獎項列表" style="height:75vh;">
          <b-table responsive hover :items="getPrizeList(prizeList)" bordered :fields="fields" @row-clicked="click"
            style="max-height: 65vh; overflow: auto;">
            <template #cell(ICON)="data" class="text-center">
              <div class="text-center">
                <feather-icon :icon="data.value" />
              </div>
            </template>
          </b-table>
        </b-card>
      </b-col>

      <b-modal ref="draw-modal" centered title="抽獎" no-stacking hide-footer>
        <label>獎品:</label>
        <b-form-input v-model="prize" :disabled=true />
        <br>
        <label>地區: </label>
        <v-select multiple v-model="region" :options="regionOption" />
        <br>
        <label>數量: </label>
        <b-form-spinbutton v-model="drawNumber" min="1" :max=drawMax />

        <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" class="mt-3" variant="outline-secondary" block
          @click="hideModal">
          Close
        </b-button>
        <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" class="mt-2" variant="outline-primary" block
          v-b-modal.draw-animation @click="draw">
          Accept
        </b-button>

      </b-modal>

      <b-modal ref="draw-error" centered title="抽獎" no-stacking hide-footer>
        <b-card-text class="my-1 text-center">
          獎品數量以抽完
        </b-card-text>
        <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" class="mt-3" variant="outline-secondary" block
          @click="hideModal">
          Close
        </b-button>
      </b-modal>

      <b-modal ref="draw-animation" id="draw-animation" title="抽獎" centered no-stacking hide-footer>
        <br>
        <div :key="index" v-for="(item, index) in drawList" :class=counterId(index)>
          <i :datafinal=item.department>部門</i>
          <div :datafinal=item.userId>
            <i>0</i>
            <i>0</i>
            <i>0</i>
            <i>0</i>
            <span :datafinal=item.userName></span>
          </div>
        </div>

        <b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" class="mt-2" variant="outline-primary" block
          @click="hideModal">
          Accept
        </b-button>
      </b-modal>

      <b-col md="6">
        <b-card title="抽獎紀錄" style="height:75vh;">
          <b-table responsive :items="getRecipientsList(recipientsList)" bordered
            style="max-height: 65vh; overflow: auto;">
            <template #cell(ICON)="data" class="text-center">
              <div class="text-center">
                <feather-icon :icon="data.value" />
              </div>
            </template>
          </b-table>
        </b-card>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import { BRow, BCol, BCard, BCardText, BLink, BTable, BModal, BFormInput, BFormSpinbutton, BButton } from 'bootstrap-vue'
import useJwt from '@/auth/jwt/useJwt'
import { VueGoodTable } from 'vue-good-table'
import vSelect from 'vue-select'
import Ripple from 'vue-ripple-directive'
import 'vue-select/dist/vue-select.css';

export default {
  components: {
    BRow,
    BCol,
    BCard,
    BCardText,
    BLink,
    BTable,
    BModal,
    BFormInput,
    BFormSpinbutton,
    BButton,
    VueGoodTable,
    vSelect,
  },
  directives: {
    Ripple,
  },
  data() {
    return {
      activityId: this.$route.params.activity_id,
      activity: {},
      userList: [],
      userIdList: [],
      departmentList: [],
      prizeList: [],
      recipientsList: [],

      fields: ['獎項', '數量'],
      regionOption: ['北區', '中區', '南區', '來賓'],
      region: ['北區', '中區', '南區', '來賓'],
      drawMax: 1,
      drawNumber: 1,

      prize: '',
      prizeId: '',
      drawList: [],

      departments: ["行政管理部", "行政管理部庶務科", "人力資源科", "行政管理部文書科", "南區辦事處", "中區辦事處", "工程管理一部", "工程管理二部", "c3工地", "發展與企畫部", "工程製圖科", "工務部", "大地工程部", "財務部", "六張犁工地", "中華郵政工地", "法務部調查局工地", "三峽國光工地", "河濱高中工地", "運輸及土木工程部", "城鄉發展部", "軌道工程部", "董事長室", "總經理室", "企業發展中心", "成本中心", "資訊中心", "環境及水資源工程部", "環境水務部", "環境永續部", "機電系統工程部", "結構工程部", "工程設計群", "工程監理群", "總管理處", "建築及設施群", "數位工程發展部", "淡海輕軌計畫監造專案", "安坑輕軌計畫監造專案", "先進技術中心", "塭仔圳市地重劃公共工程專案管理與監造專案", "萬大果菜市場專案"]
    }
  },
  created() {
    useJwt.postData('/api/activity/show', { activity_id: this.activityId }).then(res => {
      this.activity = res.data;
    });

    useJwt.postData('/api/check_in/index_by_activity', { activityId: this.activityId }).then(res => {
      this.userList = res.data;
    });

    useJwt.postData('/api/user/index').then(res => {
      this.userIdList = res.data;
    });

    useJwt.postData('/api/prize/index_by_activity', { activityId: this.activityId }).then(res => {
      this.prizeList = res.data;
    });

    useJwt.postData('/api/recipients/index_by_activity', { activityId: this.activityId }).then(res => {
      this.recipientsList = res.data;
    });

    useJwt.postData('/api/department/index').then(res => {
      this.departmentList = res.data;
    });
  },
  methods: {
    dateFormat(date) {
      var d = new Date(date);
      return d.getFullYear()
        + '/' + (d.getMonth() + 1).toString().padStart(2, '0')
        + '/' + d.getDay().toString().padStart(2, '0')
        + '/' + d.getHours().toString().padStart(2, '0')
        + ':' + d.getMinutes().toString().padStart(2, '0')
        + ':' + d.getSeconds().toString().padStart(2, '0');
    },
    getPrizeList(prizeList) {
      var output = [];
      prizeList.forEach(element => {
        output.push({ id: element.id, '獎項': element.name, '數量': element.count });
      });
      return output;
    },
    getPrizeName(prizeId) {
      var output = '';
      this.prizeList.forEach(element => {
        if (prizeId == element.id) {
          output = element.name;
        }
      });
      return output;
    },
    getRecipientsList(recipientsList) {
      var output = [];
      recipientsList.forEach(element => {
        output.push({ '獎項': this.getPrizeName(element.prize_id), '獲獎人': this.userIdList[element.user_id], '時間': this.dateFormat(element.created_at) });
      });
      return output;
    },
    counterId(id) {
      return "counter_" + id;
    },
    showDraw() {
      this.$refs['draw-modal'].show();
    },
    showDrawError() {
      this.$refs['draw-error'].show();
    },
    hideModal() {
      this.$refs['draw-modal'].hide();
      this.$refs['draw-error'].hide();
      this.$refs['draw-animation'].hide();
      this.updateDataset();
    },
    updateDataset() {
      useJwt.postData('/api/prize/index_by_activity', { activityId: this.activityId }).then(res => {
        this.prizeList = res.data;
      });
      useJwt.postData('/api/recipients/index_by_activity', { activityId: this.activityId }).then(res => {
        this.recipientsList = res.data;
      });
    },
    click(params) {
      this.prize = this.getPrizeName(params.id);
      this.prizeId = params.id;
      this.drawMax = params["數量"];
      this.drawNumber = 1;
      this.drawList = [];
      if (this.drawMax == 0) {
        this.showDrawError();
      } else {
        this.showDraw();
      }
    },
    draw() {
      useJwt.postData('/api/draw/draw', { activity_id: this.activityId, prize_id: this.prizeId, region: this.region, number: this.drawNumber }).then(res => {
        if(res.data){
          this.drawList = res.data;
          setTimeout(() => {
            this.count();
          }, 100);
        } else {
          this.hideModal();
          console.log("error");
        }
      });
    },
    count() {
      var departments = this.departments;
      var numbers = "0123456789"
      var string = numbers;

      this.drawList.forEach((element, index) => {
        var departmentName = this.departmentList[element.department_id];
        var deps = document.querySelectorAll(".counter_" + index + " > i");
        var allCounters = document.querySelectorAll(".counter_" + index + " > div > i");

        deps.forEach(function (el) {
          var duration = 1000;
          var interval = setInterval(function () {
            el.innerText = departments[Math.floor(Math.random() * departments.length)];
            duration = duration - 50;
            if (duration <= 0) {
              clearInterval(interval);
              el.innerText = departmentName;
            }
          }, 50);
        });
        allCounters.forEach((el, i) => {
          var duration = 500 + i * 1000;
          var interval = setInterval(e => {
            el.innerText = string.charAt(Math.random() * string.length);
            duration = duration - 50;
            if (duration <= 0) {
              clearInterval(interval);
              el.innerText = element.user_id[i];
              if (i == 3) {
                document.querySelectorAll(".counter_" + index + " > div > span")[0].innerText = element.user_name;
              }
            }
          }, 50);
        });
      });
    },
  },
}
</script>

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