<script lang='ts' setup>
import dayjs from "dayjs";
import { client, safeClient } from "@/api";

const now = dayjs();

const { data } = safeClient(client.api.earnings.type_summary.post({
  startDate: now.startOf("month").toDate(),
  endDate: now.endOf("month").toDate(),
}));
</script>

<template>
  <div>
    <h4>本月收益来源</h4>
    <ui-empty v-if="data?.data.length === 0" />
    <template v-else>
      <div v-for="item in data?.data" :key="item.type" 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">
              {{ item.type }}
            </div>
          </div>
          <div class="text-base font-semibold">
            {{ formatAmountWithSplit(item.amount) }}
          </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">
              {{ item.count }}项
            </div>
          </div>
          <div class="text-xs text-text-200">
            {{ item.percentage }}%
          </div>
        </div>
      </div>
    </template>
  </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>
