<template>
	<div class="container">
		<div class="center">
			<img
				src="../../public/lolinfologo.png"
				alt="logo"
				width="300,"
				height="300"
			/>
		</div>
		<div class="center2">
			<form @submit.prevent="searchUser">
				<input type="text" v-model="search" placeholder="Search" autofocus />
				<b-button type="submit" variant="primary">
					Search
				</b-button>
			</form>
		</div>
		<div class="user_info" v-if="user != null">
			<img :src="user.c_imgtier" class="tier_emb" />
			<div>
				<h1>{{ user.c_summoner }}</h1>
				<h2>
					{{ user.c_tier + ' ' + user.c_rank + ' LP' + user.c_leaguePoint }}
				</h2>
				<div class="record">
					{{ user.c_wins + user.c_losses }}전 {{ user.c_wins }}승
					{{ user.c_losses }}패(승률: {{ winRate() }}%)
				</div>
			</div>
		</div>
		<div class="match" v-if="spectator != null && spectator.flag">
			<h1>실시간 경기</h1>
			<table>
				<tr v-for="i in [0, 1, 2, 3, 4]" :key="i">
					<td>
						<img
							:src="spectator.spectator.selectedChamp_image[i]"
							class="champ"
						/>
					</td>
					<td>
						<img :src="spectator.spectator.spell_image[i * 2]" class="spell" />
						<img
							:src="spectator.spectator.spell_image[i * 2 + 1]"
							class="spell"
						/>
					</td>
					<td>{{ spectator.spectator.summonerName[i] }}</td>
					<td v-if="i == 0" class="vs" rowspan="5">vs</td>
					<td>
						<img
							:src="spectator.spectator.selectedChamp_image[i + 5]"
							class="champ"
						/>
					</td>
					<td>
						<img
							:src="spectator.spectator.spell_image[i * 2 + 10]"
							class="spell"
						/>
						<img
							:src="spectator.spectator.spell_image[i * 2 + 11]"
							class="spell"
						/>
					</td>
					<td>{{ spectator.spectator.summonerName[i + 5] }}</td>
				</tr>
			</table>
		</div>

		<h1 class="rec_h">대전기록</h1>
		<div class="match" v-for="(m, j) in matches" :key="j">
			<table>
				<tr v-for="i in [0, 1, 2, 3, 4]" :key="i">
					<td>
						<img :src="m.selectedChamp_image[i]" class="champ" />
					</td>
					<td>
						<img :src="m.spell_image[i * 2]" class="spell" />
						<img :src="m.spell_image[i * 2 + 1]" class="spell" />
					</td>
					<td>{{ m.summonerName[i] }}</td>
					<td>{{ m.kda[i].k }} / {{ m.kda[i].d }} / {{ m.kda[i].a }}</td>
					<td v-if="i == 0" class="vs" rowspan="5">vs</td>
					<td>
						<img :src="m.selectedChamp_image[i + 5]" class="champ" />
					</td>
					<td>
						<img :src="m.spell_image[i * 2 + 10]" class="spell" />
						<img :src="m.spell_image[i * 2 + 11]" class="spell" />
					</td>
					<td>{{ m.summonerName[i + 5] }}</td>
					<td>
						{{ m.kda[i + 5].k }} / {{ m.kda[i + 5].d }} / {{ m.kda[i + 5].a }}
					</td>
				</tr>
			</table>
		</div>
		<!--
		<div id="nav">
			<ul class="lot">
				실시간 경기
				<li
					v-for="(item, index) in this.$store.getters.lotationChampList"
					:key="index"
				>
					<img :src="item" alt="챔피언" width="50," height="50" />
				</li>
			</ul>
		</div>-->
	</div>
</template>

<script>
import { mainData, searchUser, spectatorData, matchData } from '../api/index';
export default {
	data() {
		return {
			search: '',
			user: null,
			spectator: null,
			matches: [],
		};
	},
	watch: {
		'$route.params.id': function() {
			this.fetchdata();
		},
	},
	created() {
		this.fetchdata();
	},
	methods: {
		async searchUser() {
			this.$router.push('/search/' + this.search);
		},
		async fetchdata() {
			try {
				const response = await mainData();
				this.$store.commit('setlotationChamp', response.data.c_rotation);
				this.$store.commit('setbegChamp', response.data.c_rotation_newbie);
				console.log(response.data);
			} catch (error) {
				console.log('에러');
			}

			try {
				const userId = this.$route.params.id;
				const response = await searchUser(userId);
				console.log(response.data);
				if (response.status == 200) {
					this.user = response.data;
					const response2 = await spectatorData(userId);
					console.log(response2.data);
					this.spectator = response2.data;
					const response3 = await matchData(userId);
					console.log(response3.data);
					this.matches = response3.data.match;
					this.$store.commit('setSpecTator', response2.data);
					this.$store.commit('setMatchData', response3.data);
				}
			} catch (error) {
				console.log('에러');
			}
		},
		winRate() {
			return Math.floor(
				(this.user.c_wins / (this.user.c_wins + this.user.c_losses)) * 100,
			);
		},
	},
};
</script>

<style scoped>
.container {
	width: 100%;
	margin: 0;
	padding: 0;
	max-width: none;
}

.center {
	width: 100vw;
	height: 50vh;
	font-weight: bolder;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.center2 {
	width: 100vw;
	height: 2vh;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.lot {
	float: left;
}

.tier_emb {
	width: 200px;
	height: 200px;
}

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

.user_info h1 {
	font-size: 32px;
	font-weight: bold;
}

.user_info h2 {
	font-size: 24px;
	font-weight: bold;
}

.match {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	margin-bottom: 64px;
}

.match .champ {
	width: 64px;
	height: 64px;
}

.match .spell {
	width: 30px;
	height: 30px;
	display: block;
}

.match .spell:nth-child(1) {
	margin-bottom: 4px;
}

.vs {
	font-size: 48px;
	width: 300px;
	text-align: center;
}

.rec_h {
	text-align: center;
}
</style>