<script setup lang="ts">
import { computed, defineAsyncComponent } from 'vue';
import type { EChartsOption } from 'echarts';

const VChart = defineAsyncComponent(() =>
  import('./echarts-setup').then((m) => m.VChart),
);

const props = withDefaults(
  defineProps<{
    title?: string;
    option: EChartsOption;
    height?: string;
  }>(),
  { title: '', height: '300px' },
);

const style = computed(() => ({ height: props.height, width: '100%' }));
</script>

<template>
  <div class="chart-panel">
    <div v-if="title" class="chart-title">{{ title }}</div>
    <Suspense>
      <VChart class="chart-canvas" :option="option" :style="style" autoresize />
    </Suspense>
  </div>
</template>

<style scoped>
.chart-panel {
  padding: 16px 18px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: #ffffff;
  height: 100%;
  box-sizing: border-box;
}
.chart-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.chart-canvas {
  min-height: 200px;
}
</style>
