<script setup>
import { computed, ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import Guide from "@/components/Guide.vue";
import Avatar from "@/components/Avatar.vue";
import TargetPicker from "@/components/TargetPicker.vue";
import { getPractiseDataAPI } from "@/apis";
import { canEenter } from "@/util";

import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, device, online } = storeToRefs(store);
const data = ref({});
const showTargetPicker = ref(false);
const pendingPractiseType = ref("");
const isSVip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && !isSVip.value);

const goPractise = async (type) => {
  if (!canEenter(user.value, device.value, online.value)) return;
  pendingPractiseType.value = type;
  showTargetPicker.value = true;
};

const handleTargetConfirm = (target) => {
  showTargetPicker.value = false;
  const type = pendingPractiseType.value;
  uni.navigateTo({
    url: `/pages/practise-${type}?target=${target}`,
  });
};

onShow(async () => {
  const result = await getPractiseDataAPI();
  data.value = result;
});
</script>

<template>
  <Container title="个人练习">
    <view :style="{ width: '100%', height: '100%' }">
      <Guide>
        <view class="guide-tips">
          <text>师傅领进门，修行靠自身，赶紧练起来吧。</text>
          <text>坚持练习就能你快速升级，早日加入全国排位赛！</text>
        </view>
      </Guide>
      <view class="practise-data">
        <view>
          <view>
            <Avatar :rankLvl="user.rankLvl" :src="user.avatar" :size="30" />
            <view
              :class="[
                'member-nickname',
                isVip ? 'member-nickname--vip' : '',
                isSVip ? 'member-nickname--svip' : '',
              ]"
            >
              <text class="member-nickname__text">{{ user.nickName }}</text>
              <text v-if="isSVip" class="member-nickname__shine">{{
                user.nickName
              }}</text>
            </view>
          </view>
          <view>
            <text>已练习打卡</text>
            <text>{{ data.totalDay }}</text>
            <text>天</text>
          </view>
        </view>
        <view>
          <view>
            <view>
              <text>{{ data.totalGroup }}</text>
              <text>组</text>
            </view>
            <text>个人练习量</text>
          </view>
          <view>
            <view>
              <text>{{ data.totalArrow }}</text>
              <text>箭</text>
            </view>
            <text>射箭量</text>
          </view>
          <view>
            <view>
              <text>射灵</text>
              <text>{{ user.lvl }}</text>
              <text>级</text>
            </view>
            <text>当前等级</text>
          </view>
        </view>
      </view>
      <view class="practise-btn" @click="() => goPractise('one')">
        <image
          src="https://static.shelingxingqiu.com/attachment/2025-07-12/db9x668e2vdtqh0otq.png"
          class="practise1"
          mode="widthFix"
        />
      </view>
      <view class="practise-btn" @click="() => goPractise('two')">
        <image
          src="https://static.shelingxingqiu.com/attachment/2025-07-12/db9x668eehkvyicc08.png"
          class="practise2"
          mode="widthFix"
        />
      </view>
    </view>
    <TargetPicker
      :show="showTargetPicker"
      :onClose="() => (showTargetPicker = false)"
      :onConfirm="handleTargetConfirm"
    />
  </Container>
</template>

<style scoped>
.practise-data,
.practise-btn {
  width: calc(100% - 30px);
  margin: 15px;
  margin-top: 0;
  border-radius: 20px;
  border: 1px solid #473f25;
  overflow: hidden;
}
.practise-data > view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff9;
  font-size: 12px;
}
.practise-data > view:first-child {
  padding-bottom: 15px;
  border-bottom: 1px solid #48494e;
  margin: 15px;
  margin-bottom: 0;
}
.practise-data > view:first-child > view {
  display: flex;
  align-items: flex-end;
}
.practise-data > view:first-child > view:first-child .member-nickname {
  color: #fff;
  margin-left: 10px;
  width: 120px;
}
.practise-data > view:first-child > view:first-child .member-nickname__text,
.practise-data > view:first-child > view:first-child .member-nickname__shine {
  font-size: 16px;
}
.practise-data > view:first-child > view:last-child > text:nth-child(2) {
  color: #f7d247;
  margin: 0 3px;
  font-size: 20px;
  font-weight: 600;
  transform: translateY(3px);
}
.practise-data > view:last-child {
  margin-bottom: 15px;
}
.practise-data > view:last-child > view {
  width: 33%;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.practise-data > view:last-child > view:nth-child(2) {
  border-left: 1px solid #48494e;
  border-right: 1px solid #48494e;
}
.practise-data > view:last-child > view > view {
  display: flex;
  align-items: flex-end;
}
.practise-data > view:last-child > view > view > text:nth-last-child(2) {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin: 0 3px;
  transform: translateY(5px);
}
.practise-data > view:last-child > view > text {
  margin-top: 5px;
}
.practise-btn > image {
  width: 100%;
}
</style>
