<template>
  <div>
    <api-tittle-1>页面布局：</api-tittle-1>
    <api-content>
      该布局组件为element自带布局组件的增强版本。所有页面的基础布局需要使用该布局方式。
    </api-content>
    <api-tittle-2>一、通用布局容器</api-tittle-2>
    <api-tittle-2>1.1 外层容器 &lt;ap-container&gt;</api-tittle-2>
    <api-content>
      当子元素中包含 &lt;ap-header&gt; 或 &lt;ap-footer&gt; 时，全部子元素会垂直上下排列，否则会水平左右排列。
    </api-content>
    <api-tittle-2>1.2 顶栏容器 &lt;ap-header&gt;</api-tittle-2>
    <api-content>
      高度默认auto，可自定义高度：
      <api-code>&lt;ap-header height="400px"/&gt;</api-code>
      <api-code>&lt;ap-header height="50%"/&gt;</api-code>
      1.2.1 顶栏表单式样：覆盖表单默认式样
      <api-code>&lt;ap-header&gt;<br>
        &lt;el-form class="layout-header-form"&gt;<br>
        &lt;el-form-item class="layout-header-form-item"&gt;&lt;el-form-item&gt;<br>
        &lt;el-form&gt;<br>
        &lt;ap-header&gt;
      </api-code>
    </api-content>
    <api-tittle-2>1.3 侧边容器 &lt;ap-aside&gt;</api-tittle-2>
    <api-content>
      宽度默认300px，可自定义高度：
      <api-code>&lt;ap-aside width="500px"/&gt; <br>&lt;ap-aside width="50%"/&gt;</api-code>
      注：&lt;ap-aside&gt;子元素默认使用flex布局、垂直排列。<br>
      1.3.1 侧边容器常用布局方式<br>
      <api-code>
        &lt;ap-aside&gt;<br>
        &lt;div class="layout-aside-header"&gt;<br>
        &lt;div class="layout-aside-header-title"&gt; 标题 &lt;/div&gt;<br>
        &lt;div class="layout-aside-header-icon"&gt; icon图表&lt;/div&gt;<br>
        &lt;/div&gt;<br>
        &lt;div class="layout-aside-content"&gt;主要内容&lt;/div&gt;<br>
        &lt;/ap-aside&gt;</api-code>
    </api-content>
    <api-tittle-2>1.4 主要区域容器 &lt;ap-main&gt;</api-tittle-2>
    <api-content>
      主要区域容器
    </api-content>
    <api-tittle-2>1.5 底栏容器 &lt;ap-footer&gt;</api-tittle-2>
    <api-content>
      高度默认60px，可自定义高度：
      <api-code>&lt;ap-footer height="400px"/&gt;</api-code>
      <api-code>&lt;ap-footer height="50%"/&gt;</api-code>
    </api-content>
    <api-content>
      <br>
      <b>注意：</b>
      <br>1. 以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。
      <br>2. &lt;ap-container&gt; 的子元素只能是后四者，后四者的父元素也只能是 &lt;ap-container&gt;
      <br>3. 除了&lt;ap-container&gt; ，其他四个均支持margin参数。参数固定四位，每一位表示是否有margin。
      <br>如：<span class="api-code">margin="0111"</span>从左到右，分别表示：margin-top:0px、margin-right:10px、margin-bottom:10px、margin-left:10px
    </api-content>

    <api-tittle-2>二、常用布局</api-tittle-2>
    <api-tittle-2>2.1 单个布局</api-tittle-2>
    <div class="layout-ctn">
      <div class="layout-box" style="width: 100%;height: 100%;">
        页面内容
      </div>
    </div>
    <api-content>
      <api-code>{{ js1 }}</api-code>
    </api-content>
    <api-tittle-2>2.2 上下布局</api-tittle-2>
    <div class="layout-ctn">
      <div class="layout-box" style="width: 100%;height: 30px;">
        header内容
      </div>
      <div class="layout-box" style="width: 100%;height: 65px;margin-top: 5px">
        main内容
      </div>
    </div>
    <api-content>
      <api-code>{{ js2 }}</api-code>
    </api-content>
    <api-tittle-2>2.3 左右布局:</api-tittle-2>
    <div class="layout-ctn">
      <div class="layout-box" style="width: 50px;height: 100%;float: left">
        左侧内容
      </div>
      <div class="layout-box" style="width: 145px;height: 100%;margin-left: 5px">
        main内容
      </div>
    </div>
    <api-content>
      <api-code>{{ js3 }}</api-code>
    </api-content>
    <api-tittle-2>2.4 左右布局</api-tittle-2>
    <div class="layout-ctn">
      <div class="layout-box" style="width: 50px;height: 100%;float: left">
        左侧内容
      </div>
      <div class="layout-box" style="width: 145px;height: 25px;margin-left: 5px">
        header内容
      </div>
      <div class="layout-box" style="width: 145px;height: 70px;margin-left: 5px; margin-top: 5px">
        main内容
      </div>
    </div>
    <api-content>
      <api-code>{{ js4 }}</api-code>
    </api-content>

    <api-tittle-2>2.5 上下主从布局</api-tittle-2>
    <div class="layout-ctn">
      <div class="layout-box" style="width: 100%;height: 20px;">
        header内容
      </div>
      <div class="layout-box" style="width: 100%;height: 35px;margin-top: 5px">
        main：主内容
      </div>
      <div class="layout-box" style="width: 100%;height: 35px;margin-top: 5px">
        main：明细内容
      </div>
    </div>
    <api-content>
      <api-code>{{ js5 }}</api-code>
    </api-content>
    <api-tittle-2>2.6 左右主从布局</api-tittle-2>
    <div class="layout-ctn">
      <div class="layout-box" style="width: 100%;height: 25px;">
        header内容
      </div>
      <div class="layout-box" style="width: 95px;height: 70px;float: left;margin-top: 5px;">
        main：主内容
      </div>
      <div class="layout-box" style="width: 100px;height: 70px;margin-left: 5px;margin-top: 5px;">
        main：明细内容
      </div>
    </div>
    <api-content>
      <api-code>{{ js6 }}</api-code>
    </api-content>
  </div>
</template>

<script>
import { ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2 } from './../components'

export default {
  name: 'ApiLayout',
  components: {
    ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
  },
  data() {
    const js1 = `<template>
    <ap-container>
        <ap-main margin="1111">
            main内容...
        </ap-main>
    </ap-container>
</template>`
    const js2 = `<template>
    <ap-container>
        <ap-header margin="1111">header内容</ap-header>
        <ap-main margin="0111">main内容</ap-main>
    </ap-container>
</template>`
    const js3 = `<template>
    <ap-container>
        <ap-aside margin="1111">左侧内容...</ap-aside>
        <ap-main margin="1110">main内容...</ap-main>
    </ap-container>
</template>`
    const js4 = `<template>
    <ap-container>
        <ap-aside margin="1111">左侧内容...</ap-aside>
        <ap-container>
            <ap-header margin="1110">header内容...</ap-header>
            <ap-main margin="0110">main内容...</ap-main>
        </ap-container>
    </ap-container>
</template>`
    const js5 = `<template>
    <ap-container>
        <ap-header margin="1111">header内容...</ap-header>
        <ap-container>
            <ap-header height="50%" margin="0111">主内容...</ap-header>
            <ap-main margin="0111">明细内容...</ap-main>
        </ap-container>
    </ap-container>
</template>
或：主内容和明细内容等分时
<template>
    <ap-container>
        <ap-header margin="1111">header内容...</ap-header>
        <ap-container>
            <ap-main margin="0111">主内容...</ap-main>
            <ap-main margin="0111">明细内容...</ap-main>
        </ap-container>
    </ap-container>
</template>`
    const js6 = `<template>
    <ap-container>
        <ap-header margin="1111">header内容...</ap-header>
        <ap-container>
            <ap-aside width="40%" margin="0111">主内容...</ap-aside>
            <ap-main margin="0110">明细内容...</ap-main>
        </ap-container>
    </ap-container>
</template>
或：主内容和明细内容等分时
<template>
    <ap-container>
        <ap-header margin="1111">header内容...</ap-header>
        <ap-container>
            <ap-main margin="0111">主内容...</ap-main>
            <ap-main margin="0110">明细内容...</ap-main>
        </ap-container>
    </ap-container>
</template>`

    return { js1, js2, js3, js4, js5, js6 }
  }
}
</script>

<style scoped>
    .layout-ctn {
        width: 212px;
        height: 112px;
        border: 1px dashed #9E9E9E;
        padding: 5px;
        background-color: #e2e7ef;
    }

    .layout-box {
        float: left;
        font-size: 12px;
        padding: 5px;
        background-color: white;
    }
</style>
