<template>
  <div>
    <BasicModal
      destroyOnClose
      v-bind="$attrs"
      width="60rem"
      :height="heightNum"
      @register="register"
      title="报表趋势图"
      :showOkBtn="false"
    >
      <div class="wrapper">
        <div class="inner item" v-for="(item, index) in chartData" :key="index">
          <p style="display: none">{{ item }}</p>
          <div :id="`chart${index}`" :style="{ height, width }"></div>
        </div>
      </div>
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
  import { ref, PropType, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import * as echarts from 'echarts';

  defineProps({
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '400px',
    },
  });
  defineEmits(['register']);

  const heightNum = ref(800);
  const chartData = ref([1, 2, 3, 4]);
  const [register] = useModalInner((data) => {
    console.log(data);
    //TODO待服务端返回值
    nextTick(() => {
      chartData.value.forEach((_, index) => {
        let myChart = echarts.init(document.getElementById(`chart${index}`) as HTMLElement);
        let myOption = {
          title: {
            text: '报表趋势图',
            subtext: `图${index + 1}`,
            left: 'left',
          },
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: ['CO', 'CO2', 'Temp'],
            top: '20px',
          },
          toolbox: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7'],
            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],
            },
            {
              name: 'Temp',
              type: 'line',
              stack: 'Total',
              data: [15, 23, 22, 28, 15, 17, 20],
            },
          ],
        };
        myChart.setOption(myOption);
        //自适应
        window.addEventListener('resize', () => {
          myChart.resize();
        });
      });
    });
  });
</script>
<style lang="less" scoped>
  @import url('./ReportPreviewModal.less');
</style>