# Menu 菜单

<template>
<div>
  <div class="tool-zoom">
    <w-switch v-model="collapse"
      active-text="折叠" inactive-text="展开">
    </w-switch>
    </div>
    <w-menu mode="vertical" defaultActived="2-1"
      :collapse="collapse" :defaultOpened="['3-1']"
      fold-icon="w-icon-arrow-bottom"
      @select="handleSelectChange">
        <w-menu-item index="1" disabled>
            <i class="w-icon w-icon-user" />
            <span slot="title">患者中心</span>
        </w-menu-item>
        <w-submenu index="2" width="140px">
            <template slot="sub-title">
                <i class="w-icon w-icon-mark" />
                <span>特别关注</span>
            </template>
            <w-menu-group title="男性患者">
            <w-menu-item index="2-1">
                <w-tag size="mini">ICU</w-tag>
                <span style="margin-left: 10px">李思</span>
            </w-menu-item>
            <w-menu-item index="2-2">
                <w-tag size="mini">ICU</w-tag>
                <span style="margin-left: 10px">吴中山</span>
            </w-menu-item>
            </w-menu-group>
            <w-menu-group>
            <template>女性患者</template>
            <w-menu-item index="2-3">
                <w-tag size="mini">ICU</w-tag>
                <span style="margin-left: 10px">陈笑笑</span>
            </w-menu-item>
            </w-menu-group>
        </w-submenu>
        <w-submenu index="3" width="140px">
            <template slot="sub-title">
                <i class="w-icon w-icon-time" />
                <span>工作中心</span>
            </template>
            <w-menu-item index="3-1">
                今日就诊
            </w-menu-item>
            <w-menu-item index="3-2">
                未就诊
            </w-menu-item>
            <w-menu-item index="3-3">
                已就诊
            </w-menu-item>
            <w-submenu index="3-4" width="140px">
            <template slot="sub-title">
                就诊流程</template>
            <w-menu-item index="3-4-1">
                填写病历
            </w-menu-item>
            <w-menu-item index="3-4-2">
                检查项目
            </w-menu-item>
            <w-menu-item index="3-4-3">
                检验项目
            </w-menu-item>
            <w-menu-item index="3-4-4">
                开具处方
            </w-menu-item>
        </w-submenu>
        </w-submenu>
        <w-menu-item index="4">
            <i class="w-icon w-icon-config" />
            <span slot="title">个人设置</span>
        </w-menu-item>
    </w-menu>
    <div :class="['content', {
        'is-menu-collapse': collapse
    }]"></div>
</div>
</template>
<script>
export default {
  data () {
      return {
          collapse: false
      }
  },
  methods: {
    handleSelectChange (val) {
        this.actived = val
    }
  }
}
</script>
<style lang="scss">
.menu-collapse-demo {
    .slot-wrapper {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        background-color: #E5E8ED;
    }
    .tool-zoom {
        width: 100%;
        margin-bottom: 25px;
    }
    i.w-icon {
        margin-right: 8px;
    }
    .w-menu {
        float: left;
        width: 200px;
        min-height: 340px;
    }
    .w-menu--collapse {
        width: 65px;
    }
    .content {
        float: right;
        width: calc(100% - 220px);
        padding: 15px;
        box-sizing: border-box;
        background-color: #fff;
        will-change: width;
        transition: width .3s cubic-bezier(.645, .045, .355, 1);
    }
    .is-menu-collapse {
        width: calc(100% - 85px);
        &>div.is-actived {
            i.w-icon {
                color: #0b4aed !important;
            }
        }
    }
}
</style>