<template>
  <div>
    <div class="header-bar">
      <div class="collapsed-wrap">
        <a @click="collapsedChange" type="text">
          <Icon :class="{'collapsed':collapsed}" class="shrink" size="26" type="md-menu"/>
        </a>
      </div>

      <div class="head-other">
        <slot></slot>
      </div>

      <div class="user-wrap">
        <Dropdown :transfer="true" @on-click="dropChange" trigger="click">
          <a class="user-name" href="javascript:void(0)" v-if="account">
            <template>
              <span>
                {{account.username}}
                <Icon size="17" type="md-arrow-dropdown"/>
              </span>
            </template>
            <img :src="account.avatar" @error="imgError($event,default_head)" class="head-img">
          </a>

          <DropdownMenu slot="list">
            <DropdownItem :name="1">修改密码</DropdownItem>
            <DropdownItem :name="2">个人信息</DropdownItem>
            <DropdownItem :name="3" divided>安全退出</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    </div>

    <ui-psw :show.sync="password.show"></ui-psw>

    <ui-detail :show.sync="detail.show"></ui-detail>
  </div>
</template>

<script src="./js/header_bar.js"></script>
