<template>
  <DataSearchBar @getDate="getDate" />
  <RealtimeData ref="childRef" class="mt-4" />
</template>

<script setup>
import DataSearchBar from 'components/data-search-bar.vue';
import RealtimeData from 'components/realtime-data.vue';
import { computed, ref } from 'vue';
import { useStore } from 'vuex';

const childRef = ref(null);

let timer = null;
const store = useStore();
const token = computed(() => store.getters['user/token']);
const realtimeData = computed(() => store.state.statistics.realtimeData);

// 实时数据统计
const getDate = async options => {
  if (token) {
    const params = {
      deviceId: options && options.deviceId ? options.deviceId : '', // 站点 设备id
      date: options && options.date && options.date.length ? options.date : [], // 年月时间段
      sort: 1, // 1 -> 按时间正序 -1->按时间倒序
      page: 1, // 第几页
      size: 10, // 每页多少条
    };
    await store.dispatch('statistics/getRealtimeData', params);
    timer && clearTimeout(timer);
    timer = null;
    childRef.value.changeDate(realtimeData.value);
  } else {
    timer = setTimeout(() => {
      getDate();
    });
  }
};

getDate();
</script>
