<script lang='ts' setup>

</script>

<template>
  <div>
    <h4>收益来源</h4>
    <div class="card">
      <div class="flex justify-between items-center mb-2">
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 bg-green-700 rounded-full" />
          <div class="text-sm font-semibold">
            分红收益
          </div>
        </div>
        <div class="text-base font-semibold">
          {{ formatAmountWithSplit(85321.32) }}
        </div>
      </div>
      <div class="flex justify-between items-center mb-2">
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 " />
          <div class="text-xs">
            125项
          </div>
        </div>
        <div class="text-xs text-text-200">
          69.42%
        </div>
      </div>
    </div>

    <div class="card">
      <div class="flex justify-between items-center mb-2">
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 bg-gray-700 rounded-full" />
          <div class="text-sm font-semibold">
            资产收益
          </div>
        </div>
        <div class="text-base font-semibold">
          {{ formatAmountWithSplit(32642.6) }}
        </div>
      </div>
      <div class="flex justify-between items-center mb-2">
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 " />
          <div class="text-xs">
            45项
          </div>
        </div>
        <div class="text-xs text-text-200">
          25.54%
        </div>
      </div>
    </div>

    <div class="card">
      <div class="flex justify-between items-center mb-2">
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 bg-yellow-500 rounded-full" />
          <div class="text-sm font-semibold">
            交易收益
          </div>
        </div>
        <div class="text-base font-semibold">
          {{ formatAmountWithSplit(8110.4) }}
        </div>
      </div>
      <div class="flex justify-between items-center mb-2">
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 " />
          <div class="text-xs">
            89项
          </div>
        </div>
        <div class="text-xs text-text-200">
          5.04%
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='css' scoped>
@reference "tailwindcss";

h4 {
  font-size: var(--title-font-size);
}

.card {
  @apply bg-(--ion-text-color-step-950) rounded-xl p-3 mt-3;
}
</style>
