<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '投资',
  },
}
</route>
<template>
  <view class="invest-page">
    <NavBar>
      <template #right>
        <view @click="onGoInvestDetail" class="text-14 text-#486CCF">投资明细</view>
      </template>
    </NavBar>
    <view
      class="flex shadow-[0_1px_4px_rgba(255,255,255,0.8)] mt-100 pt-12 pb-8 flex-col mx-15 rounded-10 items-center bg-[linear-gradient(180deg,rgba(212,232,255,1),rgba(229,239,249,0.8))]"
    >
      <view class="text-15 text-#486CCF">我的投资金</view>
      <view class="text-30 text-#333 font-bold">{{ userStore.userInfo.member_investment }}</view>
    </view>

    <view class="mt-60">
      <view
        v-for="item in fundList"
        :key="item.id"
        class="invest-item relative flex flex-col items-center pt-15"
      >
        <view class="text-15 text-#3F88F6">{{ item.fund_name }}</view>
        <view class="flex w-full mt-15">
          <view class="flex-1 text-center">
            <view class="text-22 text-#333 font-bold">{{ item.buy_price }}</view>
            <view class="text-12 mt-4 text-#3B81F3">投资金额</view>
          </view>
          <view class="flex-1 text-center">
            <view class="text-22 text-#FF3B30 font-bold">{{ item.day_income }}</view>
            <view class="text-12 mt-4 text-#3B81F3">每日分红</view>
          </view>
        </view>
        <view
          class="text-center px-50 absolute bottom-0 left-0 text-12 text-#fff rounded-full py-8 bg-[linear-gradient(80deg,rgba(59,129,243,1),rgba(55,230,236,1))]"
          @click="onInvest(item)"
        >
          立即投资
        </view>
        <view
          class="text-center px-16 absolute bottom-13 right-33 text-12 text-#fff rounded-br-10 rounded-tl-10 py-4 bg-[linear-gradient(80deg,rgba(59,129,243,1),rgba(55,230,236,1))]"
          :class="{
            '!bg-[linear-gradient(80deg,#E2AF74,#FFCC40)]': item.is_ai,
            '!text-#9B6F33': item.is_ai,
          }"
        >
          {{ item.is_ai ? '会员产品' : '新手体验' }}
        </view>
      </view>
    </view>
    <wd-action-sheet v-model="showPayType" :panels="panels" @select="onSelectPayType" />
  </view>
</template>

<script lang="ts" setup>
import NavBar from '@/components/NavBar.vue'
import AlipayIcon from '@/static/images/invest/alipay-icon.png'
import WechatIcon from '@/static/images/invest/wechat-icon.png'
import UnionpayIcon from '@/static/images/invest/unionpay-icon.png'
import { buyFundAPI, getFundListAPI } from '@/service'
import { useUserStore } from '@/store'
import { mergeStep, showModal } from '@/utils'

defineOptions({
  name: 'Home',
})

const userStore = useUserStore()

const showPayType = ref(false)
const panels = ref([
  {
    iconUrl: WechatIcon,
    title: '微信支付',
  },
  {
    iconUrl: AlipayIcon,
    title: '支付宝支付',
  },
  {
    iconUrl: UnionpayIcon,
    title: '银联支付',
  },
])

const onGoInvestDetail = () => {
  uni.navigateTo({
    url: '/pages-sub/invest-detail/index',
  })
}

const onSelectPayType = ({ item, index }: any) => {
  console.log(item, index)
  alert(item.title)
}

const onInvest = mergeStep(async (item: any) => {
  await showModal('确认投资?')
  await buyFundAPI({
    fund_id: item.id,
  })
  await userStore.loadUserInfo()
  uni.showToast({
    title: '投资成功',
    icon: 'none',
  })
})
const { list: fundList } = useListPageRequest(getFundListAPI)
</script>

<style>
.invest-page {
  min-height: 100vh;
  padding-bottom: 100px;
  background-image: url('@/static/images/invest/bg.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: top -80rpx center;
  background-size: 100%;
}
.invest-item {
  width: 690rpx;
  height: 352rpx;
  margin: 0 auto 30rpx;
  background-image: url('@/static/images/invest/item-bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
</style>
