<template>
	<view>
		<view style="display: flex; justify-content: space-between; width: 100%; margin-top: 30rpx;">
			<text class="title_text" style="width: 20%;">赛事</text>
			<view style="display: flex; justify-content: space-between;">
				<text class="title_text">主</text>
				<text class="title_text"
					style="flex: 1; display: flex; margin-left: 30rpx; margin-right: 30rpx;">比分(半场)</text>
				<text class="title_text">客</text>
			</view>
			<text class="title_text" style="color: #6f83fc; width: 20%;">{{getWinTypeName()}}</text>
		</view>


		<view v-for="(item, index) in data_array" :class="index % 2 == 0 ?'item_bg' : 'item_bg_two'" :key="index">

			<view style="display: flex; width: 16%; flex-direction: column; 
				justify-content: center; align-items: center;">
				<text class="text1">{{competition[item.Id[1]].ShortName}}</text>
				<text class="text1">{{utils.dateFormatYear2(item.Date)}}</text>
			</view>

			<view style="display: flex; width: 100%; flex: 1; font-size: 16px;
					flex-direction: row;">

				<text :style="'color:' + getTeamNameColor(item.Id[2],item)"
					style="flex: 1; text-align: right;">{{Team[item.Id[2]].ShortName}}</text>

				<view style="margin-left: 30rpx; margin-right: 30rpx; ">
					<text
						style="font-size: 18px; color: #666; font-weight: bold;">{{item.ScoreAll[0] + ":" + item.ScoreAll[1]}}</text>
					<text style="font-size: 14px; margin-left: 6rpx;
		color: #999; padding-top: 5px">{{"["+item.Half+"]"}}</text>
				</view>

				<text :style="'color:' + getTeamNameColor(item.Id[3],item)"
					style="flex: 1; text-align: left;">{{Team[item.Id[3]].ShortName}}</text>
			</view>

			<view class="item_win_text" :style="'background-color:' + getTeamNameColor(HomeId, item)"
				@click="switchWinType()">
				<text>{{getWinTypeInfo(HomeId, item)}}</text>
			</view>

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

<script>
	import utils from '../utils/utils.js';

	export default {
		name: "AnalysisList",
		data() {
			return {
				winTypeArray: ["胜平负", "进球", "半全场"],
				utils,
				winTypeIndex: 0
			};
		},
		props: {
			data_array: {
				type: Array,
				default: () => []
			},
			competition: {
				type: Object,
				default: () => ({})
			},
			Team: {
				type: Object,
				default: () => ({})
			},
			HomeId: {
				type: Number,
				default: 0
			}
		},
		watch: {
			data_array: function(newVal, oldVal) {
				console.log('属性值变为：', newVal);
				this.data_array = newVal
			}
		},
		methods: {
			checkTramWin(id, item, score) { // 判断是赢是输是平
				var index1 = item.Id[2] === id ? 0 : 1;
				var index2 = item.Id[3] === id ? 1 : 0;

				if (score[index1] > [index2]) {
					return "胜";
				} else if (score[index1] == score[index2]) {
					return "平";
				} else {
					return "负";
				}
			},
			getWinTypeInfo(id, item) {
				switch (this.winTypeIndex) {
					case 0:
						return this.checkTramWin(id, item, item.ScoreAll);
					case 1:
						return (item.ScoreAll[0] + item.ScoreAll[1]) + "球"
					case 2:
						return this.checkTramWin(id, item, item.Half.split('-')) + this.checkTramWin(id, item, item
							.ScoreAll)
				}
			},
			getTeamNameColor(id, item) {
				if (this.HomeId !== id) {
					return "#888888"
				} else {
					var index1 = item.Id[2] === id ? 0 : 1;
					var index2 = item.Id[2] === id ? 1 : 0;
					var home = item.ScoreAll[index1]

					if (item.ScoreAll[index1] > item.ScoreAll[index2]) {
						return "#ff6858";
					} else if (item.ScoreAll[index1] == item.ScoreAll[index2]) {
						return "#82c866";
					} else {
						return "#6f83fc";
					}
				}

			},
			getWinTypeName() {
				return this.winTypeArray[this.winTypeIndex]
			},
			switchWinType() {
				this.winTypeIndex++
				if (this.winTypeIndex >= this.winTypeArray.length) {
					this.winTypeIndex = 0
				}
			}
		},
		mounted() {
			console.log(Array.isArray(this.data_array) )
		}
	}
</script>

<style>
	.red {
		color: #ff6858;
	}

	.green {
		color: #82c866;
	}

	.blue {
		color: #6f83fc;
	}

	.title_text {
		text-align: center;
		font-size: 24rpx;
		color: #b2b2b2;
	}

	.item_bg {
		font-size: 14px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		background-color: #fafafa;
	}

	.item_bg_two {
		font-size: 14px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		background-color: white;
	}

	.item_win_text {
		width: 16%;
		text-align: center;
		border-radius: 2px;
		padding: 1px 0px;
		font-size: 12px;
		background-color: rgb(145, 187, 128);
		color: rgb(255, 255, 255);
	}

	.text1 {
		text-align: center;
		font-size: 12px;
		color: #999;
	}

	.text2 {
		text-align: center;
		font-size: 12px;
		color: #b2b2b2;
	}
</style>