# Menu 菜单

<template>
<div>
  <div class="tool-zoom">
        <w-switch
          v-model="collapse"
          active-text="折叠"
          inactive-text="展开"
        ></w-switch>
      </div>
      <div class="menu-wrapper">
        <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 slot="title">女性患者</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="collapse" @click="collapse = !collapse">
          <i
            class="w-icon"
            :class="collapse ? 'w-icon-s-unfold' : 'w-icon-s-fold'"
          ></i>
        </div>
      </div>
      <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-1 {
    .slot-wrapper {
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      background-color: #e5e8ed;
    }
    .tool-zoom {
      width: 100%;
      margin-bottom: 16px;
    }
    .menu-wrapper {
      display: flex;
      flex-direction: column;
      position: relative;
      background: #fff;
      min-height: 340px;
    }
    .collapse {
      padding: 16px;
      border-top: 1px solid #e9e9e9;
      cursor: pointer;
    }
    i.w-icon {
      margin-right: 8px;
    }
    .w-menu {
      width: 200px;
      flex: 1;
      overflow: hidden;
    }
    .w-menu--collapse {
      width: 56px;
      & > div.is-actived {
        i.w-icon {
          color: #0b4aed !important;
        }
      }
    }
    .content {
      float: right;
      width: calc(100% - 210px);
      margin: 0 0 0 10px;
      padding: 15px;
      box-sizing: border-box;
      background-color: #fff;
    }
    .is-menu-collapse {
      width: calc(100% - 85px);
    }
  }
</style>