<route lang="json5">
{
  style: {
    navigationBarTitleText: '资金明细',
    navigationBarBackgroundColor: '#fff',
    navigationStyle: 'custom',
  },
}
</route>

<script lang="ts" setup>
import NavBar from '@/components/NavBar.vue'
import { getMyAssetAPI } from '@/service'
import { useUserStore } from '@/store'

const userStore = useUserStore()

const tabList = computed(() => {
  return [
    { label: '我的余额', value: 1, money: userStore.userInfo?.money },
    { label: '社保金余额', value: 2, money: userStore.userInfo?.moneyjiu },
    { label: '养老金余额', value: 3, money: userStore.userInfo?.moneyold },
    { label: '团队佣金余额', value: 4, money: userStore.userInfo?.moneyyong },
  ]
})
const tabIndex = ref(0)

const { list: assetList, onReload } = useListPageRequest(
  (params) =>
    getMyAssetAPI(params).then((res) => {
      return res
    }),
  {
    autoRequest: false,
  },
)

onLoad((options) => {
  tabIndex.value = Number(options.tabIndex ?? 0)
})
watch(
  () => tabIndex.value,
  (index) => {
    onReload({
      type: unref(tabList)[index].value,
    })
  },
  {
    immediate: true,
  },
)
</script>

<template>
  <view class="asset-page pt-15 relative">
    <NavBar title-color="#333" :title="tabList[tabIndex].label" />
    <!-- <view class="flex justify-around">
      <view
        v-for="(tabItem, index) in tabList"
        @click="tabIndex = index"
        :key="tabItem.value"
        class="flex items-center bg-#DEEBFF text-#3B81F3 rounded-full justify-center py-4 px-10"
        :class="{ 'btn-gradient text-white': tabIndex === index }"
      >
        <view class="text-14">{{ tabItem.label }}</view>
      </view>
    </view> -->
    <view class="py-30 pt-80 px-25">
      <view class="text-17">{{ tabList[tabIndex].label }}</view>
      <view class="text-30">￥{{ tabList[tabIndex].money }}</view>
    </view>
    <view class="relative z-1 main-content pt-40 pb-30 rounded-t-15">
      <view class="mb-15 px-15 text-18">【{{ tabList[tabIndex].label }}】明细</view>
      <template v-if="assetList.length">
        <view
          class="flex px-15 py-12 border-b items-center border-#3333331A border-b-solid"
          v-for="item in assetList"
          :key="item.id"
        >
          <view class="flex flex-col flex-1 ml-15">
            <view class="text-14 text-#333">{{ item.memo }}</view>
            <view class="text-12 mt-4 text-#333">{{ item.createtime }}</view>
          </view>

          <view class="flex flex-col items-end">
            <view class="text-17 font-bold text-gradient">{{ item.money }}</view>
          </view>
        </view>
      </template>
      <template v-else>
        <wd-status-tip image="content" tip="暂无数据" />
      </template>
    </view>
    <!-- <view class="mx-15 text-16 font-bold text-#333">我的资产</view>
    <view
      class="mt-15 mx-15 rounded-20 text-#476FFF main-content p-15 rounded-10 shadow-[0_5px_30px_rgba(149,195,255,0.4)]"
    >
      <view class="text-14 text-#6784C7">总投资金</view>
      <view class="text-35 mt-10 font-bold">{{ detailInfo.suminvest }}</view>
    </view>
    <view class="text-16 mx-15 mb-15 font-bold text-#333 mt-30">资产记录</view>
    -->
  </view>
</template>

<style scoped>
.asset-page {
  background-image: url('@/static/images/page-sub/assets-bg.jpg');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%;
}
.main-content {
  backdrop-filter: blur(60px);
}
</style>
