<template>
  <div class="x-system-page">
    <div v-if="title || $slots.title" class="x-system-page__title">
      <XIcon v-if="$system.collapsible && collapsible"
             @click="handleToggle"
             class="x-system-page__toggle"
             :name="toggleIcon"
             :size="20"></XIcon>
      <slot name="title">
        <h1>{{title}}</h1>
      </slot>
      <ElDivider direction="vertical"></ElDivider>
      <div class="x-system-page__action">
        <slot name="action"></slot>
      </div>
    </div>
    <div v-if="$system.breadcrumb && breadcrumb && breadcrumb.length>0" class="x-system-page__bread">
      <Breadcrumb separator="/">
        <BreadcrumbItem v-for="item in breadcrumb" :key="item.label" :to="item.path">{{item.label}}</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div v-if="$slots.filter || $slots.buttons" class="x-system-page__toolbar">
      <div v-if="$slots.filter" class="x-system-page__filter">
        <slot name="filter"></slot>
      </div>
      <div v-if="$slots.buttons" class="x-system-page__buttons">
        <slot name="buttons"></slot>
      </div>
    </div>
    <div class="x-system-page__content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
/**
 * 系统页面容器组件
 * @module XSystemPage
 */
import {
  Divider as ElDivider,
  Breadcrumb,
  BreadcrumbItem
} from 'element-ui';
import {XIcon} from '@newpearl/ui';

/**
 * 插槽
 * @member slots
 * @property {string} default 默认插槽，定义页面主体内容
 * @property {string} title 定义标题
 * @property {string} action 定义标题旁边的操作区内容
 * @property {string} filter 定义筛选条件区
 * @property {string} buttons 定义操作按钮区
 */

export default {
  name: 'XSystemPage',
  inheritAttrs: false,
  inject: ['$system'],
  components: {
    ElDivider,
    XIcon,
    Breadcrumb,
    BreadcrumbItem
  },
  /**
   * 属性参数
   * @member props
   * @property {boolean} [collapsible=true] 显示折叠按钮
   * @property {string} [title] 标题文本
   * @property {array} [breadcrumb] 面包屑导航数据 [{label,path}]
   */
  props: {
    collapsible: {
      type: Boolean,
      default: true
    },
    title: {
      type: String
    },
    breadcrumb: {
      type: Array
    }
  },
  computed: {
    toggleIcon() {
      return this.$system.asideCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold';
    }
  },
  methods: {
    handleToggle() {
      this.$system.asideCollapsed = !this.$system.asideCollapsed;
    }
  }
};
</script>
