<template>
  <div class="box">
    <NodeHead :nodeName="config.label" class="ml-4 h-10" />
    <div :style="{ width: config.width, height: config.height }">
      <MixLineBar
        :compkey="compkey"
        :refreshkey="refreshkey"
        v-if="config.chartType === chartType.line"
        :config="config"
      />
      <ChartBar
        :refreshkey="refreshkey"
        v-else-if="config.chartType === chartType.barPercent"
        :config="config"
      />
      <Chart :refreshkey="refreshkey" v-else-if="config.chartType" :config="config" />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { chartType } from '../../types';
  import Chart from './chartComponent/Chart.vue';
  import MixLineBar from './chartComponent/MixLineBar.vue';
  import ChartBar from './chartComponent/ChartBar.vue';
  import { NodeHead } from '/@/components/ModalPanel/index';

  defineProps({
    config: {
      type: Object,
      default: () => {},
    },
    refreshkey: String,
    compkey: String,
  });
</script>
<style lang="less" scoped>
  .box {
    width: 100%;
    height: 100%;
  }
</style>
