<template>
  <div ref="chartElement" :class="['mtp-echarts', empty && 'is-empty']" :style="{ width: width, height: height }"></div>
</template>

<script lang="ts">
import { defineComponent, PropType, watch } from 'vue';
import { EChartsOption } from 'echarts';
import { useEcharts } from './setup';

export default defineComponent({
  props: {
    // 图表宽度
    width: {
      type: String,
      default: '100%',
    },
    // 图表高度
    height: {
      type: String,
      default: '100%',
    },
    // 图表配置项
    option: {
      type: Object as PropType<EChartsOption>,
      default: () => ({}),
    },
    index: {
      type: Number,
      default: 0,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    empty: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const { chartElement, setOptions, showLoading } = useEcharts();

    watch(() => props.loading, (val) => showLoading(val));
    watch(() => props.option, (val) => {
      if (!props.empty) {
        setOptions(val)
      }
    });

    return {
      chartElement,
    }
  }
})
</script>

<style lang="less">
@import './index.less';
</style>