<script setup>
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Avatar from "@/components/Avatar.vue";
import { getGameAPI, getHomeData } from "@/apis";
import { topThreeColors } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const { updateUser, getLvlName } = store;

const battleId = ref("");
const ifWin = ref(false);
const data = ref({});
const totalPoints = ref(0);

onLoad(async (options) => {
  battleId.value = options.battleId;
  const result = await getGameAPI(
    // options.battleId || "BATTLE-1750867490990424058-718"
    options.battleId || "BATTLE-1750688536849458226-518"
  );
  data.value = result;
  if (result.mode === 1 && result.redPlayers[user.value.id]) {
    totalPoints.value = result.redPlayers[user.value.id].totalScore;
    ifWin.value = result.winner === 0;
  }
  if (result.mode === 1 && result.bluePlayers[user.value.id]) {
    totalPoints.value = result.bluePlayers[user.value.id].totalScore;
    ifWin.value = result.winner === 1;
  }
  if (result.mode === 2) {
    const mine = result.players.find((p) => p.playerId === user.value.id);
    if (mine) totalPoints.value = mine.totalScore;
  }
});
function exit() {
  uni.navigateBack();
}
onMounted(async () => {
  const result = await getHomeData();
  if (result.user) updateUser(result.user);
});

const checkBowData = () => {
  if (data.value.mode === 1) {
    uni.navigateTo({
      url: `/pages/team-bow-data?battleId=${battleId.value}`,
    });
  } else if (data.value.mode === 2) {
    uni.navigateTo({
      url: `/pages/melee-bow-data?battleId=${battleId.value}`,
    });
  }
};
</script>

<template>
  <view class="container">
    <image
      :style="{ opacity: ifWin ? '1' : '0' }"
      class="tag"
      src="../static/winner-yellow.png"
      mode="widthFix"
    />
    <block v-if="data.mode === 1">
      <view class="header-team" :style="{ marginTop: '25%' }">
        <image src="../static/battle-result.png" mode="widthFix" />
      </view>
      <view class="battle-winner">
        <image src="../static/shining-bg.png" mode="widthFix" />
        <image src="../static/throphy.png" mode="widthFix" />
        <text>{{ data.winner === 1 ? "蓝队" : "红队" }}获胜</text>
        <text>强势登顶，荣耀加冕</text>
      </view>
    </block>
    <block v-if="data.mode === 2">
      <view class="header-melee">
        <view />
        <image src="../static/battle-result.png" mode="widthFix" />
        <view />
      </view>
      <view
        class="players"
        :style="{
          height: `${Math.max(data.players.length > 5 ? '330' : '300')}px`,
        }"
      >
        <view
          v-for="(player, index) in data.players"
          :key="index"
          :style="{
            border: player.playerId === user.id ? '1px solid #B04630' : 'none',
          }"
        >
          <image
            v-if="index === 0"
            class="player-bg"
            src="../static/melee-player-bg1.png"
            mode="aspectFill"
          />
          <image
            v-if="index === 1"
            class="player-bg"
            src="../static/melee-player-bg2.png"
            mode="aspectFill"
          />
          <image
            v-if="index === 2"
            class="player-bg"
            src="../static/melee-player-bg3.png"
            mode="aspectFill"
          />
          <image
            v-if="index === 0"
            class="player-crown"
            src="../static/champ1.png"
            mode="widthFix"
          />
          <image
            v-if="index === 1"
            class="player-crown"
            src="../static/champ2.png"
            mode="widthFix"
          />
          <image
            v-if="index === 2"
            class="player-crown"
            src="../static/champ3.png"
            mode="widthFix"
          />
          <view v-if="index > 2" class="view-crown">{{ index + 1 }}</view>
          <Avatar
            :src="player.avatar"
            :size="36"
            :borderColor="topThreeColors[index] || ''"
          />
          <view class="player-title">
            <text>{{ player.name }}</text>
            <text>{{ getLvlName(player.totalScore) }}</text>
          </view>
          <text
            ><text :style="{ color: '#fff' }">{{ player.totalRings }}</text>
            环</text
          >
        </view>
      </view>
    </block>
    <view class="battle-e">
      <image src="../static/row-yellow-bg.png" mode="widthFix" />
      <Avatar v-if="data.mode === 1" :src="user.avatar" :size="40" />
      <text v-if="data.gameMode === 1"
        >经验 {{ totalPoints > 0 ? "+" + totalPoints : totalPoints }}</text
      >
      <text v-if="data.gameMode === 2"
        >积分 {{ totalPoints > 0 ? "+" + totalPoints : totalPoints }}</text
      >
    </view>
    <text v-if="data.mode === 1" class="description">{{
      ifWin ? "你已经奔跑在通向王者的路上了！" : "失败是成功之母，儿子在等你！"
    }}</text>
    <text v-if="data.mode === 2" class="description"
      >好成绩！全国排位赛等着你！</text
    >
    <view class="op-btn">
      <view @click="checkBowData">查看靶纸</view>
      <view @click="exit">退出</view>
    </view>
  </view>
</template>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-color: #292929;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.tag {
  position: absolute;
  width: 32vw;
  top: 0;
  right: 0;
}
.container > view {
  position: relative;
}
.header-team {
  width: 80%;
  margin: 10px;
}
.header-team > image {
  width: 20vw;
}
.battle-winner {
  width: 100%;
  height: 38%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  color: #fff9;
  font-size: 14px;
}
.battle-winner > image {
  position: absolute;
  width: 100vw;
  top: 0;
  left: 0;
}
.battle-winner > image:nth-child(2) {
  top: 6vw;
}
.battle-winner > text:nth-child(3) {
  font-size: 30px;
  margin-bottom: 5px;
  font-weight: bold;
  color: #fed847;
}
.battle-winner > text:nth-child(4) {
  margin-bottom: 10px;
}
.battle-e {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.battle-e > image {
  position: absolute;
  width: 100vw;
}
.battle-e > text {
  position: relative;
  font-size: 30px;
  color: #fff;
  margin-left: 10px;
}
.description {
  margin: 50px 0;
  font-size: 14px;
  color: #fed847;
  width: 100%;
  text-align: center;
}
.op-btn {
  width: 100%;
  display: flex;
  justify-content: center;
}
.op-btn > view {
  width: 36%;
  margin: 0 10px;
  background-color: #fed847;
  border-radius: 20px;
  padding: 10px 0;
  text-align: center;
}
.op-btn > view:last-child {
  color: #fff;
  background-color: #757575;
}
.header-melee {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 30px;
  margin-top: 25%;
}
.header-melee > view {
  height: 1px;
  background-color: #fff3;
  width: 18%;
}
.header-melee > image {
  width: 27%;
  margin: 0 20px;
}
.players {
  flex-wrap: wrap;
  display: flex;
  overflow: auto;
  width: calc(100% - 60px);
  color: #fff6;
  margin: 0 30px;
}
.players > view {
  width: 100%;
  height: 60px;
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
  background-color: #ffffff1a;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.player-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.player-crown {
  position: relative;
  width: 27px;
  margin: 0 15px;
}
.view-crown {
  width: 27px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  border-radius: 50%;
  margin: 0 15px;
  color: #fff;
  background-color: #676767;
  position: relative;
}
.player-title {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-left: 15px;
  width: calc(100% - 160px);
}
.player-title > text:first-child {
  color: #fff;
  margin-bottom: 3px;
}
.player-title > text:last-child {
  font-size: 13px;
}
</style>
