<template>
  <div class="content flexcom combacg">
    <div class="left"></div>
    <div class="menu flexcom">
        <div class="icon" v-show="isFull">
            <fullscreen v-model="isFullscreen" @on-full='full'/>
        </div>

        <div class="icon" @click="openNews" v-show="isNews">
          <Badge :count="count">
              <i class="h-icon-xiaoxi h-icon" style="font-size: 20px;"></i>
          </Badge>
        </div>
        <div class="icon" @click="openEmail" v-show="isEmail">
          <i class="h-icon-zhanneixin h-icon"></i>
        </div>
        <div class="icon flexcom" style="font-size: 14px;" v-show="isNames">
          <span class="username">张朕</span>/
          <div class="dropdown">
              <Dropdown>
                  <a href="javascript:void(0)">
                      <span style="color: #fff;">{{menuRoleNames.indexOf('文件系统文档管理员')>-1?' 文件系统文档管理员':'文件系统用户'}}</span>
                      <Icon type="ios-arrow-down" style="color: #fff;"></Icon>
                  </a>
                  <DropdownMenu slot="list">
                      <template v-for="(item) in menuRoleNames" >
                        <DropdownItem class="dropselect" :name="item" :key="item">{{item}}</DropdownItem>
                      </template>
                  </DropdownMenu>
              </Dropdown>
          </div>
        </div>
        <div class="icon" @click="getOut" v-show="isOut">
          <i class="h-icon-tuichu h-icon"></i>
        </div>
    </div>

    <!-- 消息弹窗 -->
    <mes-Notificate ref="mesNotificate"></mes-Notificate>
  </div>
</template>

<script>
  import mesNotificate from '../mesNotificate/mesNotificate';
  import Fullscreen from "./fullscreen";
  export default {
    name:'HMenuRight',
    components:{
      mesNotificate,
      Fullscreen
    },　
    data(){
      return {
        menuRoleNames: ["OA用户", "总经办负责人", "测试oa角色", "临时打卡", "文件系统管理员"],
        isFullscreen:false
      }
    },
    props:{
      isShow:{
        type:Boolean,
      },
      count:{
        type:Number
      },
      isFull:{ //全屏是否显示
        type:Boolean,
      },
      isNews:{
        type: Boolean //消息是否显示
      },
      isEmail: {
        type: Boolean //邮箱是否显示
      },
      isNames:{
        type: Boolean //用户角色是否显示
      },
      isOut:{
        type: Boolean //退出是否显示
      }
    },
    methods:{
      openNews(){
        this.$emit('on-openNews')
        this.$refs.mesNotificate.isShow = true
      },
      getOut(){
        this.$emit('on-getOut')
      },
      openEmail(){
        this.$emit('on-openEmail')
      },
      full(val){
        this.$emit('on-full',val)
      }
    }
  }
</script>

<style scoped lang="less">
    @height: 40px;
    .flexcom{
      display: flex;
      align-items: center;
    }
    .content{
        height: @height;
        color: #fff;
        .left{
          height: 100%;
          flex: 1;
        }
        .menu{
          height: 100%;
          .icon{
            padding-right: 30px;
          }
          .h-icon{
            font-size: 18px;
            cursor: pointer;
          }
        }
    }
</style>
