<template>
	<view>
		<view v-if="loading" style="height: 100vh; width: 100vw; display: flex; justify-items: center; align-items: center;">
			<view
				style="height: 100%; width: 100%; display: flex; justify-items: center; align-items: center; align-content: center; justify-content: center; ">
					 <image  style="width: 400rpx; height: 400rpx;" src="../../static/loading_icon.gif"></image>
			</view>
		</view>
		<view v-else-if="match_list && match_list.length > 0">

			<z-swiper ref="zSwiper" v-model="match_list" @slideChange="onSwiperChange" :options="options">
				<z-swiper-item v-for="(item, index) in match_list" :key="item.Id" :custom-style="{width:'48%'}">
					<view :class="select_index === index ? 'match-info' : 'match-info-unselect'"
						@click="change_match(item, index)">

						<view style="display: flex; justify-content: space-between; width: 100%;">
							<text class="title-text-one" :style="{'color': (select_index  === index)
				 ? '#ffffff' : '#777777'}" @click="change_match(item, index)">{{deal_match_time(item)}}</text>
							<text class="title-text-one" :style="{'color': (select_index  === index)
				 ? '#ffffff' : '#777777'}" @click="change_match(item, index)">{{item.MatchState}}</text>
						</view>
						<view class="team-h-g">
							<image class="team-logo" :src="item.HostTeam.LogoFullPath" />
							<text class="title-text-two" :style="{'color': (select_index  === index)
				 ? '#ffffff' : '#333333'}">{{item.HostName}}</text>
						</view>
						<view class="team-h-g">
							<image class="team-logo" :src="item.GuestTeam.LogoFullPath" />
							<text class="title-text-two" :style="{'color': (select_index  === index)
				 ? '#ffffff' : '#333333'}">{{item.GuestName}}</text>
						</view>
					</view>
				</z-swiper-item>

			</z-swiper>

			<z-swiper ref="zSwiperInfo" v-model="match_list" @slideChange="onSwiperInfoChange" :options="info_options">
				<z-swiper-item v-for="(info_item, index) in match_list" :key="info_item.Id">

					<MatchEventAnalysis ref="child" :data_info="info_item" />

				</z-swiper-item>
			</z-swiper>
		</view>
		<view v-else style="align-items: center; display: flex; flex-direction: column; height: 80vh;">
			<image style="height: 400rpx; width: 400rpx;" src="../../static/pic_zanwushuju@2x.png"></image>
			<text>暂无内容</text>
		</view>
	</view>

</template>

<script>
	import http from "@/utils/http";

	import MatchEventStatistics from "@/components/match-list/MatchEventStatistics.vue";
	import MatchEventAnalysis from "@/components/match-list/MatchEventAnalysis.vue";

	import common from '../../utils/common';

	export default {
		components: {
			MatchEventStatistics,
			MatchEventAnalysis
		},
		data() {
			return {
				options: {
					slidesPerView: 'auto'
				},
				info_options: {
					centeredSlides: true,
					centeredSlidesBounds: true
				},
				load_status: 0,
				match_list: [],
				view_point: null,
				select_index: 0,
				loading: false
			}
		},
		methods: {
			onSwiperChange(swiper) {
				console.log(swiper)
				this.select_index = this.$refs.zSwiper.swiper.activeIndex
				this.$refs.child[this.select_index].childmethods(this.match_list[this.select_index]) //子组件$on中的名字
				this.$refs.zSwiperInfo.swiper.slideTo(this.select_index); //切换到第一个slide，速度为1秒
			},
			onSwiperInfoChange(swiper) {
				this.select_index = this.$refs.zSwiperInfo.swiper.activeIndex
				this.$refs.child[this.select_index].childmethods(this.match_list[this.select_index]) //子组件$on中的名字
				this.$refs.zSwiper.swiper.slideTo(this.select_index); //切换到第一个slide，速度为1秒
			},
			deal_match_time(match) {
				let temp_data = new Date(match.MatchTime).toJSON()
				let bj_time = new Date(+new Date(temp_data) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(
					/\.[\d]{3}Z/, '')

				return match.GameName + ' ' + bj_time.substring(5, 16)
			},
			change_match(item, index) {
				this.$refs.zSwiperInfo.swiper.slideTo(index); //切换到第一个slide，速度为1秒
			}
		},
		async onLoad() {
			this.loading = true
			let infoRes = await http.gql({
				"query": `{
					  liveScore(lotId: 72, matchState: "未") {
						count
						matchs {
						  Id
						  InfoId
						  YiqiuMatchId
						  LotteryId
						  IssueName
						  MatchTime
						  MatchNumber
						  HostName
						  GuestName
						  GameName
						  HostTeam {
							LogoFullPath
						  }
						  GuestTeam {
							LogoFullPath
						  }
						  MatchState
						  MatchRound
						  PreTotalScore
						  Temperature
						  SportsInjury
						  SportsInfoCount
						  Sportsdt {
							SportsdtMatchId
						  }
						}
					  }
					}	`
			})
			let matchs = infoRes.data.liveScore.matchs
			if (this.match_list.length > 0) {
				this.match_list.length = 0
			}
			for (let m of matchs) {
				if (m.YiqiuMatchId) {
					this.match_list.push(m)
				}
			}

			if (this.match_list.length > 0) {
				this.select_index = 0
			}
			console.log("==========>>>", JSON.stringify(this.match_list))
			this.loading = false;
		}
	}
</script>

<style>
	.match-info {
		display: flex;
		flex-direction: column;
		min-width: 400;
		margin-top: 32rpx;
		margin-left: 32rpx;
		padding: 24rpx;
		background: linear-gradient(135deg, #34C592 0%, #287E60 100%);
		border-radius: 16rpx;
	}

	.match-info-unselect {
		display: flex;
		flex-direction: column;
		margin-top: 32rpx;
		min-width: 400;
		margin-left: 32rpx;
		padding: 24rpx;
		border-radius: 16rpx;
		border: 2rpx solid #04764E;
	}


	.team-logo {
		width: 40rpx;
		height: 40rpx;
		border-radius: 10px;
	}

	.team-h-g {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 3px;
		color: white;
		font-size: 25rpx;
	}

	.text-index {
		width: 56rpx;
		height: 56rpx;
		margin: 11px;
		background-color: #F5F5F5;
		color: #888888;
		font-size: 14px;
		border-radius: 56rpx;
		line-height: 56rpx;
		text-align: center;
	}

	.text-item {
		color: #333333;
		font-size: 16px;
		text-align: justify;
		border-radius: 20px;
		line-height: 20px;
	}

	.title-text-one {
		font-size: 28rpx;
		color: white;
		white-space: nowrap;
		font-weight: 400;
	}

	.title-text-two {
		font-size: 36rpx;
		margin-left: 6px;
		color: white;
		white-space: nowrap;
		font-weight: 500;
	}
</style>