<template>
	<div>

		<b-card no-body>
			<b-card-header>
				<div>
					<b-card-title class="mb-1">
						亂數機率分布
					</b-card-title>
				</div>
				<div class="d-flex align-items-center">
					<b-button variant="info" @click="draw">隨機抽100次</b-button>
				</div>
			</b-card-header>


			<!-- chart -->
			<b-card-body>
				<chartjs-component-line-chart
					v-if="loaded"
					:height="400"
					:data="randomData"
					:options="chartjsData.lineChart.options" />
			</b-card-body>
		</b-card>
	</div>
</template>
<script>
import { BRow, BCol, BCard, BCardHeader, BCardBody, BCardTitle, BCardText, BButton, BMedia, BFormInput, BImg, BMediaAside, BMediaBody, BInputGroup, BInputGroupAppend } from 'bootstrap-vue'
import Ripple from 'vue-ripple-directive'
import useJwt from '@/auth/jwt/useJwt'
import ChartjsComponentLineChart from './charts-components/ChartjsComponentLineChart.vue'
import chartjsData from './charts-components/chartjsData'
import {
	$themeColors
} from '@themeConfig'
const chartColors = {
	primaryColorShade: '#836AF9',
	yellowColor: '#ffe800',
	successColorShade: '#28dac6',
	warningColorShade: '#ffe802',
	warningLightColor: '#FDAC34',
	infoColorShade: '#299AFF',
	greyColor: '#4F5D70',
	blueColor: '#2c9aff',
	blueLightColor: '#84D0FF',
	greyLightColor: '#EDF1F4',
	tooltipShadow: 'rgba(0, 0, 0, 0.25)',
	lineChartPrimary: '#666ee8',
	lineChartDanger: '#ff4961',
	labelColor: '#6e6b7b',
	grid_line_color: 'rgba(200, 200, 200, 0.2)',
}

export default {
	name: "websocket",
	components: {
		BRow,
		BCol,
		BCard,
		BCardHeader,
		BCardBody,
		BCardTitle,
		BCardText,
		BButton,
		BMedia,
		BFormInput,
		BImg,
		BMediaAside,
		BMediaBody,
		BInputGroup,
		BInputGroupAppend,
		ChartjsComponentLineChart
	},
	directives: {
		Ripple,
	},
	data() {
		return {
			loaded: false,
			activityId: this.$route.params.activity_id,
			activity: {},
			userList: [],
			prizeList: [],
			chartjsData,
			rangePicker: ['2019-05-01', '2019-05-10'],
			randomData: {
				labels: [],
				datasets: [
					{
						data: [],
						label: '中獎次數',
						borderColor: chartColors.lineChartDanger,
						lineTension: 0.5,
						pointStyle: 'circle',
						backgroundColor: chartColors.lineChartDanger,
						fill: false,
						pointRadius: 1,
						pointHoverRadius: 5,
						pointHoverBorderWidth: 5,
						pointBorderColor: 'transparent',
						pointHoverBorderColor: $themeColors.white,
						pointHoverBackgroundColor: chartColors.lineChartDanger,
						pointShadowOffsetX: 1,
						pointShadowOffsetY: 1,
						pointShadowBlur: 5,
						pointShadowColor: chartColors.tooltipShadow,
					}
				],
			},
			data: {},
		}
	},
	created() {
		this.loaded = false
		useJwt.postData('/api/check_in/index_by_activity', { activity_id: this.activityId }).then(res => {
			console.log(res.data)

			this.userList = res.data;
			let array = Object.keys(res.data);
			this.randomData.labels = array;
			this.randomData.datasets[0].data = Array(array.length).fill(0)
			this.data = array.reduce((acc, curr) => (acc[curr] = 0, acc), {});
			this.loaded = true
		});

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

	},
	computed: {

	},
	methods: {
		draw() {
			useJwt.postData('/api/randomTest/draw', {
				activity_id: this.activityId,
				prize_id: this.prizeList[2].id,
				region: ['北區', '中區', '南區', '來賓'],
				number: 100
			}).then(res => {
				this.drawList = res.data;
				let result = this.countOccurrences(this.data, res.data);
				this.randomData.datasets[0].data = result;
				console.log(res.data);
				console.log(result);
			});
		},
		countOccurrences(obj1, array1) {
			const obj = obj1;
			array1.forEach((item) => {
				if (obj.hasOwnProperty(item)) {
					obj[item]++;
				}
			});
			this.data = obj;
			let array2 = Object.values(obj);
			return array2;
		}
	},
	mounted() {

	},
	computed: {

	}
}

</script>

<style></style>
