<template>
	<view class="gamecont">
		<view class="contone">
			<view class="contone_item contone_item1">
				Betting assistant (last 100 periods)
			</view>
			<view class="contone_item contone_item2">
			<view class="miss">
				missing
			</view>
			<view class="num_con">
				<view class="num" @click="sendCond" v-for="item,index in missingFrequency" :key="index">
					{{item.missing}}
				</view>

			</view>
			</view>
			<view class="contone_item contone_item2">
			<view class="miss">
				frequency
			</view>
			<view class="num_con">
				<view class="num" v-for="item,index in missingFrequency"  :key="index">
					{{item.frequency}}
				</view>
			</view>
			</view>
		</view>
		
		<view class="conttwo">
			<view class="contone_item contone_item2"  v-for="item,index in gameRecordCont" :key="item.period">
			<view class="miss">
				{{item.period}}
			</view>
			<view class="num_con">
		
				<view class="num2" :class="item.lotteryResult==5?'bg_jb2':''">
					0
				</view>
				<view class="num2" :style="[{backgroundColor:(item.lotteryResult==1?item.lotteryColor:'')},{color:(item.lotteryResult==1?white:'')}]" >
					1
				</view>
				<view class="num2" :style="[{backgroundColor:(item.lotteryResult==2?item.lotteryColor:'')},{color:(item.lotteryResult==2?white:'')}]">
					2
				</view>
				<view class="num2" :style="[{backgroundColor:(item.lotteryResult==3?item.lotteryColor:'')},{color:(item.lotteryResult==3?white:'')}]">
					3
				</view>
				<view class="num2" :style="[{backgroundColor:(item.lotteryResult==4?item.lotteryColor:'')},{color:(item.lotteryResult==4?white:'')}]">
					4
				</view>
				<view class="num2" :class="item.lotteryResult==5?'bg_jb1':''">
					5
				</view>
				<view class="num2" :style="[{backgroundColor:(item.lotteryResult==6?item.lotteryColor:'')},{color:(item.lotteryResult==6?white:'')}]">
					6
				</view>
				<view class="num2" :style="[{backgroundColor:(item.lotteryResult==7?item.lotteryColor:'')},{color:(item.lotteryResult==7?white:'')}]">
					7
				</view>
				<view class="num2" :style="[{backgroundColor:(item.lotteryResult==8?item.lotteryColor:'')},{color:(item.lotteryResult==8?white:'')}]">
					8
				</view>
				<view class="num2" :style="[{backgroundColor:(item.lotteryResult==9?item.lotteryColor:'')},{color:(item.lotteryResult==9?white:'')}]">
					9
				</view>
			</view>
			</view>
		
			</view>
		</view>
	</view>
	

</template>

<script>
	import cont from "../cont/cont.vue"
	const COMPONENT_NAME = 'gamecont'
	export default {
		props:["gameRecordCont","missingFrequency"],
		name: COMPONENT_NAME,
	
		data() {
			return {
		    white:'white',
			}
		},
		computed: {
		
		},
		mounted() {
			
		},
		methods: {
		sendCond(){
			this.$emit("send",true);
		}
	},
	}
</script>


<style>
	.gamecont{
		position: relative;
	}
	.gamecont .test{
		position: fixed;
		right: 0;
		top: 75%;
	}
	.num2{
		width: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 24rpx;
		color: #303133;
		border: 2rpx solid #EDEFF2;
		border-radius: 50%;
	}
	.num{
		width: 40rpx;
		line-height: 32rpx;
		text-align: center;
		font-size: 28rpx;
		color: #303133;
		margin:0 10rpx;
	}
	.num_con{
		width: 514rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.miss{
		width: 180rpx;
		overflow-x: scroll;
		color: #606266;
		font-size: 28rpx;
		text-transform: capitalize;
	}
	.contone_item2{
		display: flex;
		justify-content: space-between;
	}
.gamecont{
		
}
.contone{
	background-color: #F5F7FA;
	padding: 0 36rpx;

}
.conttwo{
	padding: 0 36rpx;
}
.contone_item{
	line-height: 72rpx;
}
.contone_item1{
	font-size: 24rpx;
	color: #909399;
}
.morejia{
	display: table;
	width: auto;
	margin: 0 auto;
	padding-top: 48rpx;
	padding-bottom: 62rpx;
}
.morejia p{
	font-size: 28rpx;
	color: #954DE3;
	    text-align: center;
}
.morejia image{
	display: block;
	width: 24rpx;
	height: 24rpx;
	margin: 0 auto;
}
	.green{
			background-color: #00B977FF !important;
			color: #fff !important;
		}
		.red{
				background-color: #F25B5BFF !important;
				color: #fff !important;
			}
			.bg_jb1{
			 background-image: linear-gradient(-30deg, #954DE3 50% , #F25B5B 50% );
			 color: #fff;
			}
			.bg_jb2{
			 background-image: linear-gradient(-30deg,#954DE3  50% , #00B977 50% );
			 color: #fff;
			}
</style>
