<template>
	<view class="content">
		<navigation>color</navigation>
		<balance @send="getSonValue">
		<view class="rules-btn" slot="rules"  @click="goRule()">rules</view>
		</balance>
		<view class="bg_white">
			<view class="gNum flex">
				<view class="ga" v-for="(item,index) in colorList" :key="item.id" :class="index==ganum?'gaactive':''"
					@click="gaClick(index,item.name),nextBtting()">
					{{item.name}}
				</view>
			</view>
			
			
		<view class="gameContent">
				<view class="perCon">
					<view class="perCoun flex">
					<view class="period">
						<image src="../../../static/color/color_icon_trophy@2x.png" mode="aspectFit" class="color_icon"></image>
			  <span>Period</span>	
					</view>
					<view class="coDown">
						count down
					</view>
						</view>
						<view class="timeCon flex">
							<view class="time">
								<!-- {{colorData.lotteryPeriod.period}} -->
							{{nextBttingValue.period}}
							</view>
							<view class="count">
								<u-count-down :timestamp="nextBttingValue.remain" :show-days="false" :show-hours="false"></u-count-down>
							</view>
						</view>
				</view>
			
			  <view class="">
				  <view class="flex icon-con">
				  	<view class="ico" @click="xiazhu(item.color)" v-for="item,index in gameColor" :key="item.id">
<image :src="'../../../static/color/ico_apple_'+item.color+'@3x.png'" mode=""></image>
				  	</view>
				  </view>
			    
				
				<view class="multiple">
			     <view class="multiple-con flex" >
			     	<view class="mul-item" v-for="(item,index) in gameColorNumber1" :key="item.num" :class="item.cla" @click="xiazhu(item.num)">
			     		{{item.num}}
			     	</view>
					</view>
					 <view class="multiple-con flex">
					<view class="mul-item" ref="mulitem" v-for="(item,index) in gameColorNumber2" :key="item.num" :class="item.cla" @click="xiazhu(item.num)">
						{{item.num}}
					</view>
						</view>
		</view>
		
		
		
			     </view>
			
			
			<view class="donna flex">
				<view class="flex info">
					<view class="imgcon">
						<image :src="'https://apitest.luck-work.com/'+myImgUrl" mode="aspectFit"></image>
					</view>
					<view class="doname">
						<p class="name">{{myName}}</p>
						<view class="win">
							64% win
						</view>
					</view>
				</view>
				<view class="recharge">
					<image src="../../../static/color/ico_apple_RED@3x.png" mode=""></image>
					<span><i>₦</i>2000</span>
				</view>
				<view class="follow" @click="follow_xiazhu_conOn=1">
					Follow
				</view>
			</view>
			
			
			  </view>
			  
			  
	
			  <view class="gameNav" >
			  	<view class="gameNav-item " v-for="item,index in gameNav2" :class="index==gameNavNum?'active':''" :key="item.id" @click="gameNavMe(index)">
					{{item.text}}
			  	</view>
			  </view>
			  
			  
			  
			  
		
			<gamecont v-if="gameNavNum==0"></gamecont>
			<gamecont2 :gameRecordCont="gameRecordCont" v-if="gameNavNum==1"></gamecont2>
			<gamecont3 :myGameRecord="myGameRecord"  v-if="gameNavNum==2"></gamecont3>

		</view>
	






	<u-mask :show="follow_xiazhu_conOn==1" z-index="1000"></u-mask>
			<view class="follow_xiazhu_con"  v-show="follow_xiazhu_conOn==1">
					
				<view class="xia_head">
					<view class="tiao" @click="follow_xiazhu_conOn=0">
					</view>
				</view>
				<view class="xia_body">
					<view class="donna2" :class="folLisNum==index?'on':''" v-for="item,index in xia_body" :key="item">
						<view class="flex don_con">
							<view class="flex info">
								<view class="imgcon">
									<image src="../../../static/my/default_photo@2x.png" mode=""></image>
								</view>
								<view class="doname">
									<p class="name">Donna</p>
									<view class="win">
										64% win
									</view>
								</view>
							</view>
							<view class="recharge">
								<image src="../../../static/color/ico_apple_RED@3x.png" mode=""></image>
								<span><i>₦</i>2000</span>
							</view>
							<view class="follow" @click="folLisNumFn(index)">
								Follow
							</view>
						</view>
						<view class="list flex">
							<view class="flex list_con" @click="gsxia=1">
								<view class="num">
									20210701323
								</view>
								<image src="../../../static/color/ico_apple_VIOLET@3x.png" mode="" class="img1"></image>
								<view class="instit red">
									lose
								</view>
							</view>
							<view class="flex list_con">
								<view class="num">
									20210701323
								</view>
								<image src="../../../static/color/ico_apple_VIOLET@3x.png" mode="" class="img1"></image>
								<view class="instit red">
									lose
								</view>
							</view>
							<view class="flex list_con">
								<view class="num">
									20210701323
								</view>
								<image src="../../../static/color/ico_apple_VIOLET@3x.png" mode="" class="img1"></image>
								<view class="instit red">
									lose
								</view>
							</view>
							<view class="flex list_con">
								<view class="num">
									20210701323
								</view>
								<image src="../../../static/color/ico_apple_VIOLET@3x.png" mode="" class="img1"></image>
								<view class="instit red">
									lose
								</view>
							</view>
							<view class="flex list_con">
								<view class="num">
									20210701323
								</view>
								<image src="../../../static/color/ico_apple_VIOLET@3x.png" mode="" class="img1"></image>
								<view class="instit red">
									lose
								</view>
							</view>
						</view>
			
					</view>
			
	
				</view>
		
						<view class="tc" v-show="gsxia==1">
						<view class="title">
							connfirm info
						</view>
						<view class="tc_body">
							<view class="body_item flex">
								<view class="body_item_info">
									Perode
								</view>
								<view class="body_item_info">
								20210701327
								</view>
							</view>
							<view class="body_item flex">
								<view class="body_item_info">
									choose
								</view>
								<view class="body_item_info">
								<image src="../../../static/color/ico_apple_RED@3x.png" mode=""></image>
								</view>
							</view>
							<view class="body_item flex">
								<view class="body_item_info">
								contract money
								</view>
								<view class="body_item_info">
							5,000
								</view>
							</view>
						</view>
						<view class="anniu_con flex">
							<view class="cancel" @click="gsxia=0">
								cancel
							</view>
							<view class="cancel">
								confirm
							</view>
						</view>
					</view>
			
			</view>
			

		






	
		<view class="xiazhu" v-show="xiazhuCode">
			<view class="top">
				<view class="title">
					join violet
				</view>
				<view class="contract flex">
					<view class="xname">
						Contract Money
					</view>
					<view class="numcon">
						<view class="num" v-for="(item,index) in betting_amount" :key="item" v-model="bettingPrice" @click="numColor(index,item)" :class="numindex==index?'active':''">
							{{item}}
						</view>
					</view>
				</view>
				<view class="bujin flex">
					<view class="xname">
						Number
					</view>
					<u-number-box v-model="bettingNumber"></u-number-box>
				</view>
				<view class="TotalMoney xname">
					Total Contract Money is 50
				</view>
				<view class="agree">
					<view class="">
						<u-checkbox-group>
							<u-checkbox v-model="item.checked" v-for="(item, index) in list" :key="index"
								:name="item.name" shape="circle" active-color="#954DE3FF">{{item.name}}</u-checkbox>
						</u-checkbox-group>
					</view>
					<span class="s1">I agree </span><span class="s2" @click="goRule">presale rule</span>
				</view>

			</view>
			<view class="btn_con flex">
				<view class="btn1 btn" @click="xiazhuCode=false">
					cancel
				</view>
				<view class="btn2 btn" @click="toLotter" :class="bettingNumber!=0?'on':''">
					comfierm
				</view>
			</view>

		</view>
		<view class="tc" v-show="xiaSul==1">
						<view class="title">
							connfirm
						</view>
						<view class="tc_body sul">
					Successful purchase
					</view>
					<view class="sul ok" @click="xiaSul=0">
						OK
					</view>
					</view>
					<u-mask :show="xiazhuCode" :z-index="10"></u-mask>
					<u-mask :show="xiaSul==1" :z-index="10"></u-mask>
	</view>
</template>

<script>
	import api from '@/utils/api'
	import utils from '@/utils'
	import navigation from "@/components/navigation/navigation.vue"
	import balance from "@/components/balance/balance.vue"
	import gameView from "@/components/gameView/gameView.vue"
	import gamecont from "@/components/gamecont/gamecont.vue"
	import gamecont2 from "@/components/gamecont2/gamecont2.vue"
	import index from '@/utils/index.js'
	import gamecont3 from "@/components/gamecont3/gamecont3.vue"
	export default {
		data() {
			return {
				
				gameNavNum:0,
				xiaSul:0,
				gsxia:0,
				xia_body:[1,2,3],
				follow_xiazhu_conOn:0,
				bettingPrice:'',
		        bettingNumber:0,
				show: false,
				showWhite: true,
				myName: '',
				myImgUrl: '',
				folLisNum: 0,
				xiazhuCode: false,
				gap: '',
				colorList: [],
				colorData:[],
				ganum: 0,
             

				gameRecord: [],
				gameRecordCont: [],
				myGameRecord: [],
				list: [
					{
						name: '',
						checked: false,
						disabled: false
					},

				],
				betting_amount: [],
				betting_rule: '',
				pageSize: 9,
				totalPage:1,
				gameNav:[],
				gNum:'G2',
				gameColor:[
					{
						id:1,
						color:'GREEN'
					},
					{
						id:2,
						color:'VIOLET'
					},
					{
						id:3,
						color:'RED'
					},
				],
				gameColorNumber1:[
					{
						num:0,
						cla:'bg_jb2'
					},
					{
						num:1,
						cla:'bg_green'
					},
					{
						num:2,
						cla:'bg_red'
					},
					{
						num:3,
						cla:'bg_green'
					},
					{
						num:4,
						cla:'bg_red'
					},
				],
				gameColorNumber2:[
					{
						num:5,
						cla:'bg_jb1'
					},
					{
						num:6,
						cla:'bg_red'
					},
					{
						num:7,
						cla:'bg_green'
					},
					{
						num:8,
						cla:'bg_red'
					},
					{
						num:9,
						cla:'bg_red'
					},
				],
				bettingValue:'',
				nextBttingValue:[],
				numindex:-1,
				ganumArr:[],
				gg:3,
				gameNav2:[
					{
						id:1,
						text:'Chart Trending',
					},
					{
						id:2,
						text:''
					},
					{
						id:3,
						text:''
					},
				]
			}
		},

		onLoad() {
		
			this.myName = uni.getStorageSync('MyInfo').nickname;
			this.myImgUrl = uni.getStorageSync('MyInfo').headImgPath;
			
			
			this.nextBtting();		
			uni.request({
				url: '/start/api/lottery/lotteryClassList',
				data: {
					"ticket": uni.getStorageSync('logInfo').data,
				},
				header: {
					'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' //自定义请求头信息
				},
				method: 'POST', //请求方式  或GET，必须为大写
				success: (res) => {
					console.log(res.data.data, 888888888888)
					this.colorList = res.data.data;
					this.colorData=this.colorList[0];
		this.gameNav2[1].text=this.colorData.name+" record"
				this.gameNav2[2].text='My '+this.colorData.name+" record"
				},
				fail: (res) => {
					console.log(res);
				}
			});



			this.getLottertRecord();
			uni.request({
				url: '/start/api/lottery/bettingConfig',
				data: {
					"ticket": uni.getStorageSync('logInfo').data,
				},
				header: {
					'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' //自定义请求头信息
				},
				method: 'POST', //请求方式  或GET，必须为大写
				success: (res) => {
					console.log(uni.getStorageSync('logInfo').data,6666666)
					console.log(res.data,123123)
					this.betting_amount = res.data.data.betting_amount.split(',');
					this.betting_rule = res.data.data.tips;
				},
				fail: (res) => {
					console.log(res);
				}
			});


		},
		onReachBottom() {
			this.pageSize += 9;
			console.log(this.pageSize,this.totalPage,5555555555555555555)
			if(this.pageSize>this.totalPage){
				return;
			}
			
			this.getLottertRecord()
			// 判断
			this.myLottertRecord()
			
		},
		methods: {
			gameNavMe(i){
				this.gameNavNum=i;
			},
			xiazhu(val){
			this.xiazhuCode=true;
			this.bettingValue=val;
			this.numindex=-1;
			this.list[0].checked=false;
			},
			folLisNumFn(i){
				this.folLisNum=i;
			},
			numColor(i,j){
				this.numindex=i;
				this.bettingPrice=j;
			},
			nextBtting(){
				uni.request({
					url: '/start/api/lottery/nextLotteryPeriod',
					data: {
						"ticket": uni.getStorageSync('logInfo').data,
						"className":this.gNum,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' //自定义请求头信息
					},
					method: 'POST', //请求方式  或GET，必须为大写
					success: (res) => {
						this.nextBttingValue=res.data.data
					},
					fail: (res) => {
						console.log(res);
					}
				});
			},
			
			toLotter(){
				if(this.bettingPrice==0){
					uni.showToast({
						title: 'Please select bet amount',
						 icon: 'none',
						duration: 1500
					})
					return;
				}
				if(this.bettingNumber==''){
					uni.showToast({
						title: 'Please enter the number of bets',
						 icon: 'none',
						duration: 1500
					})
					return;
				}
				if(this.list[0].checked==false){
					
					uni.showToast({
						title: 'Please agree to the rules first',
						 icon: 'none',
						duration: 1500
					})
					return;
				}
				uni.request({
					url: '/start/api/lottery/betting',
					data: {
						"ticket": uni.getStorageSync('logInfo').data,
						"className": this.nextBttingValue.name,
						"period": this.nextBttingValue.period,
						"bettingValue": this.bettingValue,
						"bettingPrice":this.bettingPrice,
						"bettingNumber":this.bettingNumber,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' //自定义请求头信息
					},
					method: 'POST', //请求方式  或GET，必须为大写
					success: (res) => {
						console.log(res.data)
			          if(res.data.success==true){
						  this.xiaSul=1;
						  uni.showToast({
						  	title: 'Successful bet',
						  	 icon: 'success',
						  	duration: 1500
						  })
					  }else{
						  uni.showToast({
						  	title: res.data.errMsg,
						  	 icon: 'none',
						  	duration: 1500
						  })
					  }
				
					},
					fail: (res) => {
						uni.showToast({
							title: res.data.errMsg,
							 icon: 'none',
							duration: 1500
						})
					}
				});
			},
			
			
			myLottertRecord(){
				uni.request({
					url: '/start/api/lottery/myLotteryRecords',
					data: {
						"ticket": uni.getStorageSync('logInfo').data,
						"classId": this.gg,
						"pageNumber": 1,
						"pageSize": this.pageSize,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' //自定义请求头信息
					},
					method: 'POST', //请求方式  或GET，必须为大写
					success: (res) => {
						if(res.data==''||res.data.data.content==null){
							return
						}
						this.myGameRecord = res.data.data.content;
						this.totalPage = res.data.data.totalElements;
						for (var i = 0; i < this.myGameRecord.length; i++) {
							this.myGameRecord[i].period = this.myGameRecord[i].period.substring(2, 13);
                            this.myGameRecord[i].addTime=index.formatyymmddhhmmss(this.myGameRecord[i].addTime);
						}
						console.log(res.data,5666666)
					},
					fail: (res) => {
						console.log(res);
					}
				});
			},
			getLottertRecord() {

				uni.request({
					url: '/start/api/lottery/lotteryRecords',
					data: {
						"ticket": uni.getStorageSync('logInfo').data,
						"classId": this.gg,
						"pageNumber": 1,
						"pageSize": this.pageSize,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' //自定义请求头信息
					},
					method: 'POST', //请求方式  或GET，必须为大写
					success: (res) => {
						if(res.data==''||res.data.data.content==null){
							return
						}
						this.gameRecordCont = res.data.data.content;
						this.totalPage = res.data.data.totalElements;
						for (var i = 0; i < this.gameRecordCont.length; i++) {
							this.gameRecordCont[i].period = this.gameRecordCont[i].period.substring(2, 13);
							this.gameRecordCont[i].lotteryColor = this.gameRecordCont[i].lotteryColor.split(
								',');
						}
						// console.log(res.data.data,77777777777777)
					},
					fail: (res) => {
						console.log(res);
					}
				});

			},
			
	
			gaClick(i,j) {
		
				this.ganum = i
				this.gNum=j;
				this.colorData = this.colorList[i];
				this.gameNav2[1].text=this.colorData.name+" record"
				this.gameNav2[2].text='My '+this.colorData.name+" record"
				this.ganumArr=this.gNum.split(',')
				this.gg=this.gNum[1];
			},
			goRule() {
				uni.reLaunch({
					url: '../rule/index'
				})
			},
			showMas() {
				this.show = true;
				this.showWhite = false;
		
			},
		 getSonValue(){
				  uni.reLaunch({
				  	url:'../recharge/index'
				  })
		},

		},
	}
</script>

<style>
	@import './index.css';
</style>
