<template>
  <div class="box">
    <Chartline v-if="config.options.chartType === chartType.line" />
    <Pie v-if="config.options.chartType === chartType.pie" />
    <Radar v-if="config.options.chartType === chartType.radar" />
    <Gauge v-if="config.options.chartType === chartType.gauge" />
    <Funnel v-if="config.options.chartType === chartType.funnel" />
    <ChartBar v-if="config.options.chartType === chartType.barPercent" />
    <CategoryStack v-if="config.options.chartType === chartType.barStack" />
    <a-collapse v-model:activeKey="activeKey" ghost expandIconPosition="right">
      <a-collapse-panel key="1">
        <template #header><NodeHead nodeName="尺寸配置" /> </template>
        <a-form-item :label="t('组件宽度')">
          <a-input v-model:value="config.options.width" />
        </a-form-item>
        <a-form-item :label="t('组件高度')">
          <a-input v-model:value="config.options.height" />
        </a-form-item>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>
<script lang="ts" setup>
  import { inject, ref } from 'vue';
  import Chartline from './Chartline.vue';
  import Pie from './Pie.vue';
  import Radar from './Radar.vue';
  import Gauge from './Gauge.vue';
  import Funnel from './Funnel.vue';
  import ChartBar from './ChartBar.vue';
  import CategoryStack from './CategoryStack.vue';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import { chartType } from '../../../types';

  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();

  const activeKey = ref(['1']);
  const config = inject('selectWidget', ref<any>({}));
</script>
