<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="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>
        <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)">{{ item.alias.padEnd(6, "　") + " " + item.user_id + " " +
              item.name.padEnd(4, "　") }}</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)">{{ item.alias.padEnd(6, "　") + " " + item.user_id + " " +
              item.name.padEnd(4, "　") }}</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)">{{ item.alias.padEnd(6, "　") + " " + item.user_id + " " +
              item.name.padEnd(4, "　") }}</b-badge>
          </div>

        </b-col>
      </b-row>
      <!-- <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,
    }
  },
  created() {
    this.getPrize(this.$route.params.activity_id)
    this.bodyListener = (e) => {
      if (e.keyCode === 37 && e.target === document.body) {
        console.log("left");
        this.shiftPrize(-1)
      }
      if (e.keyCode === 39 && e.target === document.body) {
        console.log("right");
        this.shiftPrize(1)
      }

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

  },
  mounted() {
    this.timer = setInterval(() => {
      // eslint-disable-next-line
      this.value += 1;
      if(this.value >= 100){
        this.shiftPrize(1);
        this.value = 0;
      }
    }, 100)
  },
  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);
      }).catch(error => {
        console.log("error: " + error);
      });
    },
    getPrizeList(prize_id) {
      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.prizeList1 = this.prizeList.splice(0, 11)
        this.prizeList2 = this.prizeList.splice(0, 11)
        this.prizeList3 = this.prizeList.splice(0, 11)
        if (this.pageMax > 1) {
          this.page = 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) {
      if (this.prizeList.length <= 0) {
        this.index = (this.index + this.prizes.length + index) % this.prizes.length;
        this.getPrizeList(this.prizes[this.index].id)
      } else {
        this.prizeList1 = this.prizeList.splice(0, 11)
        this.prizeList2 = this.prizeList.splice(0, 11)
        this.prizeList3 = this.prizeList.splice(0, 11)
        this.prizeName = this.tempPrizeName + ' ( ' + ++this.page + ' / ' + this.pageMax + ' )';
      }
    },
    isClaim(status) {
      return status == 1 ? 'success' : 'danger';
    },
    toggleFullscreen(ref) {
      const elem = this.$refs[ref];
      const isFullscreen = document.fullscreenElement !== null;

      if (isFullscreen) {
        this.closeFullscreen();
      } else {
        this.openFullscreen(elem);
      }
    },
    openFullscreen(elem) {
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.mozRequestFullScreen) {
        /* Firefox */
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) {
        /* Chrome, Safari and Opera */
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) {
        /* IE/Edge */
        elem.msRequestFullscreen();
      }
    },
    closeFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        /* Firefox */
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        /* Chrome, Safari and Opera */
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        /* IE/Edge */
        document.msExitFullscreen();
      }
    }, padEnd(string) {
      string.padEnd(6, "　");
    }

  },
  computed: {

  },
}
</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;
}

.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%;
}

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

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

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