<template>
	<view>

		<v-tabs class="tab_c" v-model="current" :tabs="tabs" @change="changeTab" fixed="true"
		line-height="8rpx" line-color="#04764E"
			color="#AAAAAA" activeColor="#04764E" height="88rpx"></v-tabs>

		<z-swiper ref="zSwiper" v-model="tabs" @slideChange="onSwiperChange"
			:options="options">
			
			<z-swiper-item v-for="(item, index) in tabs" :key="item" style="min-height: 90vh;">

				<view v-if="match_map.get(item) && match_map.get(item).length > 0 " style="width: 100vw;">
					<MatchList :data_info="match_map.get(item)" ref="MatchListRef" :key="index" @updateItem ="updateItem"></MatchList>
				</view>
				<view style="width: 100vw; height: 80vh; align-items: center; display: flex; justify-content: center;"
					v-else>
					
					<image style="height: 460rpx; width: 460rpx;" src="../../static/pic_zanwushuju@2x.png"></image>
					
				</view>

			</z-swiper-item>

		</z-swiper>

	</view>
</template>

<script>
	import MatchList from '../../components/MatchList.vue'
	import {
		default as http
	} from "@/utils/http.js";
	import common from '../../utils/common';
	import followHelper from '../../utils/followHelper.js';

	export default {
		components: {
			MatchList
		},
		data() {
			return {
				match_map: new Map(),
				options: {
					autoHeight: true,
					centeredSlides: true,
					centeredSlidesBounds: true,
					initialSlide: 1
				},
				current: 1,
				tabs: []
			}
		},
		async onLoad() {

			let infoRes = await http.gql({
				"query": `{
					  liveScore(lotIds: "72,45",order:[["MatchTime","desc"]], limit:100) {
						count
						matchs {
						  Id
						  InfoId
						  LotteryId
						  IssueName
						  MatchTime
						  MatchNumber
						  HostName
						  HostRed
						  HostYellow
						  GuestName
						  GuestRed
						  GuestYellow
						  GameName
						  QcBf
						  BcBf
						  HostTeam {
							LogoFullPath
						  }
						  GuestTeam {
							LogoFullPath
						  }
						  MatchState
						  MatchRound
						  PreTotalScore
						  Temperature
						  SportsInjury
						  SportsInfoCount
						  Sportsdt {
							SportsdtMatchId
						  }
						}
					  }
					}						  `
			})
			let matchs = infoRes.data.liveScore.matchs
			if (this.match_map.size > 0) {
				this.match_map.clear()
			}
			this.tabs.length = 0
			var followList = await followHelper.getFollowList()
			this.match_map.set("关注", followList)

			let zhongyao = []
			let wancheng = []
			for (let m of matchs) {
				if (m.MatchState === "完") {
					wancheng.push(m)
				
				} else if(m.MatchState === "未"){
					zhongyao.push(m)
				}
			}
			
			zhongyao.sort((item1, item2) => (new Date(item1.IssueName) - new Date(item2.IssueName)))

			
			this.match_map.set("重要", zhongyao)
			this.match_map.set("完赛", wancheng)
			 
			
			for (let m of matchs) {
				if (m.GameName) {
					var list = this.match_map.get(m.GameName)
					if (!list) {
						list = []
					}
					list.push(m)
					this.match_map.set(m.GameName, list)
				}
			}
			
			for (const [key, value] of this.match_map.entries()) {
			  console.log(key, value.length);
			}

			this.tabs.push(...this.match_map.keys())
		},
		methods: {
			updateItem(id, index) {
				console.log("id：" + id + "index:" + index) 
				
				var list =  this.match_map.get(this.tabs[this.current])
				
				var follow_list = followHelper.getFollowList()
				
				var same = follow_list.some(function(item, index) {
					return item.Id === id
				})
				if (same) {
					list[index].isFollow = true
				} else {
					list[index].isFollow = false
				}
				
				console.log(list[index])
				
			},
			async startRealTime() {

				let query_data = `query{
					getlivedata
				}`
				let result = await http.gql({
					query: query_data
				})
				console.log(result)
				if (result && result.data && result.data.getlivedata) {
					var liveData = result.data.getlivedata.LiveData
					var zhongyao = this.match_map.get("重要")
					for (let m of zhongyao) {
						if (m && m.Sportsdt &&
							m.Sportsdt.SportsdtMatchId
						) {
							var live = liveData[m.Sportsdt.SportsdtMatchId]
							if (live) {
								m.QcBf = live.ScoreAll[0] + "-" + live.ScoreAll[1]
								m.BcBf = live.Score[0] + "-" + live.Score[1]
								m.HostRed = live.RedCard[0]
								m.HostYellow = live.YellowCard[0]
								m.GuestRed = live.RedCard[1]
								m.GuestYellow = live.YellowCard[1]
							}
						}
					}
					ref.onRefreshInfo(zhongyao)
					console.log(zhongyao)
				}
			},
			onSwiperChange(swiper) {
				this.current = this.$refs.zSwiper.swiper.activeIndex
				console.log("---》" + this.tabs[this.current] +"--"+ this.match_map.get(this.tabs[this.current]))
				console.log('onSwiperChange：' +  swiper.activeIndex)
				var ref = this.$refs.MatchListRef[this.current]
				console.log(this.$refs.MatchListRef)
				if (this.current === 0) {
					var followList = followHelper.getFollowList()
					ref.onRefreshInfo(followList)
				} else {
					var data = this.match_map.get(this.tabs[this.current])
					ref.onRefreshInfo(data)
				}
			},
			changeTab(index) {
				console.log('当前选中的项：' + index)
				this.$refs.zSwiper.swiper.slideTo(index); //切换到第一个slide，速度为1秒
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #F5F5F5;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.tab_c {
		/* position: fixed; */
		z-index: 4;
	}
</style>