<template>
	<view>
		<view v-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:'46%'}">
					<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' : '#101010'}" @click="change_match(item, index)">{{deal_match_time(item)}}</text>
							<text class="title-text-one" :style="{'color': (select_index  === index)
				 ? '#ffffff' : '#101010'}" @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' : '#101010'}">{{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' : '#101010'}">{{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">

					<view v-if="info_item.Info">

						<view v-for="(strInfo, index) in info_item.Info"
							style="display: flex; flex-direction: row; margin: 35rpx; float: left;">


							<view>
								<text class="text-index-c">
									{{index + 1}}
								</text>
							</view>

							<text class="text-item">{{strInfo}}</text>

						</view>

					</view>
					<view v-else style="width: 100%; height: 400px; display: flex;
					 justify-content: center; align-items: center;">

						<text style="color: #999999; font-size: 16px;">暂无情报</text>
					</view>

				</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";
	export default {
		data() {
			return {
				options: {
					slidesPerView: 'auto'
				},
				info_options: {
					autoHeight: true,
					centeredSlides: true,
					centeredSlidesBounds: true
				},
				load_status: 0,
				match_list: [],
				view_point: null,
				select_index: 0,
			}
		},
		methods: {
			onSwiperChange(swiper) {
				this.select_index = this.$refs.zSwiper.swiper.activeIndex
				this.$refs.zSwiperInfo.swiper.slideTo(this.select_index); //切换到第一个slide，速度为1秒
			},
			onSwiperInfoChange(swiper) {
				this.select_index = this.$refs.zSwiperInfo.swiper.activeIndex
				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)
			},

			deal_viewpoint(item) {
				var info = []
				if (item) {
					let viewpoint = JSON.parse(item.JcInfo)
					if (viewpoint) {
						info.push(...viewpoint.HostGood)
						info.push(...viewpoint.HostBad)
						info.push(...viewpoint.GuestGood)
						info.push(...viewpoint.GuestBad)
					}
				}
				return info
			},
			change_match(item, index) {
				this.$refs.zSwiperInfo.swiper.slideTo(index); //切换到第一个slide，速度为1秒

			}
		},
		async onLoad() {
			let infoRes = await http.gql({
				"query": `query{liveScore(lotId:72,matchState:"未"){count matchs{Id InfoId LotteryId IssueName MatchTime MatchNumber HostName GuestName GameName HostTeam{LogoFullPath} GuestTeam{LogoFullPath} MatchState MatchRound PreTotalScore Temperature SportsInjury SportsInfoCount Sportsdt{ SportsdtMatchId } JcInfoPrice JcInfo }}}`
			})
			let matchs = infoRes.data.liveScore.matchs
			if (this.match_list.length > 0) {
				this.match_list.length = 0
			}

			for (let m of matchs) {
				if (m.SportsInfoCount > 0) {
					m.Info = this.deal_viewpoint(m)
					this.match_list.push(m)
				}
			}
			if (this.match_list.length > 0) {
				this.select_index = 0
			}
			console.log("==========>>>", this.match_list)
		}
	}
</script>

<style>
	.match-info {
		display: flex;
		flex-direction: column;
		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;
		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-c {
		width: 42rpx;
		height: 42rpx;
		margin: 22rpx;
		background-color: #5589FF;
		color: white;
		float: left;
		font-size: 28rpx;
		border-radius: 100%;
		line-height: 42rpx;
		text-align: center;
	}

	.text-item {
		color: #333333;
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		line-height: 42rpx;
	}

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

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