<template>
  <div class="page-header app-header auto">
    <span>{{title}}</span>
    <div class="app-header-back" @click='back()' v-show="needBack">
      <span class="glyphicon glyphicon-menu-left"></span>
      <span>返回</span>
    </div>
  </div>
</template>

<script>
export default {
  title: '通用头部组件',
  data () {
    return {}
  },
  props: {
    title: {
      type: String,
      default: '燃气应用'
    },
    needBack: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    back () {
      // console.log('发送返回事件')
      this.$emit('back')
    },
    // 关闭新消息响铃（静音）
    mute () {
      HostApp.mute()
    },
  }
}
</script>
<style scoped>
  .app-header {
    position: relative;
    margin: 0px;
    background: #009AFC;
    color: #FFF;
    padding: 8px;
    text-align: center;
    font-size: 1.2em;
    /*margin-bottom: 20px;*/
  }
  .app-header-back {
    position: absolute;
    top: 8px;
    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;
  }
</style>
