<template>
  <b-card
    no-body>
    <b-card-header>
      <div>
        <b-card-title class="mb-1">
          獎項<br>
          {{ prizeName }}
        </b-card-title>
      </div>
      <div class="d-flex align-items-center">
        <b-dropdown
          id="dropdown-6"
          text="選擇獎項"
          variant="info">
          <b-dropdown-item :key="index" v-for="(item, index) in prizes"
            @click="getPrizeList(item.id)">{{ item.name }}</b-dropdown-item>
        </b-dropdown>
      </div>
    </b-card-header>
    <b-row v-if="prizeList.length > 0">
      <b-col cols="12" class="prize-list" :key="index" v-for="(item, index) in prizeList">
        <b-badge pill :style="color(item.alias)">{{ prizeBadge(item) }}</b-badge>
      </b-col>
    </b-row>
    <b-row v-else>
      <b-col cols="12" class="prize-list">
        <b-badge pill variant="light">尚未抽出</b-badge>
      </b-col>
    </b-row>
  </b-card>
</template>

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

import useJwt from '@/auth/jwt/useJwt'
const colors = ["250,250,250,1", "128,128,128,1"];
export default {
  components: {
    BCard,
    BCardTitle,
    BCardHeader,
    BCardCode,
    BRow,
    BCol,
    BBadge,
    BButton,
    BProgress,
    BDropdown,
    BDropdownItem,
  },
  data() {
    return {
      prizeName: "",
      prizeList: [],
      prizes: [],
      index: 0,
      variant: 'danger',
      tempAlias: "",
      tempColor: 0,
    }
  },
  created() {
    this.getPrize(this.$route.params.activity_id)
  },
  mounted() {

  },
  beforeDestroy() {

  },
  methods: {
    getPrize(activity_id) {
      useJwt.postData('/api/prize/index_by_activity', { activity_id: activity_id }).then(response => {
        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.prizeName = response.data.prize[0].name;

      }).catch(error => {
        console.log("error: " + error);
      });
    },
    padEnd(string) {
      string.padEnd(6, "　");
    },
    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, "　");
      }
    },
    color(alias) {
      if (this.tempAlias != alias) {
        this.tempAlias = alias;
        this.tempColor = (this.tempColor + 1) % colors.length
      }

      return 'background-color: rgba(' + colors[this.tempColor] + ')';
    }
  },
  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;
}

.badge-pill {
  width: 100%;
  height: 45px;
  padding-top: 10px;
  font-size: 25px;
  text-align: center;
  margin-top: 10px;
  // background-color: white;
  color: black !important;
}
</style>
