<template>
  <div class="w-test">
    <div>
      <div>
        <div class="w-flex">
          <w-theme>
            <template #default="{ isDark }">
              <el-switch
                :model-value="isDark"
                active-text="暗黑"
                inactive-text="明亮"
              />
            </template>
          </w-theme>
        </div>
        <router-link to="/">系统首页</router-link>
        <router-link
          v-for="(path, index) in list"
          :to="'./' + path"
          :key="index"
          >{{ path }}</router-link
        >
      </div>
    </div>
    <div>
      <div>
        <router-view />
      </div>
    </div>
  </div>
</template>
<script setup>
const list = ref([]);
let files = import.meta.glob("./test/*.vue");

for (let fileName in files) {
  let moduleName = fileName.replace(/^.*\/(\w+)\.vue$/, "$1");
  if (moduleName == "index") {
    continue;
  }
  list.value.push(moduleName);
}
list.value.sort((a, b) => a.localeCompare(b));
list.value.unshift("index");
</script>
<style lang="scss" scoped>
.w-test {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 2rem;

  & > div {
    position: relative;

    & > div {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    &:last-child > div {
      overflow: auto;
    }
    &:first-child {
      background-image: linear-gradient(
        to right,
        var(--w-bg) 70%,
        var(--w-bg-dark)
      );
      & > div {
        padding: 1rem 0;

        & > a {
          display: flex;
          font-size: 0.9rem;
          position: relative;
          height: 2rem;
          text-decoration: none;
          align-items: center;
          justify-content: center;
          transition: all 0.5s;
          margin: 0.3rem 0;
          color: var(--el-color-primary-dark-2);
          border: solid 0.1rem #0000;

          &:not(.router-link-exact-active):hover {
            background-color: var(--w-bg-light);
            color: var(--w-primary-dark-3);
            border: solid 0.1rem var(--w-primary-dark-3);
            transform: scale(0.95);
          }
          &::after {
            content: "";
            position: absolute;
            box-sizing: border-box;
            right: 0rem;
            width: 1rem;
            height: 2rem;
            border: solid 1rem #0000;
            border-right-width: 0;
            border-left-color: var(--c, #0000);
            transition: all 0.5s;
          }

          &.router-link-exact-active {
            --c: var(--w-primary-dark-2);
            background-color: var(--c);
            color: #fff;
            transform: scale(1.05);
            &:hover {
              --c: var(--w-primary-dark-3);
            }
            &::after {
              right: -1rem;
            }
          }
        }
      }
    }
  }
}
</style>