<template>
  <ElContainer class="x-system" :class="classes" direction="vertical">
    <ElHeader v-if="header" height="50px">
      <SystemHeader>
        <slot name="logo" slot="logo"></slot>
        <slot name="info" slot="info"></slot>
      </SystemHeader>
    </ElHeader>
    <ElContainer direction="horizontal">
      <transition name="x-system-slide">
        <Sidebar v-if="aside" v-show="!asideCollapsed" :data="menus" v-bind="menuOptions">
          <slot name="logo" slot="logo"></slot>
        </Sidebar>
      </transition>
      <ElMain class="x-system__main">
        <slot></slot>
      </ElMain>
    </ElContainer>
  </ElContainer>
</template>

<script>
/**
 * 后台管理系统框架
 * @module XSystem
 */
import SystemHeader from './components/Header';
import Sidebar from './components/Sidebar';
import {
  Container as ElContainer,
  Header as ElHeader,
  Main as ElMain
} from 'element-ui';

/**
 * 插槽
 * @member slots
 * @property {string} default 默认插槽，定义主体内容，通常放 router-view
 * @property {string} logo 定义系统logo和名称
 * @property {string} info 定义头部信息，如用户头像、名称、退出登录等
 */
export default {
  name: 'XSystem',
  inheritAttrs: false,
  provide() {
    return {
      $system: this
    };
  },
  components: {
    Sidebar,
    SystemHeader,
    ElContainer,
    ElHeader,
    ElMain
  },
  /**
   * 属性参数
   * @member props
   * @property {boolean} [aside=true] 显示侧边栏
   * @property {boolean} [header=false] 显示头部
   * @property {Array} [menus] 菜单数据数组，字段包括 text / index / icon / children 等, 参考XMenu组件的data参数
   * @property {object} [menuProps] 菜单组件参数，参考XMenu组件
   * @property {string} [title] 系统名称
   * @property {string|object} [logo] 系统logo配置
   * @property {boolean} [asideHeader=true] 显示侧边栏的头部
   * @property {string} [asideWidth=220px] 侧边栏的宽度
   * @property {boolean} [fixed=true] 固定侧边栏和头部
   * @property {boolean} [breadcrumb=false] 显示面包屑导航
   * @property {boolean} [collapsible=true] 侧边栏可以折叠收起
   */
  props: {
    aside: {
      type: Boolean,
      default: true
    },
    header: {
      type: Boolean,
      default: false
    },
    menus: {
      type: Array
    },
    menuProps: {
      type: Object
    },
    title: {
      type: String,
      default: '系统名称'
    },
    logo: {
      type: [String, Object],
      default: 'el-icon-eleme'
    },
    asideHeader: {
      type: Boolean,
      default: true
    },
    asideWidth: {
      type: String,
      default: '220px'
    },
    fixed: {
      type: Boolean,
      default: true
    },
    breadcrumb: {
      type: Boolean,
      default: false
    },
    collapsible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      asideCollapsed: false
    };
  },
  computed: {
    classes() {
      return {
        'is-fixed': this.fixed
      };
    },
    menuOptions() {
      return {
        theme: 'dark',
        router: true,
        ...this.menuProps
      };
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(val) {
        const title = val.meta.title || this.title;
        if (title) {
          document.title = title;
        }
      }
    }
  }
};
</script>
