<script lang='ts' setup>

</script>

<template>
  <ion-list>
    <ion-list-header>
      <ion-label>
        <h4>本月记录</h4>
      </ion-label>
      <ion-button class="text-sm">
        查看全部
      </ion-button>
    </ion-list-header>
    <ion-item>
      <div class="flex justify-between w-full items-center py-4">
        <div class="flex flex-col gap-1">
          <div class="flex items-center gap-2">
            <div class="text-sm font-medium">
              分红收益
            </div>
            <ion-badge class="text-xs p-1" color="success">
              已完成
            </ion-badge>
          </div>
          <div class="text-sm font-medium">
            纽约曼哈顿中心公寓
          </div>
          <div class="text-xs text-text-400">
            NYC-001
          </div>
        </div>
        <div class="text-right">
          <div class="text-base font-semibold">
            {{ formatAmountWithSplit(520.5) }}
          </div>
          <div class="text-xs text-text-400">
            12/27
          </div>
        </div>
      </div>
    </ion-item>
    <ion-item>
      <div class="flex justify-between w-full items-center py-4">
        <div class="flex flex-col gap-1">
          <div class="flex items-center gap-2">
            <div class="text-sm font-medium">
              资产增值
            </div>
            <ion-badge class="text-xs p-1" color="success">
              已完成
            </ion-badge>
          </div>
          <div class="text-sm font-medium">
            旧金山商业地产
          </div>
          <div class="text-xs text-text-400">
            SF-002
          </div>
        </div>
        <div class="text-right">
          <div class="text-base font-semibold">
            {{ formatAmountWithSplit(320.8) }}
          </div>
          <div class="text-xs text-text-400">
            12/27
          </div>
        </div>
      </div>
    </ion-item>
    <ion-item>
      <div class="flex justify-between w-full items-center py-4">
        <div class="flex flex-col gap-1">
          <div class="flex items-center gap-2">
            <div class="text-sm font-medium">
              交易收益
            </div>
            <ion-badge class="text-xs p-1" color="success">
              已完成
            </ion-badge>
          </div>
          <div class="text-sm font-medium">
            洛杉矶住宅楼
          </div>
          <div class="text-xs text-text-400">
            LA-003
          </div>
        </div>
        <div class="text-right">
          <div class="text-base font-semibold">
            {{ formatAmountWithSplit(215.5) }}
          </div>
          <div class="text-xs text-text-400">
            12/26
          </div>
        </div>
      </div>
    </ion-item>
    <ion-item>
      <div class="flex justify-between w-full items-center py-4">
        <div class="flex flex-col gap-1">
          <div class="flex items-center gap-2">
            <div class="text-sm font-medium">
              分红收益
            </div>
            <ion-badge class="text-xs p-1" color="warning">
              待确认
            </ion-badge>
          </div>
          <div class="text-sm font-medium">
            迈阿密海景别墅
          </div>
          <div class="text-xs text-text-400">
            MIA-004
          </div>
        </div>
        <div class="text-right">
          <div class="text-base font-semibold">
            {{ formatAmountWithSplit(680.2) }}
          </div>
          <div class="text-xs text-text-400">
            12/26
          </div>
        </div>
      </div>
    </ion-item>
    <ion-item>
      <div class="flex justify-between w-full items-center py-4">
        <div class="flex flex-col gap-1">
          <div class="flex items-center gap-2">
            <div class="text-sm font-medium">
              资产增值
            </div>
            <ion-badge class="text-xs p-1" color="success">
              已完成
            </ion-badge>
          </div>
          <div class="text-sm font-medium">
            芝加哥写字楼
          </div>
          <div class="text-xs text-text-400">
            CHI-005
          </div>
        </div>
        <div class="text-right">
          <div class="text-base font-semibold">
            {{ formatAmountWithSplit(450.6) }}
          </div>
          <div class="text-xs text-text-400">
            12/25
          </div>
        </div>
      </div>
    </ion-item>
  </ion-list>
</template>

<style lang='css' scoped>
h4 {
  font-size: var(--title-font-size);
}
</style>
