<script setup>
import { ref } from "vue";
import SButton from "@/components/SButton.vue";
const props = defineProps({});

const battleMode = ref(1);
const step = ref(1);

const toBattleRoom = () => {
  uni.navigateTo({
    url: "/pages/battle-room",
  });
};
</script>
<template>
  <view v-if="!warnning" class="container">
    <image
      v-if="step === 1"
      src="../static/choose-battle-mode.png"
      mode="widthFix"
    />
    <view v-if="step === 1" class="create-options">
      <view
        :class="{ 'battle-btn': true, 'battle-choosen': battleMode === 1 }"
        @click="() => (battleMode = 1)"
      >
        <text>对抗模式（1V1）</text>
      </view>
      <view
        :class="{ 'battle-btn': true, 'battle-choosen': battleMode === 2 }"
        @click="() => (battleMode = 2)"
      >
        <text>乱斗模式（3-10人）</text>
      </view>
      <view class="battle-btn battle-close">
        <text>对抗模式（2V2）</text>
        <text>敬请期待</text>
      </view>
      <view class="battle-btn battle-close">
        <text>对抗模式（3V3）</text>
        <text>敬请期待</text>
      </view>
    </view>
    <SButton v-if="step === 1" :onClick="() => (step = 2)">下一步</SButton>
    <view v-if="step === 2" class="room-info">
      <view>
        <text>房间号：</text>
        <text>3245</text>
      </view>
      <SButton width="60vw" :onClick="toBattleRoom">进入房间</SButton>
      <text>30分钟无人进入则房间无效</text>
      <view>复制房间信息邀请朋友进入</view>
    </view>
  </view>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container > image:first-child {
  width: 45%;
  margin: 5px 0;
}
.create-options {
  width: 100%;
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  margin-bottom: 15px;
}
.battle-btn {
  width: 45%;
  height: 55px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid #fff3;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.battle-choosen {
  color: #fed847;
  border-color: #fed847;
}
.battle-close {
  background-color: #8889;
  color: #b3b3b3;
}
.battle-close > text:last-child {
  font-size: 12px;
}
.room-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 40px;
}
.room-info > view:first-child {
  font-size: 22px;
  color: #fff;
  margin-bottom: 20px;
}
.room-info > view:first-child > text:last-child {
  color: #fed847;
}
.room-info > text {
  color: #888686;
  font-size: 14px;
  margin: 10px 0;
}
.room-info > view:last-child {
  color: #287fff;
  margin: 20px 0;
  font-size: 14px;
}
</style>
