<template>
  <b-card ref="graph-1" class="card-bc"
    no-body>
    <div class="title text-center"><feather-icon class="arrow-left"
        icon="ChevronsLeftIcon"
        size="60"
        @click="shiftPrize(1)" />{{ prizeName }}<feather-icon class="pause"
        :icon="PauseIcon"
        size="60"
        @click="pauseSwitch()" /><feather-icon class="arrow-right"
        icon="ChevronsRightIcon"
        size="60"
        @click="shiftPrize(-1)" /></div>
    <b-progress
      :key="variant"
      animated
      :value="value"
      :variant="variant"
      :class="'progress-bar-' + variant" />
    <div style="background-image: url(../flower-r.png);" class="back">
      <b-row v-if="prizeList1.length > 0">
        <b-col style=" margin-right: 0rem; margin-left: 0rem;">
          <div class="prize-list" :key="index" v-for="(item, index) in prizeList1">
            <b-badge pill :variant="isClaim(item.is_claimed)">{{ prizeBadge(item) }}</b-badge>
          </div>
        </b-col>
        <b-col style=" margin-right: 0rem; margin-left: 0rem;">
          <div class="prize-list" :key="index" v-for="(item, index) in prizeList2">
            <b-badge pill :variant="isClaim(item.is_claimed)">{{ prizeBadge(item) }}</b-badge>
          </div>
        </b-col>
        <b-col style=" margin-right: 0rem; margin-left: 0rem;">
          <div class="prize-list" :key="index" v-for="(item, index) in prizeList3">
            <b-badge pill :variant="isClaim(item.is_claimed)">{{ prizeBadge(item) }}</b-badge>
          </div>

        </b-col>
      </b-row>
      <b-col v-else>
        <div class="prize-list">
          <b-badge pill variant="danger">尚未抽出</b-badge>
        </div>
      </b-col>
      <!-- <table-custom-render /> -->
    </div>

  </b-card>
</template>

<script>
import BCardCode from '@core/components/b-card-code/BCardCode.vue'
import { BCard, BCardTitle, BRow, BCol, BBadge, BButton, BProgress } from 'bootstrap-vue'

import useJwt from '@/auth/jwt/useJwt'

export default {
  components: {
    BCard,
    BCardTitle,
    BCardCode,
    BRow,
    BCol,
    BBadge,
    BButton,
    BProgress,
  },
  data() {
    return {
      prizeName: "",
      prizeList: [],
      prizeList1: [],
      prizeList2: [],
      prizeList3: [],
      prizes: [],
      pageMax: 1,
      page: 1,
      index: 0,
      tempPrizeName: "",
      variant: 'danger',
      value: 0,
      timer: null,
      isPause: true,
      delayTimer: 150,
    }
  },
  created() {
    this.getPrize(this.$route.params.activity_id)
    this.bodyListener = (e) => {
      if (e.keyCode === 37 && e.target === document.body) {
        this.shiftPrize(-1)
      }
      if (e.keyCode === 39 && e.target === document.body) {
        this.shiftPrize(1)
      }

    }
    document.body.addEventListener('keyup', this.bodyListener, false)

  },
  mounted() {
    this.timer = setInterval(() => {
      if (!this.isPause) {
        this.value += 1;
        if (this.value >= 105) {
          this.shiftPrize(1);
        }
      }

    }, this.delayTimer)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    getPrize(activity_id) {
      useJwt.postData('/api/prize/index_by_activity', { activity_id: activity_id }).then(response => {
        console.log(response.data);
        this.prizes = response.data;
        this.index = this.prizes.length - 1;
        let prize_id = this.prizes[this.index].id;
        this.getPrizeList(prize_id,1);
      }).catch(error => {
        console.log("error: " + error);
      });
    },
    getPrizeList(prize_id,direction) {
      useJwt.postData('/api/recipient/indexByPrize', { prize_id: prize_id }).then(response => {
        console.log(response.data)
        this.prizeList = response.data.list;
        this.pageMax = Math.ceil(this.prizeList.length / 33);
        this.page = direction == 1 ? 1 : this.pageMax;
        this.prizeList1 = []
        this.prizeList2 = []
        this.prizeList3 = []
        if (this.prizeList.length > 0) {
          for (let i = 33 * (this.page - 1); i < 11 + 33 * (this.page - 1); i++) {
            if (this.prizeList[i]) {
              this.prizeList1.push(this.prizeList[i])
            }
            if (this.prizeList[i + 11]) {
              this.prizeList2.push(this.prizeList[i + 11])
            }
            if (this.prizeList[i + 22]) {
              this.prizeList3.push(this.prizeList[i + 22])
            }
          }
        }
        //( 3 / 4 )
        if (this.pageMax > 1) {
          this.tempPrizeName = response.data.prize[0].name;
          this.prizeName = response.data.prize[0].name + ' ( ' + this.page + ' / ' + this.pageMax + ' )';
        } else {
          this.prizeName = response.data.prize[0].name;
        }

      }).catch(error => {
        console.log("error: " + error);
      });
    },
    shiftPrize(index) {
      this.value = 0
      this.page += index;
      if (this.page <= this.pageMax && this.page >= 1) {
        this.prizeName = this.tempPrizeName + ' ( ' + this.page + ' / ' + this.pageMax + ' )';
        this.prizeList1 = []
        this.prizeList2 = []
        this.prizeList3 = []
        for (let i = 33 * (this.page - 1); i < 11 + 33 * (this.page - 1); i++) {
          if (this.prizeList[i]) {
            this.prizeList1.push(this.prizeList[i])
          }
          if (this.prizeList[i + 11]) {
            this.prizeList2.push(this.prizeList[i + 11])
          }
          if (this.prizeList[i + 22]) {
            this.prizeList3.push(this.prizeList[i + 22])
          }
        }
      } else {
        this.index = (this.index + this.prizes.length - index) % this.prizes.length;
        this.getPrizeList(this.prizes[this.index].id,index)
      }
    },
    isClaim(status) {
      return status == 1 ? 'success' : 'danger';
    },   
    prizeBadge(item) {
      if (item.alias == '來賓') {
        return item.alias.padEnd(6, "　") + "　" + item.name.padEnd(7, "　")
      } else {
        return item.alias.padEnd(6, "　") + " " + item.user_id + " " +
          item.name.padEnd(4, "　");
      }
    },
    pauseSwitch() {
      this.isPause = !this.isPause;
    }


  },
  computed: {
    PauseIcon() {
      return this.isPause ? 'PlayIcon' : 'PauseIcon';
    }
  },
}
</script>

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

@font-face {
  font-family: '新微軟正黑體';
  unicode-range: U+7db0, U+78A7, U+7B75;
  font-style: normal;
  font-weight: bold;
  src: local(MS Gothic), local(Yu Gothic);
}

@font-face {
  font-family: '新微軟正黑體';
  unicode-range: U+7db0, U+78A7, U+7B75;
  font-style: normal;
  font-weight: normal;
  src: local(微軟正黑體), local(Microsoft JhengHei);
}

body {
  font-family: 'Open Sans', Verdana, Geneva, "新微軟正黑體", 'Microsoft JhengHei', "微軟正黑體", sans-serif;
  background-color: #c72c2cee !important;
}

.prize-list {
  font-size: 45px;
  text-align: center;
  margin-top: 24px;
  margin-bottom: 8px;
}

.card-bc {
  background-color: #CA0000;
}

.badge-pill {
  width: 98%;
  // background-color: #df1a1a85;
  height: 60px;
  padding-top: 10px;
}

.badge-danger {
  background-color: #df1a1a85;
}

.title {
  background-color: #CA0000;
  width: 100%;
  font-size: 45px;
  color: white;
  font-weight: bold;
}

.back {
  background-color: #c72c2cee;
  background-repeat: no-repeat;
  background-size: 600px 600px;
  background-attachment: fixed;
  background-position: -5% 120%;
}

.pause {
  right: 100px;
  position: absolute;
  cursor: pointer;
}

.arrow-right {
  right: 0;
  position: absolute;
  cursor: pointer;
}

.arrow-left {
  left: 0;
  position: absolute;
  cursor: pointer;
}

body::-webkit-scrollbar {
  display: none;
}
</style>
