<template>

	<view>
		<view v-if="isLoading"
			style="width: 50vw; height: 70vh; display: flex; justify-items: center; align-items: center;">
			<view
				style="width: 50vw; height: 100%; display: flex; justify-items: center; align-items: center; align-content: center; justify-content: center; ">
				<image style="width: 63px; height: 34px;" src="../../static/loading_icon.gif"></image>
			</view>
		</view>
		<view v-if="!isLoading">
			<view style="display: flex; justify-content: space-between; padding-left: 14px; padding-right: 14px;">
				<image style="width: 18px; height: 18px; border-radius: 18px;"
					:src="data_info.HostTeam ? data_info.HostTeam.LogoFullPath : ''" />
				<view class="title">事件统计</view>
				<image style="width: 18px; height: 18px; border-radius: 18px;"
					:src="data_info.GuestTeam ? data_info.GuestTeam.LogoFullPath : ''" />
			</view>

			<view v-if="!data_list" 
			style="width: 50vw; height: 70vh; display: flex; justify-items: center; align-items: center;">
				<text style="width: 50vw; height: 100%; display: flex; justify-items: center; align-items: center; align-content: center; justify-content: center;">
					数据更新中，敬请期待</text>
			</view>
			<view v-if="data_list" v-for="(item, index) in data_list" :key="index">

				<view v-if="!isNaN(parseInt(item.Home))"
					style="display: flex; justify-content: space-between; padding-left: 14px; padding-right: 14px; margin-top: 14px; margin-bottom: 14px; ">
					<view class="text">{{item.Home}}</view>

					<view style="display: flex; align-items: center; width: 98%; justify-content: center; tes  ">
						<view class="bar_bg" style="display: flex; flex: 1.5; flex-direction: row-reverse;">
							<view class="bar" :style="'width:' + changeWitch(item,item.Home) ">
							</view>
						</view>
						<view class="text1" style="align-self: center;">{{item.Name}}</view>
						<view class="bar_bg" style="display: flex; flex: 1.5;">
							<view class="bar" style="align-content: flex-start;"
								:style="'width:' + changeWitch(item,item.Away)"></view>
						</view>
					</view>

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

			</view>
		</view>
	</view>


</template>

<script>
	import {
		default as http
	} from "@/utils/http.js";
	export default {
		props: {
			data_info: [Object]
		},
		data() {
			return {
				select_data: this.data_info,
				data_list: null,
				isLoading: false
			}
		},
		methods: {
			changeWitch(item, value) {
				var v = parseInt((parseInt(value) / (parseInt(item.Home) + parseInt(item.Away))) * 100) + "%"
				return v
			},
			async load_data() {
				console.log("load_data：" + JSON.stringify(this.select_data))
				this.isLoading = true
				var gameid = this.select_data.Sportsdt ? this.select_data.Sportsdt.SportsdtMatchId : undefined;
				if (gameid) {
					let result = await http.gql({
						query: `query{
							getgamegoaldata(gameid:${gameid})
						}`
					})
					//处理返回请求
					console.log(result)
					if (result && result.data && result.data.getgamegoaldata) {
						if (result.data.getgamegoaldata.Error) {
							clearInterval(this.timer);
							this_.disabled = false;
							this.data_list = null;
							uni.showToast({
								icon: "none",
								title: result.data.getgamegoaldata.Error,
							});
						} else {
							this.data_list = result.data.getgamegoaldata.Stat
						}
					} else {
						this.data_list = null;
					}
				}
				this.isLoading = false
			},
			childmethods(item) {
				console.log("childMethods：" + JSON.stringify(item))
				this.select_data = item;
				this.load_data()
			}
		},
		async mounted() {
			this.load_data()
		},

	}
</script>

<style>
	.title {
		color: #797979;
		font-size: 12px;
		text-align: center;
		font-family: SourceHanSansSC-regular;
	}

	.text {
		width: 27px;
		color: #42464C;
		font-size: 12px;
		text-align: center;
		font-family: SourceHanSansSC-regular;
	}

	.text1 {
		color: #8F9197;
		width: 48px;
		min-width: 48px;
		font-size: 12px;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		display: block;
		margin-left: 4px;
		margin-right: 4px;
		font-family: SourceHanSansSC-regular;
	}

	.bar {
		height: 8px;
		line-height: 17px;
		border-radius: 18px;
		background-color: rgba(40, 120, 255, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 12px;
		text-align: left;
		font-family: Roboto;
	}

	.bar_bg {
		height: 8px;
		line-height: 17px;
		border-radius: 18px;
		background-color: rgba(246, 249, 255, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 12px;
		text-align: left;
		font-family: Roboto;
	}
</style>