<template>
  <a-layout class="layout">
    <a-layout-sider v-model:collapsed="collapsed" collapsible class="left-menu">
      <div class="logo">{{ collapsed ? "系统" : "自动化系统监控" }}</div>
      <a-menu theme="dark" v-model:selectedKeys="selectedKeys" mode="inline" @click="goTopage">
        <a-menu-item key="monit">
          <pie-chart-outlined/>
          <span>{{ collapsed ? "监控" : "系统监控" }}</span>
        </a-menu-item>
        <a-sub-menu>
          <template #title>
            <span>
              <user-outlined/>
              <span>用户</span>
            </span>
          </template>
          <a-menu-item key="user">用户列表</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0" class="headers">
        <a-dropdown style="margin-right: 20px" class="down">
          <a class="ant-dropdown-link" @click.prevent>
            {{ username }}
            <DownOutlined/>
          </a>`
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <a href="javascript:" @click="logout">注销</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-layout-header>
      <a-layout-content style="margin: 0 16px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item v-if="route.meta.module">{{ route.meta.module }}</a-breadcrumb-item>
          <a-breadcrumb-item>{{ route.meta.title }}</a-breadcrumb-item>
        </a-breadcrumb>
        <div :style="container">

          <router-view></router-view>
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        自动化研发 ©2022 研发部
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
import {
  PieChartOutlined,
  DesktopOutlined,
  UserOutlined,
  TeamOutlined,
  FileOutlined,
  DownOutlined,
} from '@ant-design/icons-vue';
import {useRouter, useRoute} from "vue-router";
import {defineComponent, ref} from 'vue';
import {useStore} from "@/store";
import {storeToRefs} from "pinia";

export default defineComponent({
  name: "layout",
  components: {
    PieChartOutlined,
    DesktopOutlined,
    UserOutlined,
    TeamOutlined,
    FileOutlined,
    DownOutlined,
  },

  setup() {
    const collapsed = ref(false)
    const selectedKeys = ref(['1'])
    const {username} = storeToRefs(useStore())
    let container = {
      padding: '24px', background: '#fff', minHeight: '100%'
    }
    const router = useRouter()
    const route = useRoute()
    const goTopage = (item) => {
      router.push('/' + item.key).catch((err) => err)
    }
    const logout = () => {
      //清除cookie
      window.sessionStorage.clear()
      router.push("/login")
    }
    return {
      collapsed,
      selectedKeys,
      container,
      goTopage,
      route,
      logout,
      username,
    };
  },
});
</script>
<style>
.layout .logo {
  height: 32px;
  margin: 16px;
  line-height: 32px;
  color: #fff;
  text-align: center;
  letter-spacing: 2px;
  font-size: 17px;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.3);
}

.layout {
  height: 100vh;
}

.left-menu {
  overflow-y: scroll;
  height: 100vh;


}

.site-layout .site-layout-background {
  background: #fff;
}

[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}

.headers {
  display: flex;
  justify-content: right;
}

.down {
  margin-right: 45px;
  font-size: 15px;
  font-weight: bolder;
}

/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 8px;
  height: 16px;
  background-color: rgba(0, 9, 38, 0.69);
}

/*定义滚动条轨道内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: rgba(17, 16, 16, 1);
}

/*定义滑块内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #42EBFF;
}
</style>