<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      width="55rem"
      :height="heightNum"
      @register="register"
      title="报表趋势图"
      @cancel="handleCancel"
      :showOkBtn="false"
    >
      <div ref="chartRef" :style="{ height, width }"></div>
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
  import { ref, PropType, Ref, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useECharts } from '/@/hooks/web/useECharts';

  defineProps({
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: 'calc(100vh - 378px)',
    },
  });
  defineEmits(['register']);
  const heightNum = ref(800);
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  const [register] = useModalInner((data) => {
    console.log(data);
    nextTick(() => {
      setOptions({
        title: {
          text: '报表趋势图',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['CO', 'CO2'],
        },
        toolbox: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          boundaryGap: false,
        },
        yAxis: {
          type: 'value',
          boundaryGap: false,
        },
        series: [
          {
            name: 'CO',
            type: 'line',
            stack: 'Total',
            data: [150, 230, 224, 218, 135, 147, 260],
          },
          {
            name: 'CO2',
            type: 'line',
            stack: 'Total',
            data: [15, 23, 22, 28, 15, 17, 20],
          },
        ],
      });
    });
  });

  const handleCancel = () => {};
</script>
<style>
  .video-sty {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>