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

const tradingViewInst = useTemplateRef<HTMLDivElement>("tradingViewInst");
const now = dayjs();

const { data } = await safeClient(client.api.earnings.trend.post({
  granularity: "month",
  startDate: now.subtract(7, "month").toDate(),
  endDate: now.toDate(),
}));

useTradingView(tradingViewInst, {
  type: "Area",
  data: computed(() => data.value?.data.map(item => ({
    time: dayjs(item.date).format("YYYY-MM-DD"),
    value: item.amount,
  })) || []),
  weightChartOptions: {
    height: 150,
    rightPriceScale: {
      visible: false,
    },
    leftPriceScale: {
      visible: false,
    },
  },
});
</script>

<template>
  <div>
    <h4>本月收益趋势</h4>
    <ui-empty v-if="!data || data.data.length === 0" class="mt-5" />
    <div v-else ref="tradingViewInst" />
  </div>
</template>

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