<template>
  <div>
    <section class="demo-section">
      <h4>基本用法</h4>
      <div style="height: 600px">
        <xLayout>
          <xSider :width="collapsed ? 64 : 216">
            <xLayout>
              <xContent>
                <xMenu v-model="value" :collapsed="collapsed" @on-change="onChange">
                  <xMenuItemGroup label="看板">
                    <xSubMenu :value="10" icon="ans-icon-search" label="数据看板">
                      <xMenuItem :value="1" icon="ans-icon-calendar" label="我是菜单1"></xMenuItem>
                      <xMenuItem :value="2" icon="ans-icon-calendar" label="我是菜单1"></xMenuItem>
                      <xMenuItem :value="3" icon="ans-icon-calendar" label="我是菜单1"></xMenuItem>

                      <xSubMenu :value="101" icon="ans-icon-search" label="数据看板2">
                        <xMenuItem :value="11" icon="ans-icon-calendar" label="我是菜单1"></xMenuItem>
                        <xMenuItem :value="21" icon="ans-icon-calendar" label="我是菜单1"></xMenuItem>
                        <xMenuItem :value="31" icon="ans-icon-calendar" label="我是菜单1"></xMenuItem>

                        <xSubMenu icon="ans-icon-search" :open="map[1]" open-icon="ans-icon-calendar" label="数据看板3" @on-open="open(1)">
                          <xMenuItem :value="123" icon="ans-icon-calendar" label="我是菜单1"></xMenuItem>
                          <xMenuItem :value="214" icon="ans-icon-calendar" label="我是菜单1"></xMenuItem>
                          <xMenuItem :value="3132" icon="ans-icon-calendar" label="我是菜单1"></xMenuItem>
                        </xSubMenu>
                        <xSubMenu icon="ans-icon-search" :open="map[2]" open-icon="ans-icon-calendar" label="数据看板4" @on-open="open(2)">
                          <xMenuItem :value="1231" icon="ans-icon-calendar" label="我是菜单1"></xMenuItem>
                          <xMenuItem :value="2142" icon="ans-icon-calendar" label="我是菜单1"></xMenuItem>
                          <xMenuItem :value="31323" icon="ans-icon-calendar" label="我是菜单1"></xMenuItem>
                        </xSubMenu>
                      </xSubMenu>
                    </xSubMenu>
                  </xMenuItemGroup>
                  <xMenuItemGroup v-for="(item,i) in 2" :key="i" label="分析">
                    <xMenuItem :value="i + '-' + 4" :label="'我是菜单4-' + i">
                      <a href="http://www.baidu.com">我是a链接跳转</a>
                    </xMenuItem>
                    <xMenuItem :value="i + '-' + 5" icon="ans-icon-calendar" :label="'我是菜单5-' + i"></xMenuItem>
                    <xMenuItem :value="i + '-' + 6" icon="ans-icon-calendar" :label="'我是菜单6-' + i"></xMenuItem>
                    <xMenuItem :value="i + '-' + 7" icon="ans-icon-calendar" :label="'我是菜单7-' + i"></xMenuItem>
                  </xMenuItemGroup>
                </xMenu>
              </xContent>
              <xFooter>
                <button @click="collapsed = !collapsed">{{ collapsed ? '展开' : '收起' }}</button>
              </xFooter>
            </xLayout>
          </xSider>
          <xContent>
            <xLayout>
              <xHeader :height="30">头</xHeader>
              <xContent>
                <button @click="value = 3">修改菜单</button>
                <div v-for="item in 100" :key="item">100</div>
              </xContent>
            </xLayout>
          </xContent>
        </xLayout>

      </div>
    </section>
    <section class="demo-section">
      <h4>双向绑定</h4>
      <div>

      </div>
    </section>
    <section class="demo-section">
      <h4>可清空</h4>
      <div>
      </div>
    </section>
    <section class="demo-section">
      <h4>原生属性</h4>
      <div>

      </div>
    </section>
    <section class="demo-section">
      <h4>不同尺寸</h4>
      <div>

      </div>
    </section>
    <section class="demo-section">
      <h4>无边框</h4>
      <div>
      </div>
    </section>
    <section class="demo-section">
      <h4>密码框</h4>
      <div>
      </div>
    </section>
    <section class="demo-section">
      <h4>文本域</h4>
      <div>
      </div>
      <div>
      </div>
      <div>
      </div>
    </section>
    <section class="demo-section">
      <h4>图标</h4>
      <div>

      </div>
    </section>
    <section class="demo-section">
      <h4>插槽</h4>
      <div>

      </div>
      <div>

      </div>
      <div>

      </div>
      <div>

      </div>
    </section>
  </div>
</template>

<script>
import { xMenu, xMenuItem, xMenuItemGroup, xSubMenu } from '../src'
import { xLayout, xHeader, xFooter, xSider, xContent } from '../../vue-layout/src'

export default {
  name: 'app',
  components: { xMenu, xMenuItem, xMenuItemGroup, xSubMenu, xLayout, xHeader, xFooter, xSider, xContent },
  data() {
    return {
      collapsed: false,
      value: 1,
      map: {
        1: false,
        2: false
      }
    }
  },
  methods: {
    onChange(v) {
      console.log(v)
    },

    open(key) {
      this.map[1] = false
      this.map[2] = false
      this.map[key] = true
    }
  }
}
</script>

<style lang="scss"></style>
