<template>
  <view class="min-h-screen pt-50 pb-100">
    <view
      class="w-345 mx-auto rounded-10 btn-gradient px-30 pb-20 relative shadow-[0_5px_30px_rgba(55,230,236,0.4)]"
    >
      <view class="relative -top-30px">
        <view class="relative w-70">
          <Avatar class="w-70 h-70 box-border" />
          <view
            class="text-center left-1/2 whitespace-nowrap -translate-x-1/2 py-2 px-10 absolute -bottom-6 bg-[linear-gradient(180deg,#FFD54B,#FFB99A)] rounded-full text-10 left-0 text-#fff"
          >
            黄金会员
          </view>
        </view>
        <view class="text-16 mt-15 text-#fff">132***0101</view>
      </view>
      <view class="absolute -bottom-10 right-30 text-90 leading-80 font-bold text-#ffffff20">
        VIP
      </view>
    </view>

    <view class="mt-30 w-345 mx-auto grid grid-cols-3 gap-10">
      <view
        class="bg-#fff py-40 rounded-10 text-center border border-#E5E5E5 border-solid"
        v-for="(item, index) of vipList"
        :key="item.id"
        :class="{
          '!bg-[linear-gradient(90deg,#3B81F320,#37E6EC20)]': currentVipIndex === index,
          '!border-#3B81F3': currentVipIndex === index,
        }"
        @click="currentVipIndex = index"
      >
        <view class="text-14">{{ item.vip_name }}</view>
        <view class="mt-10 text-20 font-bold">{{ item.buy_price }}</view>
      </view>
    </view>

    <view class="text-center mt-30 mt-30 pt-30 border-t-8 border-#f7f7f7 border-t-solid">
      <view class="text-18 font-500 text-#333">会员专属权益</view>
      <view class="text-14 text-#666 mt-10">每日获得高收益分红</view>
    </view>

    <view class="mt-30 w-345 mx-auto grid grid-cols-3 gap-10">
      <view class="bg-#fff py-20 rounded-10 text-center border border-#E5E5E5 border-solid">
        <image
          class="w-50 h-50"
          src="@/static/images/page-sub/purchase-member/icon-1.png"
          mode="scaleToFill"
        />
        <view class="mt-10 text-12 text-#999">每日可以获取</view>
        <view class="text-14 font-bold text-#FF5F5F">
          {{ Number(vipList[currentVipIndex].award_investment) }}投资金
        </view>
      </view>
      <view class="border border-#E5E5E5 border-solid py-20 rounded-10 text-center">
        <image
          class="w-50 h-50"
          src="@/static/images/page-sub/purchase-member/icon-2.png"
          mode="scaleToFill"
        />
        <view class="mt-10 text-12 text-#999">数字人民币</view>
        <view class="text-14 font-bold text-#FF5F5F">
          {{ Number(vipList[currentVipIndex].award_currency) }}元
        </view>
      </view>
      <view class="bg-#fff py-20 rounded-10 text-center border border-#E5E5E5 border-solid">
        <image
          class="w-50 h-50"
          src="@/static/images/page-sub/purchase-member/icon-3.png"
          mode="scaleToFill"
        />
        <view class="mt-10 text-12 text-#999">AI智能</view>
        <view class="text-14 font-bold text-#FF5F5F">
          {{ vipList[currentVipIndex].dividend_multiple }}倍
        </view>
      </view>
    </view>

    <view
      class="bg-white fixed bottom-0 left-0 right-0 px-15 py-10 shadow-[0_0_10px_rgba(10,68,245,0.1)]"
    >
      <view class="flex items-center pb-safe">
        <view
          class="btn-gradient flex-1 text-center text-white rounded-full text-14 px-30 py-10"
          @click="onSubmit"
        >
          立即购买
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import Avatar from '@/components/Avatar.vue'
import { buyVIPAPI, getVipListAPI } from '@/service'
import { useUserStore } from '@/store'
import { mergeStep, showModal } from '@/utils'

const vipList = ref<any[]>([])
const currentVipIndex = ref(0)
onLoad(() => {
  getVipListAPI().then((res) => {
    vipList.value = res.data.list
  })
})

const userStore = useUserStore()
const onSubmit = mergeStep(async () => {
  console.log(vipList.value[currentVipIndex.value])
  await showModal('确认购买吗？')
  await buyVIPAPI({
    fund_id: vipList.value[currentVipIndex.value].id,
  })
  await showModal('购买成功')
  await userStore.loadUserInfo()
})
</script>

<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '购买会员',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>
