<template>
	<view>
		<scroll-view>
			<view>

				<view v-for="(key, index) in keySet" :key="index">

					<view class="header-item">
						{{key + ' ' + utils.getweekDay(key)}}
					</view>

					<view v-for="(item, index) in data_map.get(key)" :key="item.Id" class="match_item"
						onclick="event.stopPropagation();" @click="goToMatch(item)">

						<view style="display: flex; flex-direction: row;
				 justify-content: space-between; width: 100%; ">
							<view style="display: flex; flex: 1; ">
								<text class="match_text">{{item.GameName}}</text>

								<text class="match_time_text"
									style="margin-left: 32rpx;">{{getMatchTime(item.MatchTime)}}</text>
							</view>

							<view>
								<text class="match_info_text">{{item.MatchState}}</text>
							</view>


							<view style="display: flex; flex-direction: row-reverse; flex: 1;">

								<view v-if="item.MatchState != '完'">
									<view v-show="item.SportsInfoCount != 0" style="display: flex;flex-direction: row;
							 justify-content: right; 
							 background: #5589FF; 
							 color: white;
							 align-items: center;
							 padding-left: 16rpx;
							 border-radius: 26rpx 0rpx 0rpx 26rpx;">
										<text>{{item.SportsInfoCount + "条情报"}}</text>
										<image style="width: 40rpx; height: 40rpx;"
											src="../static/tab_icons/ic_in@2x.png"></image>
									</view>
								</view>

								<text v-else class="match_info_text"
									style="margin-left: 32rpx;">{{getMatchInfo(item)}}</text>
							</view>

						</view>

						<view style="display: flex; justify-content: space-between; ">
							<view @click.stop="follow_action(item, index)" style="padding-top: 32rpx;">
								<image class="follow_iv" v-show="item.isFollow"
									src="../static/tab_icons/follow01.png" />
								<image class="follow_iv" v-show="!item.isFollow"
									src="../static/tab_icons/follow02.png" />
							</view>

							<view
								style=" display: flex; align-items: center; width: 100%; justify-content: space-between;">
								<view
									style="display: flex; flex: 1; flex-direction: row-reverse; ; width: 100%; margin-right: 75rpx; align-items: center;">
									
									<text v-show="item.HostYellow" class="yellow_p">{{item.HostYellow}}</text>

									<text v-show="item.HostRed" class="red_p">{{item.HostRed}}</text>

									<text class="name-text">{{item.HostName}}</text>
								</view>

								<view>
									<text class="score"
										v-if="item.QcBf">{{getHostScore(item) + ":" + getGuestScore(item)}}</text>
									<text v-else class="vs_text" style="min-width: 60rpx;">VS</text>
								</view>


								<view
									style="flex: 1;  display: flex; width: 100%; margin-left: 75rpx; align-items: center;">

									<text class="name-text">{{item.GuestName}}</text>

									<text v-show="item.GuestRed" class="red_p">{{item.GuestRed}}</text>

									<text v-show="item.GuestYellow" class="yellow_p">{{item.GuestYellow}}</text>

								</view>
							</view>



							<view class="follow_iv"></view>

						</view>



					</view>
				</view>

			</view>
		</scroll-view>

	</view>
</template>

<script>
	import utils from "../utils/utils.js";
	import followHelper from '../utils/followHelper.js';
	import common from '../utils/common';
import loginHelper from "../utils/loginHelper.js";
	export default {
		name: "MatchList",
		props: {
			data_info: [Array],
		},
		data() {
			return {
				data_in : this.data_info,
				utils,
				data_map: new Map(),
				keySet: []
			};
		},
		methods: {
			getHostScore(item) {
				if (item.QcBf && item.QcBf.length > 0) {
					var split = item.QcBf.split('-')
					return split[0]
				}
				return "-"
			},
			getGuestScore(item) {
				if (item.QcBf && item.QcBf.length > 0) {
					var split = item.QcBf.split('-')
					return split[1]
				}
				return "-"
			},
			getMatchTime(time) {
				return utils.dateFormatHoursMinutes(time)
			},
			getMatchInfo(item) {
				if (item.BcBf) {
					return "半场：" + item.BcBf
				}
				return ""
			},
			async follow_action(match,index) {
				
				if(loginHelper.hasLogin()) {
					this.$emit("updateItem", match.Id , index)
					
					await followHelper.follow_action(match)
					
					await this.handlerData()
				} else {
					let systemInfo = uni.getSystemInfoSync();
					if (systemInfo.platform === 'ios') {
					  // 在iOS操作系统中
					  uni.navigateTo({
					  	url: "/pages/login_apple/login_apple",
					  });
					}else{
						uni.navigateTo({
							url: "/pages/login_pwd/login_pwd",
						});
					}
				}

			},
			async handlerData() {
				//获取关注的比赛

				var follow_list = await followHelper.getFollowList()
				this.data_map.clear()
				 for (var i = 0; i < this.data_in.length; i++) { 
					 var moudle = this.data_in[i]
					 if (moudle) {
					 	var mId = moudle.Id
					 	var same = follow_list.some(function(item, index) {
					 		return item.Id === mId
					 	})
					 	if (same) {
					 		moudle.isFollow = true
					 	} else {
					 		moudle.isFollow = false
					 	}
					 	var list = this.data_map.get(moudle.IssueName)
					 	if (!list) {
					 		list = []
					 	}
					 	list.push(moudle)
					 	this.data_map.set(moudle.IssueName, list)
					 }
				 }

				this.keySet.length = 0
				this.keySet.push(...this.data_map.keys())
			},
			onRefreshInfo(data) {
				this.handlerData()
			},
			goToMatch(match) {
				console.log("Detail：" + JSON.stringify(match))
				let gameid = match.Sportsdt.SportsdtMatchId
				if (gameid) {
					uni.navigateTo({
						url: `/pages/analysis/analysis?info=${JSON.stringify(gameid)}`
					})
				}
			}
		},
		mounted() {
			this.handlerData()
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
	}

	.match_item {
		margin: 32rpx;
		padding-left: 24rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		background: #F3F3F3;
		border-radius: 24rpx;
	}

	.follow_iv {
		width: 44rpx;
		height: 44rpx;
	}

	.match_text {
		font-size: 30rpx;
		font-weight: 400;
		color: #FF9139;
	}

	.match_time_text {
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
	}

	.centered-component {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.match_info_text {
		height: 42rpx;
		max-height: 42rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #AAAAAA;
		line-height: 42rpx;
	}

	.vs_text {
		font-size: 36rpx;
		font-weight: bold;
		color: #777777;
	}

	.score {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}

	.yellow_p {
		background: #FF9139;
		border-radius: 4rpx;
		padding-left: 2rpx;
		padding-right: 2rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-left: 5rpx;
		margin-right: 5rpx;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
	}

	.red_p {
		background: #F02626;
		border-radius: 4rpx;
		padding-left: 2rpx;
		padding-right: 2rpx;
		font-size: 30rpx;
		font-weight: bold;
		margin-left: 5rpx;
		margin-right: 5rpx;
		color: #FFFFFF;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
	}

	.sports_info_count_text {
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 42rpx;
	}

	.header-item {
		height: 44rpx;
		margin-right: 9px;
		line-height: 17px;
		position: sticky;
		z-index: 9999;
		top: auto;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		line-height: 44rpx;
	}

	.name-text {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
</style>