<template>
	<view class="content">
		<navigation :showBack="showBack">{{siteName}}</navigation>
		<swit :switNum="2"/>
		<balance @send="getSonValue" :showRechange="false"  :currencySymbol="currencySymbol" :currentBalance="currentBalance">
			<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,item),myLottertRecord()">
					{{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 v-show="canBuy">
				<view class="flex icon-con">
					<view class="ico" @click="xiazhu(item.color)" v-for="item,index in gameColor" :key="item.id" :class="{'greenbg': item.id === 1, 'purple': item.id === 2, redbg: item.id === 3}">
						{{item.color2}}
					</view>
				</view>
					<view class="multiple">
						<view class="multiple-con flex">
							<view class="mul-item" v-for="(item,index) in gameColorNumber1" :key="item.num"
							@click="xiazhu(item.num)" :class="item.cla">
								{{item.num}}
							</view>
						</view>
						<view class="multiple-con flex">
							<view class="mul-item" ref="mulitem" v-for="(item,index) in gameColorNumber2"
							@click="xiazhu(item.num)"	:key="item.num" :class="item.cla">
								{{item.num}}
							</view>
						</view>
					</view>
				</view>
				<view class="canBuy" v-show="!canBuy">
					<view class="flex icon-con">
				<view class="ico gray" v-for="item,index in gameColor" :key="item.id">
					<!-- <image :src="'../../../static/color/ash_'+item.color+'@3x.png'" mode=""></image> -->
				  {{item.color2}}
				</view>
					</view>
					<view class="multiple">
						<view class="multiple-con flex">
							<view class="mul-item bg_ash" v-for="(item,index) in gameColorNumber1" :key="item.num">
								{{item.num}}
							</view>
						</view>
						<view class="multiple-con flex">
							<view class="mul-item bg_ash" ref="mulitem" v-for="(item,index) in gameColorNumber2"
								:key="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" :gameRecordCont="gameRecordCont" :missingFrequency="missingFrequency"></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" @input="tmoney()"></u-number-box>
				</view>
				<view class="TotalMoney xname">
					Total Contract Money is {{touzhuMoney}}
				</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" @click="xiazhuCode=false"></u-mask>
		<u-mask :show="xiaSul==1" :z-index="10"></u-mask>
		
		
		<!-- 客服信息 -->
		<view class="flex">
			<view class="my-cont" @click="keCode=1">
				<image src="../../../static/home/pop_icon_service@2x.png" mode=""></image>
			</view>
			<u-mask  :z-index="10" :show="keCode==1"></u-mask>
			<view class="tc"  v-show="keCode==1">
			
				<view class="title">
						<image src="../../../static/color/pop_icon_service@2x(1).png" mode="aspectFit" class="img1"></image>
				  <p>Customer Service</p>	
				</view>
				<view class="tc_body">
					<view class="p1">
					{{serviceTime}}
					</view>
		
		
					<scroll-view class="item" style="height:380rpx" scroll-y="true" show-scrollbar="true" scroll-with-animation="true" scroll-top="0" >
						<view class="body_item" @click="gotoWeb(getLink(item))" v-for="(item,index) in whatAppList"
							:key="item">
							<image src="../../../static/color/pop_icon_whatsapp@2x.png" mode="aspectFit" class="img2"></image>
							<view class="p2">
								{{getName(item)}}
							</view>
						</view>
						<view class="body_item" @click="gotoWeb(getLink(item))" v-for="(item,index) in teList"
							:key="item">
							<image src="../../../static/color/pop_icon_teltgram.png" mode="" class="img2"></image>
							<view class="p2">
								<span class="whatapp-name">{{getName(item)}}</span>
							</view>
						</view>
					</scroll-view>
			
				</view>
		
		<image src="../../../static/color/pop_icon_close.png" mode="aspectFit" class="colseKefu" @click="keCode=0"></image>
			</view>
				</view>
		
		
		<tab-bar :selectActive="3"></tab-bar>
		
		
	</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 swit from "@/components/switch/switch.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 {
		components: {
		           swit
		        },
		data() {
			return {
				siteName:'',
				// 传过去rules的值
				ruleDescription:'',
				
				
				// 显示back或不显示
				showBack:false,
				
				// 客服
				keCode:0,
				teList:[],
				whatAppList:[],
				serviceTime:'',
				
				touzhuMoney:0,
                currencySymbol:'',
			    currentBalance:'',
				gameNavNum: 0,
				xiaSul: 0,
				gsxia: 0,
				xia_body: [1, 2, 3],
				follow_xiazhu_conOn: 0,
				bettingPrice: '',
				bettingNumber: 1,
				show: false,
				showWhite: true,
				myName: '',
				myImgUrl: '',
				folLisNum: 0,
				xiazhuCode: false,
				gap: '',
				colorList: [],
				colorData: [],
				ganum: 0,
				canBuy: true,

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

				],
				betting_amount: [],
				betting_rule: '',
				pageSize: 100,
				totalPage: 1,
				gameNav: [],
				gNum: 'G2',
			gameColor: [{
						id: 1,
						color: 'GREEN',
						color2: 'Join Green'
					},
					{
						id: 2,
						color: 'VIOLET',
						color2: 'Join Violet'
					},
					{
						id: 3,
						color: 'RED',
						color2: 'Join Red'
					},
				],
				gameColorNumber1: [{
						num: 0,
						cla: 'bg_jb1'
					},
					{
						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_jb2'
					},
					{
						num: 6,
						cla: 'bg_red'
					},
					{
						num: 7,
						cla: 'bg_green'
					},
					{
						num: 8,
						cla: 'bg_red'
					},
					{
						num: 9,
						cla: 'bg_green'
					},
				],
				bettingValue: '',
				nextBttingValue: [],
				numindex: -1,
				ganumArr: [],
				gg: 3,
				lotteryData: {},	
				gameNav2: [{
						id: 1,
						text: 'Chart Trending',
					},
					{
						id: 2,
						text: ''
					},
					{
						id: 3,
						text: ''
					},
				],
				totalPage2:'',
				lotteryNum:[],

				missingFrequency:{}
				
			}
		},

		onLoad() {
			this.siteName=uni.getStorageSync('siteInfo').siteName;
			this.initializationMissingFrequency();
			// 客服
			this.serviceTime = uni.getStorageSync('siteInfo').serviceTime;
			const siteTelegram = uni.getStorageSync('siteInfo').siteTelegram;
			
				const siteWhatsapp = uni.getStorageSync('siteInfo').siteWhatsapp;
				if (siteTelegram != undefined && siteTelegram != '') {
					this.teList = siteTelegram.split(',')
				}
				if (siteWhatsapp != undefined && siteWhatsapp != '') {
					this.whatAppList = siteWhatsapp.split(',')
				}
			
			
             this.currencySymbol=uni.getStorageSync('siteInfo').currencySymbol;
			this.myName = uni.getStorageSync('MyInfo').nickname;
			this.myImgUrl = uni.getStorageSync('MyInfo').headImgPath;
			
			this.getLotteryClassList();
			this.getBettingConfig();
			

		},
		onReachBottom() {
			this.pageSize += 9;
			if (this.pageSize > this.totalPage) {
				return;
			}

			this.getLottertRecord()
			// 判断
			this.myLottertRecord()

		},
		methods: {
			initializationMissingFrequency(){
				for(var i=0; i<10;i++){
					this.missingFrequency[i.toString()]={
						"missing":0,
						"frequency":0
						}
				}
				
			},
			


			// 客服
			gotoWeb(gotoUrl) {
					// #ifdef H5
					window.location.href = gotoUrl
					// #endif
					// #ifdef APP-PLUS
					var networkType = ''
					uni.getNetworkType({
						success: function(res) {
							networkType = res.networkType
						}
					});
					if (networkType == 'none') {
						uni.showToast({
							title: 'no Network',
							icon: 'none',
							duration: 1500
						})
					} else {
						var param = {
							url: gotoUrl
						}
						uni.navigateTo({
							url: '/pages/menu/me/rechange/topay/index?' + qs.stringify(param)
						})
					}
					// #endif
				},
				
			getLink(item) {
				return item.replace(item.split(':')[0] + ':', '')
			},
			getName(item) {
				return item.split(':')[0]
			},
			
			tmoney(){
				this.touzhuMoney=this.bettingNumber*this.bettingPrice;
			},
			getBettingConfig() {
				const post = api.bettingConfigM({
					"ticket": uni.getStorageSync('logInfo').data,
				})
				post.then(res => {				
						this.betting_amount = res.data.betting_amount.split(',');
						this.betting_rule = res.data.tips;
						this.bettingPrice=this.betting_amount[0];
						this.tmoney();
						this.currentBalance=parseFloat(res.data.balance).toFixed(2)
						
					})
					.catch(e => {
						console.log(e)
					})
			},
			getLotteryClassList() {
				const post = api.lotteryClassList({
					"ticket": uni.getStorageSync('logInfo').data,
				})
				post.then(res => {
						this.colorList = res.data;
						this.colorData = this.colorList[0];
						this.gameNav2[1].text = this.colorData.name + " record"
						this.gameNav2[2].text = 'My ' + this.colorData.name + " record"
						this.ruleDescription=this.colorList[0].description;
						this.gNum = this.colorList[0].name
						this.setlotteryData();
						this.gg=this.colorData.id
						this.getLottertRecord();
					})
					.catch(e => {
						console.log(e)
					})

			},
			timeChange(timestamp) {
				// if(timestamp==0){
				// 	this.ganum+=1;
    //           			this.gNum="G"+ Number(this.gNum.substring(1)+1) ;
				// 		console.log(this.gNum,5555555555555)
				// 	this.gaClick(this.ganum,this.gNum);
				// }
				// console.log(timestamp)
				// console.log(123)
				if (timestamp <= this.colorData.lottery) {
					this.canBuy = false
					this.xiazhuCode=false
				} else {
					this.canBuy = true
				}
				


			},
			reckonTime(){
				for (var key in this.lotteryData) {
					this.lotteryData[key].remain = this.lotteryData[key].remain - 1
					if(this.lotteryData[key].remain==0){
						this.nextBtting(key)
						if(key==this.gNum){
							
							this.getLottertRecord();
							
						}
					}
				
				}
				this.timeChange(this.lotteryData[this.gNum].remain);
			}
			,
			setlotteryData() {
				for (let i = 0; i < this.colorList.length; i++) {
					this.nextBtting(this.colorList[i].name)
				}
				setInterval(this.reckonTime,"1000");
			},
			gameNavMe(i) {
				this.gameNavNum = i;
			},
			xiazhu(val) {
				this.xiazhuCode = true;
				this.bettingValue = val;
		this.numindex = 0;
		this.list[0].checked = true;
			},
			folLisNumFn(i) {
				this.folLisNum = i;
			},
			numColor(i, j) {
				this.numindex = i;
				this.bettingPrice = j;
				this.touzhuMoney=j;
				this.bettingNumber=1;
			},
			nextBtting(gNum) {
				const post = api.nextLotteryPeriodM({
					"ticket": uni.getStorageSync('logInfo').data,
					"className": gNum,
				})
				post.then(res => {
						this.lotteryData[gNum] = res.data
						if (gNum === this.gNum) {
							this.nextBttingValue = this.lotteryData[gNum]
						}
					})
					.catch(e => {
						console.log(e)
					})

			},

			toLotter() {
				uni.showLoading({
					title:'loading'
				})
				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;
				}
				const post = api.bettingM({
					"ticket": uni.getStorageSync('logInfo').data,
					"className": this.nextBttingValue.name,
					"period": this.nextBttingValue.period,
					"bettingValue": this.bettingValue,
					"bettingPrice": this.bettingPrice,
					"bettingNumber": this.bettingNumber,
				})
				post.then(res => {
				
						if (res.success == true) {
							// this.xiaSul = 1;
							uni.showToast({
								title: 'Successful bet',
								icon: 'success',
								duration: 1500
							})
							this.xiazhuCode=false
							this.getBettingConfig();

						} else {
							uni.showToast({
								title: res.errMsg,
								icon: 'none',
								duration: 1500
							})
						}
						uni.hideLoading()
					})
					.catch(e => {
						console.log(e)
					})

			},


			myLottertRecord() {
		
				const post = api.myLotteryRecordsM({
					"ticket": uni.getStorageSync('logInfo').data,
					"classId": this.gg,
					"pageNumber": 1,
					"pageSize": this.pageSize,
				})
				post.then(res => {
						this.myGameRecord = res.data.content;
						this.totalPage = res.data.totalElements;
					if(res.data.content!=''||res.data.content!=undefined){
						this.myGameRecord = res.data.content;
						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);
								
								 this.myGameRecord[i].bettingFee = parseFloat(this.myGameRecord[i].bettingFee).toFixed(2)
						    this.myGameRecord[i].bettingPrice = parseFloat(this.myGameRecord[i].bettingPrice).toFixed(2)
							this.myGameRecord[i].bettingAmount = parseFloat(this.myGameRecord[i].bettingAmount).toFixed(2)
							this.myGameRecord[i].realAmount = parseFloat(this.myGameRecord[i].realAmount).toFixed(2)
						}
					}else{
						 this.myGameRecord='';
					}

					})
					.catch(e => {
						console.log(e)
					})

			},
			getLottertRecord() {
				const post = api.lotteryRecordsM({
					"ticket": uni.getStorageSync('logInfo').data,
					"classId": this.gg,
					"pageNumber": 1,
					"pageSize": this.pageSize,
				})
				post.then(res => {
						if (res.data == '' || res.data.content == null) {
							return
						}
						this.gameRecordCont = res.data.content;
						this.totalPage = res.data.totalElements;
						this.totalPage2 = res.data.totalPages;
						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(',');
								if(!this.gameRecordCont[i].lotteryResult){
									this.gameRecordCont[i].lotteryResult=0
								}
							
								
						}
						this.initializationMissingFrequency()
						for(var i=0; i<this.gameRecordCont.length;i++){
							if(i>100){
								break;
							}
							
							this.missingFrequency[this.gameRecordCont[i].lotteryResult.toString()].frequency=this.missingFrequency[this.gameRecordCont[i].lotteryResult.toString()].frequency+1;
							if(!this.missingFrequency[this.gameRecordCont[i].lotteryResult.toString()].isOpen){
								this.missingFrequency[this.gameRecordCont[i].lotteryResult.toString()].missing=i
								this.missingFrequency[this.gameRecordCont[i].lotteryResult.toString()].isOpen=true
							}
							
						}
					})
					.catch(e => {
						console.log(e)
					})

			},




			gaClick(i, j,item) {
				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.nextBttingValue = this.lotteryData[j]
				this.gg=this.colorList[i].id
				this.getLottertRecord();
				this.timeChange(this.lotteryData[j].remain)
				this.ruleDescription=item.description;
			},
			goRule() {
				uni.navigateTo({
					url: '../rule/index?des='+this.ruleDescription
				})
			},
			showMas() {
				this.show = true;
				this.showWhite = false;

			},
			getSonValue() {
				uni.navigateTo({
					url: '../recharge/index'
				})
			},

		},
	}
</script>

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