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

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

function exit() {
  uni.navigateBack();
}

onLoad(async (options) => {
  const myId = user.value.id;
  if (options.battleId) {
    const result = await getGameAPI(
      options.battleId || "BATTLE-1758270367040321900-868"
    );
    data.value = {
      ...result,
      battleMode: result.gameMode,
    };
    if (result.mode === 1) {
      data.value.redPlayers = Object.values(result.redPlayers);
      data.value.bluePlayers = Object.values(result.bluePlayers);
      if (result.redPlayers[myId]) {
        totalPoints.value = result.redPlayers[myId].totalScore;
        data.value.myTeam = result.redPlayers[myId].team;
        ifWin.value = result.winner === 0;
      }
      if (result.bluePlayers[myId]) {
        totalPoints.value = result.bluePlayers[myId].totalScore;
        data.value.myTeam = result.bluePlayers[myId].team;
        ifWin.value = result.winner === 1;
      }
    }
    if (result.mode === 2) {
      data.value.playerStats = result.players.map((p) => ({
        ...p,
        id: p.playerId,
      }));
      const mine = result.players.find((p) => p.playerId === myId);
      if (mine) totalPoints.value = mine.totalScore;
      rank.value = result.players.findIndex((p) => p.playerId === myId) + 1;
    }
  } else {
    const battleInfo = uni.getStorageSync("last-battle");
    if (!battleInfo) return;
    data.value = {
      mvps: [],
      ...battleInfo,
    };
    if (battleInfo.mode === 1) {
      battleInfo.playerStats.forEach((p) => {
        if (p.team === 1) data.value.bluePlayers = [p];
        if (p.team === 0) data.value.redPlayers = [p];
        if (p.mvp) data.value.mvps.push(p);
      });
      data.value.mvps.sort((a, b) => b.totalRings - a.totalRings);
    }
    rank.value = 0;
    const mine = battleInfo.playerStats.find((p, index) => {
      rank.value = index + 1;
      return p.id === myId;
    });
    if (mine) {
      data.value.myTeam = mine.team;
      totalPoints.value = mine.totalScore;
      if (battleInfo.mode === 1) {
        ifWin.value = mine.team === battleInfo.winner;
      }
    }
  }
  if (data.value.mode === 1) {
    audioManager.play(ifWin.value ? "胜利" : "失败");
  } else if (data.value.mode === 2) {
    if (data.value.battleMode === 1) {
      if (rank.value <= data.value.playerStats.length * 0.3) {
        audioManager.play("胜利");
      }
    } else if (data.value.battleMode === 2) {
      if (totalPoints.value > 0) {
        audioManager.play("胜利");
      } else if (totalPoints.value < 0) {
        audioManager.play("失败");
      }
    }
  }
});

const checkBowData = () => {
  uni.navigateTo({
    url: `/pages/match-detail?id=${data.value.id}`,
  });
};
</script>

<template>
  <view class="container">
    <block v-if="data.mode === 1">
      <view class="header-team" :style="{ marginTop: '25%' }">
        <image src="../static/battle-result.png" mode="widthFix" />
        <view class="header-solo" v-if="data.teamSize === 2">
          <text
            :style="{
              background:
                data.winner === 1
                  ? 'linear-gradient(270deg, #3597ff 0%, rgba(0,0,0,0) 100%);'
                  : 'linear-gradient(270deg, #fd4444 0%, rgba(0, 0, 0, 0) 100%)',
            }"
            >{{ data.winner === 1 ? "蓝队" : "红队" }}获胜</text
          >
          <Avatar
            :size="32"
            :src="
              data.winner === 1
                ? data.bluePlayers[0].avatar
                : data.redPlayers[0].avatar
            "
            :borderColor="data.winner === 1 ? '#5FADFF' : '#FF5656'"
            mode="widthFix"
          />
        </view>
      </view>
      <view class="header-mvp" v-if="data.teamSize !== 2">
        <image
          :src="`../static/${data.winner === 1 ? 'blue' : 'red'}-team-win.png`"
          mode="widthFix"
        />
        <view
          :style="{
            transform: `translateY(50px) rotate(-${5 + data.mvps.length}deg)`,
          }"
        >
          <view v-if="data.mvps && data.mvps[0].totalRings">
            <image src="../static/title-mvp.png" mode="widthFix" />
            <text
              >斩获<text
                :style="{
                  color: '#fed847',
                  fontSize: '18px',
                  margin: '0 3px',
                  fontWeight: '600',
                }"
                >{{ data.mvps[0].totalRings }}</text
              >环</text
            >
          </view>
          <view v-if="data.mvps && data.mvps.length">
            <view v-for="(player, index) in data.mvps" :key="index">
              <view class="team-avatar">
                <Avatar
                  :src="player.avatar"
                  :size="40"
                  :borderColor="data.myTeam === 1 ? '#5fadff' : '#ff6060'"
                />
                <text
                  v-if="player.id === user.id"
                  :style="{
                    backgroundColor: data.myTeam === 1 ? '#5fadff' : '#ff6060',
                  }"
                  >自己</text
                >
              </view>
              <text class="truncate">{{ player.name }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="battle-winner">
        <image src="../static/shining-bg.png" mode="widthFix" />
        <image
          :src="ifWin ? '../static/you-win.png' : '../static/you-lost.png'"
          mode="widthFix"
          class="scale-in"
        />
        <image
          :src="
            getBattleResultTips(data.battleMode, data.mode, {
              win: ifWin,
            })
          "
          class="scale-in"
          mode="widthFix"
        />
      </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.playerStats.length > 5 ? '330' : '300')}px`,
        }"
      >
        <view
          v-for="(player, index) in data.playerStats"
          :key="index"
          :style="{
            border: player.id === user.id ? '1px solid #B04630' : 'none',
          }"
        >
          <image
            v-if="player.rank === 1"
            class="player-bg"
            src="../static/melee-player-bg1.png"
            mode="aspectFill"
          />
          <image
            v-if="player.rank === 2"
            class="player-bg"
            src="../static/melee-player-bg2.png"
            mode="aspectFill"
          />
          <image
            v-if="player.rank === 3"
            class="player-bg"
            src="../static/melee-player-bg3.png"
            mode="aspectFill"
          />
          <image
            v-if="player.rank === 1"
            class="player-crown"
            src="../static/champ1.png"
            mode="widthFix"
          />
          <image
            v-if="player.rank === 2"
            class="player-crown"
            src="../static/champ2.png"
            mode="widthFix"
          />
          <image
            v-if="player.rank === 3"
            class="player-crown"
            src="../static/champ3.png"
            mode="widthFix"
          />
          <view v-if="player.rank > 3" class="view-crown">{{
            player.rank
          }}</view>
          <Avatar
            :src="player.avatar"
            :size="36"
            :borderColor="topThreeColors[index] || ''"
          />
          <view class="player-title">
            <text class="truncate">{{ player.name }}</text>
            <text>{{ getLvlName(player.rank_lvl) }}</text>
          </view>
          <text
            ><text :style="{ color: '#fff' }">{{ player.totalRings }}</text>
            环</text
          >
        </view>
      </view>
    </block>
    <view
      class="battle-e"
      :style="{ marginTop: data.mode === 2 ? '20px' : '20vw' }"
    >
      <image src="../static/row-yellow-bg.png" mode="widthFix" />
      <view class="team-avatar">
        <Avatar
          :src="user.avatar"
          :size="40"
          :borderColor="data.myTeam === 1 ? '#5fadff' : '#ff6060'"
        />
        <text
          :style="{ backgroundColor: '#5fadff' }"
          v-if="data.mode === 1 && data.myTeam === 1"
          >蓝队</text
        >
        <text
          :style="{ backgroundColor: '#ff6060' }"
          v-if="data.mode === 1 && data.myTeam === 0"
          >红队</text
        >
      </view>
      <text v-if="data.battleMode === 1">
        你的经验 {{ totalPoints > 0 ? "+" + totalPoints : totalPoints }}
      </text>
      <text v-if="data.battleMode === 2">
        你的积分 {{ totalPoints > 0 ? "+" + totalPoints : totalPoints }}
      </text>
    </view>
    <text v-if="data.mode === 2" class="description">
      {{
        getBattleResultTips(data.battleMode, data.mode, {
          win: ifWin,
          score: totalPoints,
          rank,
        })
      }}
    </text>
    <view class="op-btn">
      <view @click="checkBowData">查看成绩</view>
      <view @click="exit">退出</view>
    </view>
    <UserUpgrade />
  </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: 82%;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}
.header-team > image {
  width: 20vw;
}
.header-solo {
  font-size: 14px;
  display: flex;
  align-items: flex-end;
}
.header-solo > text {
  padding: 5px 20px;
  padding-left: 24px;
  transform: translateX(15px);
}
.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:first-child {
  animation: rotate 10s linear infinite;
}
.battle-winner > image:nth-child(2) {
  top: 10%;
}
.battle-winner > image:nth-child(3) {
  top: 75%;
}
.battle-e {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.battle-e > image {
  position: absolute;
  width: 100vw;
}
.battle-e > text {
  position: relative;
  font-size: 30px;
  color: #fff;
  margin-left: 10px;
}
.description {
  margin-top: 50px;
  font-size: 14px;
  color: #fed847;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}
.op-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.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 {
  display: flex;
  flex-direction: column;
  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;
  height: 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;
  width: 40vw;
}
.player-title > text:last-child {
  font-size: 13px;
}
.team-avatar {
  position: relative;
  overflow: hidden;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border-radius: 50%;
}
.team-avatar > text {
  font-size: 7px;
  text-align: center;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  padding-bottom: 1px;
}
.header-mvp {
  position: relative;
  width: 100%;
}
.header-mvp > image:first-child {
  position: absolute;
  width: 100%;
}
.header-mvp > view {
  display: flex;
  justify-content: center;
}
.header-mvp > view > view:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header-mvp > view > view:first-child > image {
  width: 24vw;
}
.header-mvp > view > view:first-child > text {
  color: #fff;
  font-size: 14px;
  transform: skewX(-10deg);
}
.header-mvp > view > view:last-child {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 9px;
  text-align: center;
  transform: translateY(-4px);
}
.header-mvp > view > view:last-child > view {
  margin-left: 4vw;
  display: flex;
  flex-direction: column;
}
.header-mvp > view > view:last-child > view > text {
  margin-top: 4px;
  width: 40px;
  transform: skewX(-10deg) translateX(-3px);
}
</style>
