<script lang="ts" setup>
  import type { ECharts, EChartsOption } from 'echarts';
  import type { PropType } from 'vue';
  import { nextTick, onMounted, onUnmounted, ref, unref } from 'vue';
  import { init } from 'echarts';
  import { instrumentComponent1 } from './dashBoardComponent.config';
  import { dateUtil } from '/@/utils/dateUtil';

  const props = defineProps({
    add: {
      type: Function,
    },
    layout: {
      type: Object as PropType<Recordable>,
      default: () => ({}),
    },
    value: {
      type: Object as PropType<Recordable>,
      default: () => ({}),
    },
  });

  const getControlsWidgetId = () => `widget-chart-${props.value.id}`;

  const chartRef = ref<Nullable<ECharts>>(null);

  function initChart() {
    const chartDom = document.getElementById(getControlsWidgetId())!;
    chartRef.value = init(chartDom);
    const option: EChartsOption = props.layout || instrumentComponent1();

    nextTick(() => {
      option && unref(chartRef)?.setOption(option);
    });
  }

  function update() {
    unref(chartRef)?.resize();
  }

  onMounted(() => {
    initChart();
    props.add && props.add(props.value.id, update);
  });

  onUnmounted(() => {
    unref(chartRef)?.clear();
  });

  defineExpose({ update });
</script>

<template>
  <div class="flex flex-col w-full h-full min-w-3 min-h-3">
    <div :id="getControlsWidgetId()" class="widget-charts w-full h-full"></div>
    <div>{{}}</div>
    <div class="text-xs text-center text-gray-400">
      <span>更新时间:</span>
      <span>
        {{ props.value.updateTime || dateUtil().format('YYYY-MM-DD HH:mm:ss') }}
      </span>
    </div>
  </div>
</template>

<style scoped>
  .widget-charts > div {
    width: 100%;
    height: 100%;
  }
</style>