<template>
  <div class="player_volume"
       @click="changeVolume">
    <div class="volume_open"
         v-if="curVolumeStatus == 'open'"></div>
    <div class="change_close"
         v-else></div>
  </div>
</template>
<script>
export default {
  name: 'playervolume',
  props: ['micStatus'],
  data () {
    return {
      curVolumeStatus: 'open' // open or  close
    }
  },

  methods: {
    // 切换声音
    changeVolume () {
      this.curVolumeStatus = this.curVolumeStatus == 'open' ? 'close' : 'open'
      if (this.micStatus == 2) return;
      if (this.curVolumeStatus == 'close') {
        this.$parent.mute();
      } else {
        this.$parent.unMute();
      }
    }
  }
}
</script>
<style>
.player_volume {
  position: absolute;
  bottom: 5px;
  right: 108px;
  text-align: center;
  z-index: 111111;
}
.volume_open {
  background: url(../static/images/volume.png) no-repeat !important;
  background-size: 75% !important;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.volume_open:hover {
  background: url(../static/images/volume_hover.png) no-repeat !important;
  background-size: 75% !important;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.change_close {
  background: url(../static/images/mic.png) no-repeat !important;
  background-size: 75% !important;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.change_close:hover {
  background: url(../static/images/mic_hover.png) no-repeat !important;
  background-size: 75% !important;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
</style>
