<route lang="json5">
{
  style: {
    navigationBarTitleText: '我的邀请',
    navigationBarBackgroundColor: '#fff',
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="team-page">
    <NavBar>
      <template #right>
        <view @click="handleRule" class="text-14 text-#333">邀请奖励规则</view>
      </template>
    </NavBar>
    <view class="p-15 relative bg-white rounded-10 mt-50 w-345 mx-auto">
      <image
        class="w-186 h-122 rounded-10 mt-15 mx-auto block absolute right-0 bottom-0"
        src="@/static/images/page-sub/team/team-main-hero.png"
        mode="aspectFit"
      />
      <view class="flex flex-col">
        <view class="text-14 text-gradient">看看人数</view>
        <view class="text-35 font-bold text-gradient mt-10 leading-35">1234</view>
      </view>
    </view>
    <image
      class="w-201 h-46 rounded-10 mt-30 mx-auto block"
      src="@/static/images/page-sub/team/team-title.png"
      mode="aspectFill"
    />
    <view class="flex overflow-auto mt-25 pr-15 pl-8">
      <view
        class="px-40 ml-8 py-10 flex-shrink-0 rounded-10 bg-white"
        v-for="(item, index) in levelList"
        :key="item.title"
        :class="{
          'btn-gradient': currentLevelIndex === index,
        }"
        @click="() => (currentLevelIndex = index)"
      >
        <image class="w-42 h-52 rounded-10 mx-auto block" :src="item.icon" mode="aspectFill" />
        <view class="text-14 text-center">{{ item.title }}</view>
      </view>
    </view>
    <view class="mt-25 bg-white rounded-10 w-345 mx-auto">
      <view class="flex p-15 items-center" v-for="item in 10" :key="item">
        <Avatar class="w-40 h-40" />
        <view class="flex-1 flex flex-col ml-15">
          <view class="text-14 text-#333">用户名</view>
          <view class="text-12 mt-10 text-#999">1234567890</view>
          <view class="text-12 mt-10 text-#999">2024-12-27 12:00:00</view>
        </view>
        <view class="bg-#71C78A80 text-white text-12 rounded-10 px-10 py-5">邀请成功</view>
      </view>
    </view>
    <wd-action-sheet v-model="showRule" title="邀请奖励规则">
      <view class="text-16 text-#333 p-15">
        <view class="mb-10">1.每邀请一人可以获得1万投资金，2000数字人民币 1点认购点</view>
        <view class="mb-10">2.邀请满5人可以额外获得5万投资金。1万数字人民币 5点认购点</view>
        <view class="mb-10">3.邀请满10人可以额外获得10万投资金。2万数字人民币 10点认购点</view>
        <view class="mb-10">4.邀请满20人可以额外获得20万投资金。5万数字人民币 20点认购点</view>
        <view class="mb-10">5.邀请满50人可以额外获得50万投资金。10万数字人民币 50点认购点</view>
      </view>
    </wd-action-sheet>
  </view>
</template>

<script setup lang="ts">
import Avatar from '@/components/Avatar.vue'
import NavBar from '@/components/NavBar.vue'
import Level1 from '@/static/images/page-sub/team/level-1.png'
import Level2 from '@/static/images/page-sub/team/level-2.png'
import Level3 from '@/static/images/page-sub/team/level-3.png'
import Level4 from '@/static/images/page-sub/team/level-4.png'
import Level5 from '@/static/images/page-sub/team/level-5.png'
import Level6 from '@/static/images/page-sub/team/level-6.png'

const showRule = ref(false)

const handleRule = () => {
  showRule.value = true
}
const currentLevelIndex = ref(0)

const levelList = ref([
  {
    title: '一级用户',
    icon: Level1,
  },
  {
    title: '二级用户',
    icon: Level2,
  },
  {
    title: '三级用户',
    icon: Level3,
  },
  {
    title: '四级用户',
    icon: Level4,
  },
  {
    title: '五级用户',
    icon: Level5,
  },
  {
    title: '六级用户',
    icon: Level6,
  },
])
</script>

<style lang="scss" scoped>
.team-page {
  min-height: 100vh;
  padding-bottom: 100rpx;
  background-image: url('@/static/images/bg.png');
  background-position: top;
  background-size: cover;
}
</style>
