<template>
  <div class="aos-audio">
    <audio v-if="!type || type === 'audio'" :src="source" controls ref="audio"></audio>
    <video v-if="type === 'video'" controls preload="none" ref="video"  width="400">
      <source :src="source"/>
    </video>
    <el-dropdown v-if="!type || type === 'audio'" trigger="click" @command="handleCommand">
      <el-button class="aos-audio-rate" type="text">倍速播放</el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :command="0.5">0.5</el-dropdown-item>
        <el-dropdown-item :command="1">1</el-dropdown-item>
        <el-dropdown-item :command="1.5">1.5</el-dropdown-item>
        <el-dropdown-item :command="2">2</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  name: 'AosAudio',
  data(){
    return {
    }
  },
  props: {
    type: {
      type: String,
      default: 'audio',
      validator: function(value){
        return ['audio','video'].indexOf(value) !== -1
      }
    },
    source: {
      type: String,
      required: true
    }
  },
  methods: {
    handleCommand(data) {
      if (!this.type || this.type === 'audio') {
        this.$refs.audio.playbackRate = data;
      } else if (this.type === 'video') {
        this.$refs.video.playbackRate = data;
      }
    }
  }
}
</script>
