<template>
  <div id="liveBox">
    <Header :fitterTimeFixture="fixtureTime" :fitterTimeResult="resultTime"></Header>
    <router-view v-slot="{ Component }">
      <transition name="slideInRight">
        <keep-alive v-if="route.meta.keepAlive" :key="route.meta.name as string">
          <component :is="Component" :fitterIndex="fitterIndex" :fitterTimeFixture="fixtureTime" :fitterTimeResult="resultTime"
            :attentionIndex="attentionIndex" />
        </keep-alive>
        <component v-else :is="Component" :fitterIndex="fitterIndex" :fitterTimeFixture="fixtureTime" :fitterTimeResult="resultTime"
          :attentionIndex="attentionIndex" />
      </transition>
    </router-view>
    <BackTop></BackTop>
  </div>
</template>

<script lang="ts" setup>
import { BackTop } from 'vant';
import { ref, watch, onActivated } from 'vue';
import { useRoute } from 'vue-router';
import { events } from '@/until/eventBus';
import Header from '@/views/live/component/Header.vue';

const route = useRoute();
const bus: any = events;

// 赛事类型
const fitterIndex: any = ref(4);
bus.on('changeFitterIndex', (data: any) => {
  window.scrollTo({ top: 0 });
  fitterIndex.value = data.value;
});

// 赛事时间
const fixtureTime: any = ref({});
const resultTime: any = ref({});
bus.on('changeFitterTime', (obj: any) => {
  if (obj.type) resultTime.value = obj.date;
  else fixtureTime.value = obj.date;
});

// 关注
const attentionIndex = ref(4);
bus.on('changeAttentionIndex', (value: any) => {
  attentionIndex.value = value;
});

watch(() => route.path, () => {
  if (route.path.indexOf('live_') !== -1 && route?.meta?.title) {
    (window as any).document.title = route.meta.title;
  }
});

onActivated(() => {
  (window as any).document.title = route.meta.title;
});
</script>

<style lang="scss" scoped>
* {
  text-align: center;
}
</style>
<style lang="scss">
#liveBox {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f8f6f6;
}

.van-back-top {
  background: linear-gradient(to right, #ff6034, #ee0a24);
}

.slideInRight-enter-active {
  animation: slideInRight 0.3s;
}

.slideInRight-leave-active {
  animation: slideOutRight 0s;
}
</style>