<template>
	<div>
		<b-row class="prize-list-wrapper">
			<b-col md="6">
				<b-card title="獎項列表" style="height:70vh;">
					<b-table responsive hover sticky-header=true :items="prizeList" bordered :fields="prizeTableFields"
						style="max-height: 52vh; overflow: auto;" @row-clicked="click">
						<template #cell(ICON)="data">
							<div class="text-center">
								<feather-icon :icon="data.value" />
							</div>
						</template>
					</b-table>
					<b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" class="mt-3" variant="outline-primary" block
						@click="showAddPrize">
						加碼
					</b-button>
				</b-card>
			</b-col>

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

			<!--Model Start-->
			<b-modal ref="draw-modal" id="draw-modal" centered title="抽獎" no-stacking hide-footer>
				<label>獎品:</label>
				<b-form-input v-model="drawOption.prize_name" :disabled=true />
				<br>
				<label>地區: </label>
				<v-select multiple v-model="drawOption.region" :options="regionOption" />
				<br>

				<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="primary" block
					@click="sendDrawOptions">
					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="add-prize" centered title="加碼" no-stacking hide-footer>
				<label>獎品:</label>
				<b-form-input v-model="addPrizeOption.name" />
				<br>
				<label>加碼者: </label>
				<b-form-input v-model="addPrizeOption.provider" />
				<br>
				<label>數量: </label>
				<b-form-spinbutton v-model="addPrizeOption.count" min="1" />

				<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="primary" block
					@click="addPrize">
					Accept
				</b-button>
			</b-modal>
			<!--Model End-->
		</b-row>
	</div>
</template>

<script>
import { BRow, BCol, BCard, BCardText, BLink, BTable, BModal, BFormInput, BFormSpinbutton, BButton, BFormCheckbox, BFormRadio } 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';
import Pusher from 'pusher-js';

export default {
	components: {
		BRow,
		BCol,
		BCard,
		BCardText,
		BLink,
		BTable,
		BModal,
		BFormInput,
		BFormSpinbutton,
		BButton,
		BFormCheckbox,
		BFormRadio,
		VueGoodTable,
		vSelect,
	},
	directives: {
		Ripple,
	},
	data() {
		return {
			prizeList: [],
			recipientsList: [],

			prizeTableFields: ['name', 'provider', 'count'],
			recipientsTableFields: ['prize_name', 'user_id', 'user_name', 'created_at'],
			regionOption: ['北區', '中區', '南區', '來賓'],

			drawOption: {
				activity_id: this.$route.params.activity_id,
				prize_id: '0',
				prize_name: '',
				region: ['北區', '中區', '南區', '來賓'],
				draw_one: true,
			},
			addPrizeOption: {
				activity_id: this.$route.params.activity_id,
				name: '',
				provider: '',
				count: 1,
			},
		}
	},
	created() {

		// Pusher.logToConsole = true;

		var pusher = new Pusher('9fb7f6f0141efc7e1293', {
			cluster: 'ap3'
		});

		var channel = pusher.subscribe('my-channel');
		channel.bind('store-event', (data) => {
			let message = data.message
			console.log(message);
			if (message == "store") {
				this.updateDataset()
			}

		});

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

		useJwt.postData('/api/recipients/index_by_activity', { activity_id: this.$route.params.activity_id }).then(res => {
			this.recipientsList = res.data;
			this.recipientsList.forEach(element => {
				element.created_at = this.dateFormat(element.created_at);
			});
		});
	},
	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');
		},
		counterId(id) {
			return "counter_" + id;
		},
		showDraw() {
			this.$refs['draw-modal'].show();
		},
		showAddPrize() {
			this.$refs['add-prize'].show();
		},
		showDrawError() {
			this.$refs['draw-error'].show();
		},
		hideModal() {
			this.$refs['draw-modal'].hide();
			this.$refs['draw-error'].hide();
			this.$refs['add-prize'].hide();
			this.updateDataset();
		},
		updateDataset() {
			useJwt.postData('/api/prize/index_by_activity', { activity_id: this.$route.params.activity_id }).then(res => {
				this.prizeList = res.data;
			});
			useJwt.postData('/api/recipients/index_by_activity', { activity_id: this.$route.params.activity_id }).then(res => {
				this.recipientsList = res.data;
				this.recipientsList.forEach(element => {
					element.created_at = this.dateFormat(element.created_at);
				});
			});
			useJwt.postData('/api/drawManager', {
				message: "updateData"
			}).then(res => {
				// console.log(res);
			});
		},
		click(params) {
			if (params.count > 0) {
				this.drawOption.prize_name = params.name;
				this.drawOption.prize_id = params.id;
				this.showDraw();
			} else {
				this.showDrawError();
			}
		},
		sendDrawOptions() {
			useJwt.postData('/api/drawManager', {
				message: this.drawOption
			}).then(res => {
				console.log(res);
			});
			this.hideModal();
		},
		addPrize() {
			useJwt.postData('/api/prize/store', this.addPrizeOption).then(res => {
				if (res.data) {
					console.log("add prize success");
				} else {
					console.log("add prize error");
				}
				this.hideModal();
			});
		},
	},
}
</script>

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