<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 initChartData" :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';
  import { exportViewChartApi } from '/@/api/export/exportManager';
  import moment from 'moment';

  defineProps({
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '400px',
    },
  });
  defineEmits(['register']);
  const heightNum = ref(800);
  const getItem: any = ref([]);
  const initChartData: any = ref([]);
  //生成随机颜色
  let getRandomColor = function () {
    return (
      'rgb(' +
      Math.round(Math.random() * 255) +
      ',' +
      Math.round(Math.random() * 255) +
      ',' +
      Math.round(Math.random() * 10) +
      ')'
    );
  };
  const [register, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({ loading: true });
    try {
      const entityId = data.record.executeCondition?.executeAttributes.map((m) => m?.device);
      let key = data.record.executeCondition?.executeAttributes.map((m) => m?.attributes);
      let params: any = {};
      params = {
        ...data.record.executeCondition?.executeCondition,
        ...{
          keys: key.length !== 0 ? key.join(',') : '',
        },
      };
      const result = await exportViewChartApi(entityId[0], params);
      getItem.value = Object.entries(result).map((item) => {
        const [attr, val] = item;
        return { attr, val };
      });
      //服务端返回值
      initChartData.value = getItem.value.map((item): any => {
        const seriesData = item.val.map((m1) => Number(m1.value));
        return {
          attr: item.attr,
          lengendData: [item.attr],
          xAxisData: item.val.map((m) => moment(m.ts).format('YYYY-MM-DD HH:mm:ss')),
          seriesData: [
            {
              name: item.attr,
              type: 'line',
              data: seriesData,
              lineStyle: {
                color: getRandomColor(),
              },
            },
          ],
        };
      });
      nextTick(() => {
        initChartData.value.forEach((item, index) => {
          let myChart = echarts.init(document.getElementById(`chart${index}`) as HTMLElement);
          let myOption = {
            title: {
              text: `${item.attr}趋势图`,
              subtext: `${item.attr}`,
              left: 'left',
            },
            tooltip: {
              trigger: 'axis',
            },
            legend: {
              data: item.lengendData,
              top: '20px',
            },
            toolbox: {},
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true,
            },
            dataZoom: [
              {
                type: 'slider',
                show: true,
                start: 0,
                end: 30,
                xAxisIndex: [0],
              },
            ],
            xAxis: {
              type: 'category',
              data: item.xAxisData,
              boundaryGap: false,
              axisPointer: { type: 'shadow' },
              axisLabel: {
                color: '#333',
                interval: 0,
                rotate: 90,
              },
            },
            yAxis: {
              type: 'value',
              boundaryGap: false,
            },
            series: item.seriesData,
          };
          myChart.setOption(myOption);
          //自适应
          window.addEventListener('resize', () => {
            myChart.resize();
          });
        });
      });
    } finally {
      setModalProps({ loading: false });
    }
  });
</script>
<style lang="less" scoped>
  @import url('./ReportPreviewModal.less');
</style>