<template>
  <div id="app" class="flex flex-center flex-col">
    <el-main class="single">
      <div class="wrapper mt-20" v-if="$route.meta.layout === 'empty'">
        <tips />
      </div>
      <router-view v-slot="{ Component, route }">
        <keep-alive :include="keepAlive.list">
          <component :is="Component" :key="route.fullPath" />
        </keep-alive>
      </router-view>
    </el-main>
  </div>
</template>

<script>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup

import keepAliveStore from '@/store/keepAlive.js'
import top from '@/layout/top.vue'
import router from './router/index.js'
import tips from '@/layout/tips.vue'

export default {
  components: { tips, top },
  setup() {
    const keepAlive = keepAliveStore()
    return { keepAlive }
  },
  data() {
    return {
      data: '',
      type: '33'
    }
  },
  created() {
    console.info(
      '%c由%c梧桐研究院%c提供技术支持,版本号: v1.0.0',
      'font-size: 14px; margin-bottom: 2px; padding: 6px 8px; color: #fff; background: #707070;',
      'font-size: 14px; margin-bottom: 2px; padding: 6px 8px; color: #fff; background: orange;',
      'font-size: 14px; margin-bottom: 2px; padding: 6px 8px; color: #fff; background: #707070;'
    )
  },
  mounted() {
    window.addEventListener('scroll', this.menu)
  },
  methods: {
    router,
    menu() {
      const scroll =
        document.documentElement.scrollTop || document.body.scrollTop
      this.$bus.emit('scorll', scroll)
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  background-color: #f6f7f8;
  overflow: hidden;
  .single {
    height: 100%;
  }
}
:deep(.el-main) {
  --el-main-padding: 0 !important;
  padding: 0 !important;
}
:deep(.el-header) {
  padding: 0 !important;
}
</style>
