<template>
  <el-row :gutter="12" style="padding: 12px; row-gap: 12px;">
    <el-col :xs="24" :sm="10" :md="8" :lg="6" :xl="5">
      <userInfo />
    </el-col>
    <el-col :xs="24" :sm="24" :md="16" :lg="10" :xl="10">
      <custom-panel :title="t('home.visitorsTrend')" @refresh="handlePanelRefresh('visitorTrend')">
        <visitor-trend ref="visitorTrendRef" />
      </custom-panel>
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="9">
      <custom-panel :title="t('home.referenceDomain')" @refresh="handlePanelRefresh('trafficSources')">
        <traffic-sources ref="trafficSourcesRef" />
      </custom-panel>
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
      <custom-panel :title="t('home.visitorsMap')">
        <visitor-map />
      </custom-panel>
    </el-col>
    <el-col :xs="24" :sm="10" :md="10" :lg="6" :xl="6">
      <custom-panel :title="t('home.visitorsOverview')">
        <visitor-overview />
      </custom-panel>
    </el-col>
    <el-col :xs="24" :sm="14" :md="14" :lg="8" :xl="8">
      <custom-panel :title="t('home.keywordsFrequency')">
        <keyword-frequency />
      </custom-panel>
    </el-col>
  </el-row>
</template>

<script setup lang="ts" name="home">
import { defineAsyncComponent } from 'vue';
import { debounce } from 'lodash';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const customPanel = defineAsyncComponent(() => import('./echarts/custom-panel.vue'));
const userInfo = defineAsyncComponent(() => import('./user-info.vue'));
const keywordFrequency = defineAsyncComponent(() => import('./echarts/keyword-frequency.vue'));
const visitorTrend = defineAsyncComponent(() => import('./echarts/visitor-trend.vue'));
const trafficSources = defineAsyncComponent(() => import('./echarts/traffic-sources.vue'));
const VisitorOverview = defineAsyncComponent(() => import('./echarts/visitor-overview.vue'));


const visitorTrendRef = ref(null);
const trafficSourcesRef = ref(null);

const handlePanelRefresh = (value: string) => {
  if (value == 'visitorTrend' && visitorTrendRef.value) {
    visitorTrendRef.value.initChart();
  }else if (value == 'trafficSources' && trafficSourcesRef.value) {
    trafficSourcesRef.value.initChart();
  }
};

const resize = debounce(() => {
  if (visitorTrendRef.value) {
    visitorTrendRef.value.handleResize();
  }
  if (trafficSourcesRef.value) {
    trafficSourcesRef.value.handleResize();
  }
}, 200); // 200ms防抖间隔

onMounted(() => {
  window.addEventListener('resize', resize);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', resize);
})

onActivated(() => {
  window.addEventListener('resize', resize);
})

onDeactivated(() => {
  window.removeEventListener('resize', resize);
})
const visitorMap = defineAsyncComponent(() => import('./echarts/visitor-map.vue'));
</script>