<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '',
  },
}
</route>

<template>
  <view class="w-full min-h-screen bg-bgc flex flex-col items-center">
    <view
      class="w-690rpx h-90rpx p-10rpx box-border bg-cardlight rounded-20rpx flex items-center justify-center mt-20rpx"
    >
      <view
        class="w-325rpx h-70rpx rounded-20rpx flex items-center justify-center text-white text-26rpx font-700"
        :class="activeTab === 'one' ? 'tab-bg' : ''"
        @click="changeActiveTab('one')"
      >
        {{ $t('trophy.Miners') }}
      </view>
      <view
        class="w-325rpx h-70rpx rounded-20rpx flex items-center justify-center text-white text-26rpx font-700"
        :class="activeTab === 'two' ? 'tab-bg' : ''"
        @click="changeActiveTab('two')"
      >
        {{ $t('trophy.Squad') }}
      </view>
    </view>
    <view class="w-690rpx flex items-end justify-around mt-55rpx">
      <view class="w-216rpx flex flex-col items-center text-white justify-center">
        <view class="relative w-136rpx h-237rpx">
          <image
            src="@/static/images/trophy/two.png"
            class="w-full h-full absolute left-10rpx"
          ></image>
          <image
            src="@/static/images/trophy/avatar.png"
            class="w-120rpx h-120rpx absolute left-12rpx top-20rpx"
          ></image>
        </view>
        <view class="text-24rpx font-700 text-center mt-30rpx">Crypto Candlestick</view>
        <view class="flex items-center justify-center mt-10rpx">
          <image src="@/static/images/trophy/jinbi.png" class="w-30rpx h-30rpx mr-10rpx"></image>
          <text class="text-26rpx font-400">20,000</text>
        </view>
      </view>
      <view class="w-216rpx flex flex-col items-center text-white justify-center">
        <view class="relative w-207rpx h-362rpx">
          <image
            src="@/static/images/trophy/one.png"
            class="w-full h-full absolute left-20rpx"
          ></image>
          <image
            src="@/static/images/trophy/avatar.png"
            class="w-160rpx h-160rpx absolute left-22rpx top-50rpx"
          ></image>
        </view>
        <view class="text-24rpx font-700 text-center mt-30rpx">Crypto Candlestick</view>
        <view class="flex items-center justify-center mt-10rpx">
          <image src="@/static/images/trophy/jinbi.png" class="w-30rpx h-30rpx mr-10rpx"></image>
          <text class="text-26rpx font-400">20,000</text>
        </view>
      </view>
      <view class="w-216rpx flex flex-col items-center text-white justify-center">
        <view class="relative w-149rpx h-208rpx">
          <image src="@/static/images/trophy/three.png" class="w-full h-full"></image>
          <image
            src="@/static/images/trophy/avatar.png"
            class="w-128rpx h-128rpx absolute left-4rpx top-22rpx"
          ></image>
        </view>
        <view class="text-24rpx font-700 text-center mt-30rpx">Crypto Candlestick</view>
        <view class="flex items-center justify-center mt-10rpx">
          <image src="@/static/images/trophy/jinbi.png" class="w-30rpx h-30rpx mr-10rpx"></image>
          <text class="text-26rpx font-400">20,000</text>
        </view>
      </view>
    </view>
    <view class="flex flex-col justify-center items-center w-full mt-50rpx mb-250rpx">
      <view
        v-for="(item, index) in 10"
        :key="index"
        class="w-690rpx h-130rpx mt-20rpx rounded-20rpx bg-cardlight flex items-center justify-between"
      >
        <view class="flex items-center ml-20rpx">
          <image
            src="@/static/images/trophy/avatar.png"
            class="w-90rpx h-90rpx rounded-100rpx mr-20rpx flex flex-col justify-center text-center"
          ></image>
          <view class="flex flex-col">
            <text class="text-28rpx text-white">Crypto Candlestick</text>
            <view class="flex items-center mt-10rpx">
              <image
                v-if="activeTab === 'one'"
                src="@/static/images/trophy/jinbi.png"
                class="w-30rpx h-30rpx mr-10rpx"
              ></image>
              <image
                v-else
                src="@/static/images/trophy/jinbi.png"
                class="w-30rpx h-30rpx mr-10rpx"
              ></image>
              <view class="text-26rpx text-white">20,000</view>
            </view>
          </view>
        </view>

        <view class="w-120rpx h-70rpflex flex-col justify-center text-center">
          <text class="text-[30rpx] text-[#fff] font-600">{{ index + 4 }}</text>
        </view>
      </view>
    </view>
  </view>
  <view class="w-full h-130rpx bg-cardlight fixed bottom-98rpx flex items-center justify-between">
    <view class="flex items-center ml-40rpx">
      <image
        src="@/static/images/trophy/avatar.png"
        class="w-90rpx h-90rpx rounded-53rpx mr-20rpx flex flex-col justify-center text-center"
      ></image>
      <view class="flex flex-col text-primary">
        <text class="text-28rpx">Crypto Candlestick</text>
        <view class="flex items-center mt-10rpx">
          <image
            v-if="activeTab === 'one'"
            src="@/static/images/trophy/jinbi.png"
            class="w-30rpx h-30rpx mr-10rpx"
          ></image>
          <image
            v-else
            src="@/static/images/trophy/jinbi.png"
            class="w-30rpx h-30rpx mr-10rpx"
          ></image>

          <view class="text-26rpx">2000</view>
        </view>
      </view>
    </view>
    <view class="min-w-150rpx h-70rpflex flex justify-center text-center">
      <text class="text-[32rpx] text-primary font-700">200</text>
    </view>
  </view>
  <tabbar currentTab="pages/trophy/index"></tabbar>
</template>
<script setup lang="ts">
import tabbar from '@/components/TabBar/index.vue'

type Tab = 'one' | 'two'
const activeTab = ref<Tab>('one')

// 点击切换个人数据或团队数据
const changeActiveTab = async (tab: Tab) => {
  activeTab.value = tab
  if (tab === 'one') {
  } else if (tab === 'two') {
  }
}
</script>
<style lang="scss" scoped>
.tab-bg {
  background: var(--primary-color);
  color: var(--text-color);
}
</style>
