<template>
  <div class="page-header app-header auto" style="background: #48A7FF;position: revert">
    <span style="margin-left:33px">{{title}}</span>
    <div class="app-header-back" @click='back()' v-show="needBack">
      <img src="../../assets/返回.png" style="height: 20px;margin-right:-10px"/>
    </div>
    <div class="app-header-back"  v-show="!needBack" @click="gotouser()">
      <img src="../../assets/denglu.png" style="height: 20px;margin-right:-10px;margin-top:-10px"/>
      <span style="margin-left:5px;color: #ffffff;font-size: 1.0em;">{{loginname}}</span>
    </div>
    <div class="app-header-list" v-if="showList">
    <dropdown>
      <a  href="#" data-toggle="dropdown" class="dropdown-toggle" style="color: white;font-size:19px">
        <div class="app-header-newaddserver" style="line-height: 1px;margin-top: -5px">
          <img src="../../assets/newadd3.png" style="height: 20px;margin-right:-10px"/>
        </div>
      </a>
      <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-right">
        <li >
        <a href="#" @click="gotopage('sell-info',{user:user})">
        <img src="../../assets/待办工单竖屏3.png"> 报修工单
        </a>
        <hr>
        <a href="#" @click="gotopage('repair-message',{user:user})">
        <img src="../../assets/安检导航竖屏3.png"/> 安检计划
        </a>
        <hr>
        <a href="#" @click="gotopage('changemeter-info',{user:user})">
        <img src="../../assets/手机抄表竖屏3.png"/> 抄表计划
        </a>
        <hr>
        <hr>
        </li>
      </ul>
    </dropdown>
  </div>
    <div class="app-header-guanbishengyin" style="line-height: 25px" @click='mute()'>
      <img src="../../assets/jingyin3.png" style="height: 20px;"/>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
export default {
  title: '通用头部组件',
  data () {
    return {
      loginname: Vue.user.name
    }
  },
  props: {
    user:{
      type:Object
    },
    userinfo:{
      type:Object
    },
    // 是否显示列表控件
    showList: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '燃气应用'
    },
    needBack: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    // 新增工单
    newadd(){
      // 事件
    },
    gotouser(){
      this.$emit('paperinfo','system-setup')
    },
    // 跳转页面
    gotopage(param,props) {
      this.$emit('paperinfo',param)
    },
    back () {
      // console.log('发送返回事件')
      this.$emit('back')
    },
    // 关闭新消息响铃（静音）
      mute () {
        if(navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone')){
            window.prompt("mute","")
        }else{
          HostApp.mute()
        }
    },
  }
}
</script>
<style scoped>
  .app-header {
    position: fixed;
    top:0px;
    width: 100%;
    margin: 0px;
    background: #499edf;
    color: #FFF;
    padding: 10px;
    text-align: center;
    font-size: 15px;
    height: 7%;

    /*margin-bottom: 20px;*/
  }
  .app-header-back {
    position: absolute;
    top: 12px;
    color: #D8DCE5;
  }
  .app-header-list {
    height: 40px;
    float: right;
    color: #D8DCE5;
  }
  .app-header-guanbishengyin {
    margin-right: 10px;
    float: right;
    color: #D8DCE5;
  }
  .app-header-newaddserver {
    margin-right: 10px;
    float: right;
    color: #D8DCE5;
  }
  .app-header-volume {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    right: 20px;
    color: #D8DCE5;
    font-size: 1.5em;
  }
  .dropdown-menu {
    background-color: #212a35;
  }
  .dropdown-menu a{
    color: white;
  }
  .dropdown-menu a:hover{
    color: white;
    background-color: #6b85a3;
  }
  .dropdown-menu img{
    width: 22%;
    margin-top: -5px;
  }
  .dropdown-menu hr{
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right:0px;
    width: 80%;
  }
  .glyphicon-menu-left{
    color:#fff;
  }
</style>
