<script lang="ts" setup>
import { computed } from 'vue';
import VueApexCharts from 'vue3-apexcharts';

const props = withDefaults(
  defineProps<{
    series: { data: number[] }[];
    labels: string[];
  }>(),
  {
    series: () => [
      {
        data: [1, 2, 3, 4],
      },
    ],
    labels: () => ['1', '2', '3', '4'],
  },
);

const chartOptions = computed(() => ({
  chart: {
    type: 'bar',
    fontFamily: 'Noto Sans Thai',
  },
  plotOptions: {
    bar: {
      barHeight: '100%',
      distributed: true,
      horizontal: true,
      borderRadius: 6,
      borderRadiusApplication: 'end',
      dataLabels: {
        position: 'bottom',
      },
    },
  },
  colors: ['#f59f00', '#035aa1', '#0ca678', '#c92a2a'],
  dataLabels: {
    enabled: false,
    textAnchor: 'start',
    style: {
      colors: ['#fff'],
    },
    formatter: function (
      val: string,
      opt: {
        w: { globals: { labels: { [x: string]: string } } };
        dataPointIndex: string | number;
      },
    ) {
      return opt.w.globals.labels[opt.dataPointIndex] + ': ' + val;
    },
    offsetX: 0,
    dropShadow: {
      enabled: true,
    },
  },
  stroke: {
    width: 1,
    colors: ['#fff'],
  },
  xaxis: {
    categories: props.labels,
  },
  yaxis: {
    labels: {
      show: false,
    },
  },
  legend: {
    show: false,
  },
  tooltip: {
    theme: 'dark',
    x: {
      show: false,
    },
    y: {
      title: {
        formatter: function (
          val: string,
          opt: {
            w: { globals: { labels: { [x: string]: string } } };
            dataPointIndex: string | number;
          },
        ) {
          return opt.w.globals.labels[opt.dataPointIndex] + ':';
        },
      },
    },
  },
}));
</script>
<template>
  <div class="surface-1 rounded bordered q-pa-md">
    {{ $t('dashboard.quotation.title') }}
    <div class="text-caption app-text-muted">
      {{ $t('dashboard.quotation.caption') }}
    </div>
    <VueApexCharts
      type="bar"
      height="200"
      :options="chartOptions"
      :series="series"
    ></VueApexCharts>
  </div>
</template>
