<script setup>
const { $shortenCurrency } = useNuxtApp();
const revenueChartOptions = {
  chart: {
    type: "spline",
  },
  credits: {
    enabled: false,
  },
  title: {
    text: null,
  },
  xAxis: {
    categories: ["10/4", "11/4", "12/4", "13/4", "14/4", "15/4", "16/4", "17/4", "18/4"],
    accessibility: {
      description: "Dates",
    },
  },
  yAxis: {
    title: {
      text: "Doanh thu",
    },
    labels: {
      format: "{value}",
    },
  },
  tooltip: {
    crosshairs: true,
    shared: true,
    valueSuffix: " VNĐ",
  },
  plotOptions: {
    spline: {
      marker: {
        enabled: false,
      },
    },
  },
  series: [
    {
      name: "Doanh thu",
      data: [45000000, 52000000, 48000000, 51000000, 58000000, 61000000, 67500000, 72000000, 69000000],
      showInLegend: false,
    },
  ],
};
</script>
<template>
  <div class="card">
    <div class="card-content">
      <div class="is-flex is-justify-content-space-between mb-2">
        <p style="font-weight: 600; font-size: 18px">Doanh thu theo ngày</p>
        <div class="buttons">
          <button class="button is-primary fs-14">7 ngày</button>
          <button class="button is-white fs-14">30 ngày</button>
        </div>
      </div>
      <highcharts :options="revenueChartOptions" />
    </div>
  </div>
</template>
