<template>
  <div>
    <router-view v-slot="{ Component }">
      <transition>
        <keep-alive v-if="route.meta.keepAlive">
          <component :is="Component" />
        </keep-alive>
        <component v-else :is="Component" />
      </transition>
    </router-view>
    <PopFrame v-if="!isHidden && !isApp"></PopFrame>
    <div
      v-if="isws != null"
      style="
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #ffffff;
        padding: 10px;
      "
    >
      <div>{{ isHidden ? "隐藏" : "显示" }} {{ isws }}</div>
      <div>{{ text[ws] }}</div>
    </div>
  </div>
</template>

<script type="ts" setup>
import { ref, computed, onBeforeMount, onMounted, onBeforeUnmount } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import PopFrame from '@/views/live/component/PopFrame.vue';

const store = useStore();
const route = useRoute();

const isHidden = ref(false);
const hiddenTimer = ref(null);

const handleVisibilityChange = () => {
  if (document.hidden) { // 文档变为隐藏时的处理逻辑
    // 隐藏超过一分钟 停止所有活动
    hiddenTimer.value = setTimeout(() => {
      isHidden.value = true;
      if (window.ws && window.ws.readyState == 1) {
        window.ws.send(JSON.stringify({ "id": window.paramListId, "type": "stop" }));
      } else if (window.ws) {
        window.ws.close();
      } else {
        window.heartCheck.reset();
      }
      store.commit('updateLiveTimerSwitch', false);
      // store.commit('updateDifferenceTimeSwitch', false);
      store.commit('updateHighLight', { score: {}, red: {}, yellow: {} });
      clearTimeout(hiddenTimer.value);
      hiddenTimer.value = null;
    }, 60000);
  } else { // 文档变为可见时的处理逻辑
    clearTimeout(hiddenTimer.value);
    hiddenTimer.value = null;
    if (isHidden.value) isHidden.value = false;
    if (!store.state.difference_time_switch) { // 获取服务器时间
      store.commit('updateDifferenceTimeSwitch', true);
      store.dispatch('asyncServerTime');
    }
    if (!store.state.live_timer_switch) { // 获取即时比分
      store.commit('updateLiveTimerSwitch', true);
      store.dispatch('asyncNmLiveMessage');
      store.dispatch('asyncHighLight');
    }
  }
};

const text = {
  0: '表示连接尚未建立，CONNECTING状态。',
  1: '表示连接已建立，可以进行通信，OPEN状态。',
  2: '表示连接正在进行关闭握手，CLOSING状态。',
  3: '表示连接已经关闭或者根本没有建立，CLOSED状态。'
};
const ws = ref(null);
const isws = ref(null);
const isApp = computed(() => {
  return store.state.common_data.isApp;
});

if (store.state.match_list_all_cache) {
  store.commit('updateMatchListAll', store.state.match_list_all_cache);
  store.commit('updateNmLiveMessage', store.state.nm_live_message_cache);
}

onBeforeMount(() => {
  // 获取即时比分
  store.commit('updateLiveTimerSwitch', true);
  store.dispatch('asyncNmLiveMessage');

  const timer = setTimeout(() => {
    // 获取common_data
    store.commit('get_common_data');
    // 获取服务器时间
    store.commit('updateDifferenceTimeSwitch', true);
    store.dispatch('asyncServerTime');
    // 获取用户信息
    store.dispatch('fetchUserInfo');
    clearTimeout(timer);
  }, 1)
});

onMounted(() => {
  document.addEventListener('visibilitychange', handleVisibilityChange);
  // 处理弹框数据
  store.dispatch('asyncHighLight');
  // app.vue初始化成功
  window.init = true;
});
onBeforeUnmount(async () => {
  clearTimeout(hiddenTimer.value);
  hiddenTimer.value = null;
  if (window.ws && window.ws.readyState == 1) {
    window.ws.send(JSON.stringify({ "id": window.paramListId, "type": "stop" }));
  } else if (window.ws) {
    window.ws.close();
  } else {
    window.heartCheck.reset();
  }
  store.commit('updateLiveTimerSwitch', false);
  store.commit('updateDifferenceTimeSwitch', false);
  store.commit('updateHighLight', { score: {}, red: {}, yellow: {} });
  document.removeEventListener('visibilitychange', handleVisibilityChange);
});
window.addEventListener('beforeunload', () => {
  store.commit('updateMatchListAllCache', store.state.match_list_all);
  store.commit('updateNmLiveMessageCache', store.state.nm_live_message);
  clearTimeout(hiddenTimer.value);
  hiddenTimer.value = null;
  if (window.ws && window.ws.readyState == 1) {
    window.ws.send(JSON.stringify({ "id": window.paramListId, "type": "stop" }));
  } else if (window.ws) {
    window.ws.close();
  } else {
    window.heartCheck.reset();
  }
  store.commit('updateLiveTimerSwitch', false);
  store.commit('updateDifferenceTimeSwitch', false);
  store.commit('updateHighLight', { score: {}, red: {}, yellow: {} });
  document.removeEventListener('visibilitychange', handleVisibilityChange);
});
</script>

<style lang="scss">
@use "@/common/style/common" as *;
.acce-render {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  /* Other transform properties here */
  opacity: 1;
}
</style>