<template>
  <a-layout>
    <!-- 头部 -->
    <a-layout-header class="header">
      <div class="flex aic">
        <router-link to="/" class="flex aic">
          <img width="32" src="@/assets/img/logo.png" />
          <h1 style="padding-left: 10px">{{ 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 + '/#/home/siteArrange'">
              <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" style="padding: 0 24px 24px">
        <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 {
      portalUrl: process.env.VUE_APP_API_portal_URL, // 门户地址
      visibleInit: false,
    };
  },
  computed: {
    ...mapState("setting", ["systemName", "menuData"]),
  },
  created() {},
  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;
  h1 {
    color: #fff;
    font-size: 16px;
    margin: 0px;
  }
  a {
    color: #fff;
  }
}
.main {
  height: calc(100vh - 64px);
  overflow-y: auto;
}
.ant-layout-content {
  height: 100%;
  margin-top: 24px;
  background: #fff;
  border-radius: 4px;
}
</style>