<script setup name="secondView">
import { nextTick, ref, watch } from 'vue'
// import tagsView from '@/components/tagsView/index.vue'
import breadcrumb from '@/components/breadcrumb/index.vue'
import elAside from '@/components/elAside/index.vue'
import { useRoute } from 'vue-router'

const route = useRoute(),
  isCollapse = ref(false),
  collapseFn = (i) => {
    isCollapse.value = i
  },
  mainRef = ref()
watch(
  route,
  async (val) => {
    await nextTick()
    if (document.getElementsByClassName('el-main')?.[0]?.scrollTop) { document.getElementsByClassName('el-main')[0].scrollTop = 0 }
  },
  { immediate: true, deep: true }
)
</script>

<template>
  <el-container class="overflow-hidden">
    <el-aside
      class="aside"
      :width="isCollapse ? '64px' : '200px'"
    >
      <elAside @collapse-fn="collapseFn" />
    </el-aside>
    <!--    <div class="leftBottomBg"></div>-->
    <p class="absolute bottom-[0] left-[0] w-full">
      <img src="@/assets/images/homeBottom.png" class="w-full" />
    </p>
    <el-container class="is-vertical relative overflow-x-auto">
      <breadcrumb />
      <!-- <tagsView /> -->
      <el-main ref="mainRef" class="main">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" v-if="$route.meta.keepAlive" />
          </keep-alive>
          <component :is="Component" v-if="!$route.meta.keepAlive" />
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style lang="less" scoped>
.aside {
  display: flex;
  flex-flow: column;
  position: relative;
  background-color: #fff;
  box-shadow: 0px 3px 6px 0px rgba(62,99,170,0.06);
  z-index: 2;
  // 侧边栏折叠动画速度
  transition: width 0.4s;
  -webkit-transition: width 0.4s;
  -moz-transition: width 0.4s;
  -webkit-transition: width 0.4s;
  -o-transition: width 0.4s;
}
.leftBottomBg{
  position: absolute;
  width: 300px;
  height: 300px;
  background: url(../../assets/images/leftBottomPic.png) no-repeat;
  bottom: 0;
}
.main{
  z-index: 100;
  padding-top: 10px;
  min-width: 800px;
}
</style>
