<template>
  <el-card class="box-card">
    <el-empty description="暂无数据" v-if="noData"></el-empty>
    <div id="realtimeContainer"></div>
  </el-card>
</template>

<script setup>
import { onMounted, ref, defineExpose } from 'vue';
import { Line } from '@antv/g2plot';

const show = ref(false);
const noData = ref(true);
let bar = null;

// 设置图表
onMounted(() => {
  show.value = true;
  noData.value = false;
});

// 设置图表
const setDate = data => {
  noData.value = false;
  if (bar) {
    bar.destroy();
  }
  bar = new Line('realtimeContainer', {
    data,
    padding: 'auto',
    xField: 'time',
    yField: 'value',
    seriesField: 'category',
    slider: {
      start: 0.1,
      end: 0.2,
    },
    height: 700,
    // smooth: true,
    point: {
      size: 2,
      shape: 'circular',
      style: {
        fill: 'white',
        lineWidth: 2,
      },
    },
  });

  bar.render();
};

// 处理数据
const changeDate = value => {
  if (!value.length) return;
  const arr = [];
  value.forEach(element => {
    const item = { ...element };

    const so2Item = { category: 'SO2' };
    const saltItem = { category: '盐分' };
    const environmentTemperatureItem = { category: '环温' };
    const environmentHumidityItem = { category: '环湿' };
    const deviceTemperatureItem = { category: '机温' };
    const deviceHumidityItem = { category: '机湿' };
    const corrosion1Item = { category: '腐流1' };
    const corrosion2Item = { category: '腐流2' };
    const corrosion3Item = { category: '腐流3' };
    const corrosion4Item = { category: '腐流4' };

    so2Item.time = item.time;
    so2Item.value = item.so2;
    arr.push(so2Item);

    saltItem.time = item.time;
    saltItem.value = item.salt;
    arr.push(saltItem);

    environmentTemperatureItem.time = item.time;
    environmentTemperatureItem.value = item.environmentTemperature;
    arr.push(environmentTemperatureItem);

    environmentHumidityItem.time = item.time;
    environmentHumidityItem.value = item.environmentHumidity;
    arr.push(environmentHumidityItem);

    deviceTemperatureItem.time = item.time;
    deviceTemperatureItem.value = item.deviceTemperature;
    arr.push(deviceTemperatureItem);

    deviceHumidityItem.time = item.time;
    deviceHumidityItem.value = item.deviceHumidity;
    arr.push(deviceHumidityItem);

    corrosion1Item.time = item.time;
    corrosion1Item.value = item.corrosion1;
    arr.push(corrosion1Item);

    corrosion2Item.time = item.time;
    corrosion2Item.value = item.corrosion2;
    arr.push(corrosion2Item);

    corrosion3Item.time = item.time;
    corrosion3Item.value = item.corrosion3;
    arr.push(corrosion3Item);

    corrosion4Item.time = item.time;
    corrosion4Item.value = item.corrosion4;
    arr.push(corrosion4Item);
  });
  setDate(arr);
};

defineExpose({ changeDate });
</script>
