<template>
  <a-layout>
    <!-- 头部 -->
    <a-layout-header class="header">
      <div class="flex aic">
        <router-link to="/" class="flex aic">
          <img
            class="mr10 logo"
            :src="sysLogo ? api + sysLogo : require('@/assets/img/logo.png')"
          />
          <h1 class="title">
            {{ sysName ? sysName : systemName }}
          </h1>
        </router-link>
        <HeaderSite class="ml20"></HeaderSite>
      </div>
      <div>
        <a-space size="middle">
          <a v-permission="[1]" @click="visibleInit = true">
            <a-icon type="redo" />
            初始化区域数据
          </a>
          <a-tooltip class="header-item" title="返回门户" placement="bottom">
            <a :href="portalUrl + (path ? path : '')">
              <a-icon type="home" /> 返回门户
            </a>
          </a-tooltip>
        </a-space>
      </div>
    </a-layout-header>
    <a-layout>
      <!-- 边栏菜单 -->
      <a-layout-sider width="200" style="background: #fff">
        <i-menu theme="light" :options="menuData" class="menu" />
      </a-layout-sider>
      <a-layout class="main">
        <a-layout-content>
          <keep-alive>
            <!-- 需要缓存的视图组件 -->
            <router-view v-if="$route.meta.keepAlive"> </router-view>
          </keep-alive>
          <!-- 不需要缓存的视图组件 -->
          <router-view v-if="!$route.meta.keepAlive"> </router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
    <!-- 初始化区域数据弹窗 -->
    <InitArea :visibleInit.sync="visibleInit"></InitArea>
  </a-layout>
</template>

<script>
import { mapState } from "vuex";
import HeaderSite from "./header/HeaderSite.vue";
import InitArea from "@/components/initarea/InitArea.vue";
import IMenu from "@/components/menu/menu";
export default {
  components: {
    HeaderSite,
    InitArea,
    IMenu,
  },
  data() {
    return {
      systemName: process.env.VUE_APP_sysName,
      api: process.env.VUE_APP_API_IMG_URL,
      portalUrl: process.env.VUE_APP_API_portal_URL + "/#", // 门户地址
      visibleInit: false,
    };
  },
  computed: {
    ...mapState("site", ["sysName", "sysLogo", "path"]),
    ...mapState("setting", ["menuData"]),
  },
  created() {
    document.title = this.sysName ? this.sysName : this.systemName; // 设置项目标题
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.ant-layout-header {
  padding: 0px 24px;
  // background-color: #2681e8;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #1845c6 0%, #2999ff 100%);
  h1 {
    color: #fff;
    font-size: 16px;
    margin: 0px;
  }
  a {
    color: #fff;
  }
  .title {
    font-weight: bold;
    font-size: 18px;
    max-width: 200px;
    line-height: normal;
  }
}
.logo {
  height: 32px;
  object-fit: contain;
}
.main {
  height: calc(100vh - 64px);
  padding: 0px 24px 24px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    overflow-y: auto;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: rgba(144, 147, 153, 0.5);
  }

  &::-webkit-scrollbar-track {
    border-radius: 6px;
    background: rgba(144, 147, 153, 0);
  }
}
.ant-layout-content {
  height: 100%;
  margin-top: 24px;
  background: #fff;
  border-radius: 4px;
}
</style>
