<script setup>
import { ref, onMounted } from "vue";
import Container from "@/components/Container.vue";
import UserHeader from "@/components/UserHeader.vue";
import UserItem from "@/components/UserItem.vue";
import Avatar from "@/components/Avatar.vue";
import { canEenter } from "@/util";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, device, online } = storeToRefs(store);
const { updateUser } = store;

const toOrderPage = () => {
  uni.navigateTo({
    url: "/pages/member/orders",
  });
};

const toFristTryPage = async () => {
  if (canEenter(user.value, device.value, online.value, "/pages/first-try")) {
    uni.navigateTo({
      url: "/pages/first-try",
    });
  }
};
const toBeVipPage = () => {
  uni.navigateTo({
    url: "/pages/member/be-vip",
  });
};
const toMyGrowthPage = () => {
  uni.navigateTo({
    url: "/pages/my-growth",
  });
};
const toGradeIntroPage = () => {
  uni.navigateTo({
    url: "/pages/grade-intro",
  });
};
const toRankIntroPage = () => {
  uni.navigateTo({
    url: "/pages/rank-intro",
  });
};
const toAboutUsPage = () => {
  uni.navigateTo({
    url: "/pages/about-us",
  });
};
const toAudioTestPage = () => {
  uni.navigateTo({
    url: "/pages/audio-test",
  });
};
const toUnbindDevicePage = () => {
  uni.navigateTo({
    url: "/pages/device/unbind-device",
  });
};

const showLogout = ref(false);
const logout = () => {
  uni.removeStorageSync(
    `${uni.getAccountInfoSync().miniProgram.envVersion}_token`
  );
  uni.navigateBack();
  updateUser();
};
onMounted(() => {
  const accountInfo = uni.getAccountInfoSync();
  const envVersion = accountInfo.miniProgram.envVersion;
  if (envVersion !== "release") showLogout.value = true;
});

/* global __BUILD_TIME__ */
/** 构建时刻，由 vite.config.js define 在打包时自动注入；仅开发/体验版展示 */
const buildVersion = typeof __BUILD_TIME__ !== 'undefined' ? __BUILD_TIME__ : '';
</script>

<template>
  <Container title="用户信息">
    <view :style="{ width: '100%', height: '100%' }">
      <UserHeader fullNickname />
      <scroll-view
        scroll-y
        :show-scrollbar="false"
        :enhanced="true"
        class="container"
      >
        <view :style="{ height: '10px' }"></view>
        <UserItem title="用户名">{{ user.nickName }}</UserItem>
        <UserItem title="头像">
          <Avatar :src="user.avatar" :size="35" />
        </UserItem>
        <UserItem
          title="订单"
          :customStyle="{
            marginTop: '10px',
          }"
          :onClick="toOrderPage"
        />
        <UserItem
          title="新手试炼场"
          :onClick="user.trio > 0 ? null : toFristTryPage"
        >
          <text v-if="user.trio > 0" :style="{ color: '#259249' }">已完成</text>
          <text v-else :style="{ color: '#CC311F' }">未完成</text>
        </UserItem>
        <UserItem title="会员" :onClick="toBeVipPage">
          <view
            v-if="user.sVip === true"
            class="member-nickname member-nickname--svip"
          >
            <text class="member-nickname__text">已开通SVIP</text>
            <text class="member-nickname__shine">已开通SVIP</text>
          </view>
          <view
            v-else-if="user.vip === true"
            class="member-nickname member-nickname--vip"
          >
            <text class="member-nickname__text">已开通VIP</text>
          </view>
          <text v-else>未开通</text>
        </UserItem>
        <UserItem title="等级介绍" :onClick="toGradeIntroPage">
          <text :style="{ color: '#4C76FF' }">Lv{{ user.lvl }}</text>
          <text
            :style="{
              color: '#FF7900',
              marginLeft: '5px',
            }"
            >{{ user.lvlPoints }}</text
          >
          <text>经验</text>
        </UserItem>
        <UserItem
          title="段位介绍"
          :customStyle="{
            marginBottom: '10px',
          }"
          :onClick="toRankIntroPage"
        >
          <view v-if="user.rankIcon || user.rankName" class="rank-info">
            <image
              v-if="user.rankIcon"
              class="rank-info__frame"
              :src="user.rankIcon"
              mode="aspectFit"
            />
            <text>{{ user.rankName || "暂无段位" }}</text>
          </view>
          <text v-else>暂无段位</text>
        </UserItem>
        <view class="my-grow" @click="toMyGrowthPage">
          <image src="https://static.shelingxingqiu.com/shootmini/static/my-grow.png" mode="widthFix" />
        </view>
        <UserItem title="关于我们" :onClick="toAboutUsPage" />
        <UserItem
          title="音频测试"
          :onClick="toAudioTestPage"
          v-if="showLogout"
        />
        <UserItem
          title="版本信息(仅用于测试)"
          v-if="showLogout"
        >{{ buildVersion }}</UserItem>
        <UserItem
          title="解绑设备(仅用于测试)"
          :onClick="toUnbindDevicePage"
          v-if="showLogout"
        />
        <UserItem
          title="退出登录(仅用于测试)"
          :onClick="logout"
          v-if="showLogout"
        />
        <view :style="{ height: '10px' }"></view>
      </scroll-view>
    </view>
  </Container>
</template>

<style scoped>
.container {
  background-color: #f5f5f5;
  height: calc(100% - 65px);
  margin-top: 15px;
}
.my-grow {
  width: 100%;
}
.my-grow > image {
  width: 100%;
}
.rank-info {
  display: flex;
  align-items: center;
}
.rank-info__frame {
  width: 64rpx;
  height: 64rpx;
  margin-right: 8rpx;
}
</style>
