<template>

	<view>
		<view v-if="loading"
			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="!loading">
			<view class="charts-box">
				<qiun-data-charts  type="radar" :opts="opts" :chartData="chartData" :canvas2d="true"/>
			</view>

			<view class="content"
				style="display: flex; flex-direction: row; padding-left: 13px; padding-right: 13px; margin-top: 11px;">
				<view
					style="display: flex; flex: 1; flex-direction: column; padding-right: 14px ; padding-bottom: 7px; ">
					<view class="text2" style="text-align: right;">{{host.win_avg_balls}}球</view>
					<view class="text" style="text-align: right;">主队均进球</view>
				</view>
				<view
					style="display: flex; flex: 1; flex-direction: column; padding-left: 14px; border-left: 1px solid #E8EFFF; padding-bottom: 7px; ">
					<view class="text2" style="text-align: left;">{{guest.win_avg_balls}}球</view>
					<view class="text" style="text-align: left;">客队均进球</view>
				</view>
			</view>

			<view class="content"
				style="display: flex; flex-direction: row; border-top:1px solid ; border-color: #E8EFFF; margin-bottom: 17px; margin-left: 13px; margin-right: 13px;">
				<view style="display: flex; flex: 1; flex-direction: column; padding-right: 14px; padding-top: 7px">
					<view class="text2" style="text-align: right;">{{host.lose_avg_balls}}球</view>
					<view class="text" style="text-align: right;">主队均失球</view>
				</view>
				<view
					style="display: flex; flex: 1; flex-direction: column; padding-left: 14px; border-left: 1px solid #E8EFFF; padding-top: 7px">
					<view class="text2" style="text-align: left;">{{guest.lose_avg_balls}}球</view>
					<view class="text" style="text-align: left;">客队均失球</view>
				</view>
			</view>

			<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.LogoFullPath" />
				<view class="title">综合能力</view>
				<image style="width: 18px; height: 18px; border-radius: 18px;"
					:src="data_info.GuestTeam.LogoFullPath" />
			</view>

			<view style="display: flex; width: 90%; margin-top: 15px; margin-left: 14px; margin-right: 14px;">
				<view class="left-bar" :style="'width:' + host.rate">{{host.rate}}</view>
				<view class="right-bar" :style="'width:' + guest.rate">{{guest.rate}}</view>
			</view>
			<view class="text3">{{radar_chart_data.predict_value}}</view>

			<view class="button" @click="toDetail(select_data)">详情分析</view>
		</view>
	</view>


</template>

<script>
	import {
		default as http
	} from "@/utils/http.js";
	import common from '@/utils/common.js'
	import {
		setTimeout
	} from "timers";
	export default {
		props: {
			data_info: [Object]
		},
		data() {
			return {
				common,
				canvasId: "yiqiu_id"+ this.data_info.YiqiuMatchId,
				loading: true,
				select_data: this.data_info,
				host: {},
				guest: {},
				radar_chart_data: {},
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['radar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#2878FF", "#FFD03E", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [0, 0, 0, 0],
					dataLabel: false,
					enableScroll: false,
					fontSize: 12,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 25
					},
					extra: {
						radar: {
							gridType: "radar",
							gridColor: "#CCCCCC",
							gridCount: 2,
							opacity: 0.2,
							max: 100,
							labelShow: true,
							border: true
						}
					}
				}
			};
		},
		mounted() {
			this.getServerData()
		},
		methods: {
			async getServerData() {
				console.log("getServerData：" + JSON.stringify(this.select_data))
				var yiqiu_id = this.select_data.YiqiuMatchId;
				// var yiqiu_id = 7065015
				this.canvasId = "yiqiu_id：" + yiqiu_id
				console.log(yiqiu_id)
				this.loading = true
				if (yiqiu_id) {
					let result = await http.gql({
						query: `query{
							get_soccer_game_base_surface_detail(yiqiu_id:${yiqiu_id})
						}`
					})

					//处理返回请求
					if (result && result.data && result.data.get_soccer_game_base_surface_detail) {
						if (result.data.get_soccer_game_base_surface_detail.error) {
							clearInterval(this.timer);
							this_.disabled = false;
							uni.showToast({
								icon: "none",
								title: result.data.get_soccer_game_base_surface_detail.error,
							});
						} else {
							this.radar_chart_data = result.data.get_soccer_game_base_surface_detail.result
								.radar_chart_data
							this.host = this.radar_chart_data.host_result;
							this.guest = this.radar_chart_data.guest_result;
							let res = {
								categories: ["身价", "技术", "排名", "状态", "防守", "进攻"],
								series: [{
										name: "主队",
										data: [this.host.team_worth, this.host.tech_score, this.host.team_rank,
											this.host
											.status_score, this.host.defend_total, this.host.attack_total
										]
									},
									{
										name: "客队",
										data: [this.guest.team_worth, this.guest.tech_score, this.guest
											.team_rank, this.guest
											.status_score, this.guest.defend_total, this.guest.attack_total
										]
									}
								]
							};
							console.log(JSON.stringify(res))
							var this_ = this;
							setTimeout(function() {
								this_.chartData = JSON.parse(JSON.stringify(res));
							}, 100)

						}
					}
				} else {
					uni.showToast({
						icon: "none",
						title: "暂无详情数据",
					});
				}
				this.loading = false

			},
			toDetail(match) {
				console.log("Detail：" + JSON.stringify(match))
				let matchId = match.Sportsdt.SportsdtMatchId
				let infoId = match.InfoId
				let yiqiuMatchId = match.YiqiuMatchId
				console.log(JSON.stringify(match))
				if (common.info_config.match_url && yiqiuMatchId) {
					let tempData = {
						url: common.info_config.match_url.replace("%s", yiqiuMatchId),
					}
					uni.navigateTo({
						url: `/pages/notitle_h5/notitle_h5?info=${encodeURIComponent(JSON.stringify(tempData))}`
					})
				}

			},
			childmethods(item) {
				console.log("childMethods：" + JSON.stringify(item))
				this.select_data = item;
				this.getServerData()
			}
		}
	}
</script>

<style>
	.charts-box {
		width: 100%;
		height: 200px;
	}

	.text {
		color: #D8D8D8;
		font-size: 12px;
		text-align: left;
		font-family: SourceHanSansSC-regular;

	}

	.text2 {
		color: #20262E;
		font-size: 14px;
		text-align: right;
		font-family: SourceHanSansSC-regular;
	}

	.content {
		display: flex;
		width: 100%;
		justify-content: center;
		justify-items: center;
	}

	.left-bar {
		color: #fff;
		font-size: 12px;
		text-align: center;
		background: #2878FF;
		border-top-left-radius: 0.8rem;
		border-bottom-left-radius: 0.8rem;
	}

	.right-bar {
		color: #fff;
		font-size: 12px;
		text-align: center;
		background: #FFD03E;
		border-top-right-radius: 0.8rem;
		border-bottom-right-radius: 0.8rem;
	}

	.text3 {
		color: #42464C;
		font-size: 12px;
		text-align: left;
		padding-left: 14px;
		padding-right: 14px;
		margin-top: 10px;
		margin-bottom: 20px;
		font-family: SourceHanSansSC-regular;
	}

	.button {
		line-height: 20px;
		border-radius: 20px;
		background: linear-gradient(180deg, rgba(40, 120, 255, 1) 0%, rgba(40, 111, 234, 1) 100%);
		color: rgba(255, 255, 255, 1);
		font-size: 14px;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-left: 13px;
		margin-right: 13px;
		text-align: center;
		font-family: Roboto;
	}
</style>