<!-- vue 页面模板 -->
<template>
  <div class="layout">
    <Layout>
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo"></div>
          <div class="layout-nav">
            <MenuItem name="1">
              <Icon type="ios-navigate"></Icon>
              Item 1
            </MenuItem>
            <MenuItem name="2">
              <Icon type="ios-keypad"></Icon>
              Item 2
            </MenuItem>
            <MenuItem name="3">
              <Icon type="ios-analytics"></Icon>
              Item 3
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <Layout>
        <Sider hide-trigger :style="{ background: '#fff' }">
          <Menu
            :active-name="active_name"
            theme="primary"
            width="auto"
            :open-names="['home']"
            @on-select="changePage"
            accordion
          >
            <div v-for="(item, i) in menu_list" :key="i">
              <Submenu v-if="item.children" :name="item.name">
                <template #title>
                  <Icon :type="item.icon" />
                  {{ item.title }}
                </template>
                <MenuItem
                  v-for="v in item.children"
                  :key="v.name"
                  :name="v.name"
                >
                  {{ v.title }}
                </MenuItem>
              </Submenu>
              <MenuItem v-else :name="item.name">
                <Icon v-if="item.icon" :type="item.icon" />
                {{ item.title }}
              </MenuItem>
            </div>
          </Menu>
        </Sider>
        <Layout :style="{ padding: '24px' }">
          <Content
            :style="{
              padding: '24px',
              height: content_height + 'px',
              background: '#fff',
            }"
          >
            <router-view></router-view>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content_height: 0,
      active_name: '',
      menu_list: [
        {
          name: 'home',
          title: '人员管理',
          icon: 'ios-person',
          children: [
            {
              name: '/home/personnelMatters',
              title: '管理员',
            },
            {
              name: '/home/personnelMatters/user',
              title: '用户',
            },
          ],
        },
        {
          name: 'limitsAuthority',
          title: '权限配置',
          icon: 'ios-key',
          children: [
            {
              name: '/home/limitsAuthority/role',
              title: '角色管理',
            },
            {
              name: '/home/limitsAuthority/permission',
              title: '权限管理',
            },
          ],
        },
        {
          name: 'belong',
          title: '归属配置',
          icon: 'ios-locate',
          children: [
            {
              name: '/home/belong/organization',
              title: '机构管理',
            },
            {
              name: '/home/belong/area',
              title: '地域管理',
            },
          ],
        },
        {
          name: 'governmentAffairs',
          title: '政务库管理',
          icon: 'ios-cloud-download',
          children: [
            {
              name: '/home/governmentAffairs/administration',
              title: '行政领导配置',
            },
          ],
        },
        {
          name: '/home/administration',
          icon: 'ios-document',
          title: '稿件管理',
        },
        {
          name: '/home/medium',
          icon: 'ios-film',
          title: '媒体管理',
        },
        {
          name: '/home/broadcast',
          icon: 'ios-desktop',
          title: '电视广播管理',
        },
        {
          name: '/home/lifeService',
          icon: 'ios-hammer',
          title: '生活服务管理',
        },
      ],
    };
  },
  mounted() {
    // 计算内容区域高度
    this.content_height = document.documentElement.clientHeight - 120;
    this.active_name = this.$route.path;
  },
  methods: {
    changePage(p) {
      this.$router.replace(p);
    },
  },
};
</script>

<style lang="scss">
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  height: 100%;

  .layout-logo {
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
  }

  .layout-nav {
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
  }
}
</style>
