<template>
  <el-dialog
    v-model="visible"
    :title="title"
    :width="width"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    top="10vh"
    append-to-body
    model-class="chart-modal"
  >
    <Chart
      :options="props.chartOptions"
      :height="props.chartHeight"
      :auto-resize="true"
    />

    <template #footer> </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import type { EChartsOption } from 'echarts';
  import useModal from '@/hooks/modal';
  import Chart from './index.vue';

  defineOptions({
    name: 'ChartModal',
  });

  /* modal */
  const { visible, open, close } = useModal();
  defineExpose({ open, close });

  interface Props {
    title?: string;
    chartOptions: EChartsOption;
    width?: string;
    chartHeight?: string;
    showFullscreenBtn?: boolean;
    showExportBtn?: boolean;
  }

  const props = withDefaults(defineProps<Props>(), {
    title: '图表详情',
    width: '80%',
    chartHeight: '500px',
    showFullscreenBtn: true,
    showExportBtn: true,
  });
</script>
