<!--  功能：播放组件(蓝色横版-简); 作者: ZXS; 时间: 2021-08-20 17:52:09  -->
<template>
    <div id="CommonAudioRow" class="c-23242e full-width">
        <audio ref="audio" :src="url" preload="meta" @play="onPlay" @error="onError" @waiting="onWaiting" @pause="onPause" @timeupdate="onTimeupdate" @loadedmetadata="onLoadedmetadata" />
        <div class="play-cont flex-start-center">
            <img class="pr4 play-img" :src="audio.playing ? require('@/assets/img/pause.svg') : require('@/assets/img/play.svg')" :class="audio.waiting ? 'filter' : 'pointer'" @click="startPlayOrPause">
            <el-slider v-model="sliderTime" class="mlr4 flex1" :format-tooltip="formatProcessToolTip" @change="changeCurrentTime" />
            <div v-if="url !== ''" class="c-606266 ft12 point pl4 cont-speed pointer" @click="changeSpeed">{{ audio.speed }}X</div>
            <div class="ft12 cont-time pl4">
                <span>{{ audio.currentTime | formatSecond }}</span>
                /
                <span class="c-606266">{{ audio.maxTime | formatSecond }}</span>
            </div>
            <a v-if="url !== ''" :href="url" target="_blank" class="ft12 c-1677ff pointer" download>下载</a>
            <div v-if="data.length > 1" class="flex-center">
                <i class="el-icon-arrow-left ft14 pointer bold" @click="turnPre" />
                <span>{{ currentVoice }}/{{ data.length }}</span>
                <i class="el-icon-arrow-right ft14 pointer bold" @click="turnNext" />
            </div>
        </div>
    </div>
</template>
<script>
// 计算时间格式
function realFormatSecond(second) {
    var secondType = typeof second;
    if (secondType === 'number' || secondType === 'string') {
        second = parseInt(second);
        var hours = Math.floor(second / 3600);
        second = second - hours * 3600;
        var mimute = Math.floor(second / 60);
        second = second - mimute * 60;
        return ('0' + hours).slice(-2) + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2);
    }
    return '00:00:00';
}
export default {
    name: 'CommonAudioRow',
    filters: {
        formatSecond(second = 0) {
            return realFormatSecond(second);
        }
    },
    props: {
        url: {
            type: String,
            default: ''
        },
        data: {
            type: Array,
            default: () => []
        },
        // 是否停止录音
        clearAudio: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            audio: {
                currentTime: 0,
                maxTime: 0,
                playing: false,
                waiting: true,
                speed: 1
            },
            theControlList: 'onlyOnePlaying',
            sliderTime: 0,
            controlList: {
                // 只能播放一个
                onlyOnePlaying: false
            },
            // 音频翻页
            currentVoice: 1
        };
    },
    watch: {
        clearAudio(val) {
            if (val) {
                this.$refs.audio.currentTime = 0;
                this.pausePlay();
            }
        }
    },
    created() {
        this.setControlList();
    },
    methods: {
        setControlList() {
            const controlList = this.theControlList.split(' ');
            controlList.forEach(item => {
                if (this.controlList[item] !== undefined) {
                    this.controlList[item] = true;
                }
            });
        },
        // 进度条toolTip
        formatProcessToolTip(index = 0) {
            console.log('@input');
            index = parseInt((this.audio.maxTime / 100) * index);
            return '进度条: ' + realFormatSecond(index);
        },
        // 播放跳转
        changeCurrentTime(index) {
            this.$refs.audio.currentTime = parseInt((index / 100) * this.audio.maxTime);
        },
        startPlayOrPause() {
            return this.audio.playing ? this.pausePlay() : this.startPlay();
        },
        // 开始播放
        startPlay() {
            this.$refs.audio.play();
        },
        // 暂停
        pausePlay() {
            this.$refs.audio.pause();
        },
        // 当音频暂停
        onPause() {
            this.audio.playing = false;
        },
        // 当发生错误, 就出现状态
        onError() {
            this.audio.waiting = true;
            this.audio.maxTime = 0;
        },
        // 当音频开始等待
        onWaiting(res) {},
        // 当音频开始播放
        onPlay(res) {
            this.audio.playing = true;
            if (!this.controlList.onlyOnePlaying) {
                return;
            }
            const target = res.target;
            const audios = document.getElementsByTagName('audio')
			;[...audios].forEach(item => {
                if (item !== target) {
                    item.pause();
                }
            });
        },
        // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
        onTimeupdate(res) {
            this.audio.currentTime = res.target.currentTime;
            this.sliderTime = parseInt((this.audio.currentTime / this.audio.maxTime) * 100);
        },
        // 当加载语音流元数据完成后，会触发该事件的回调函数
        // 语音元数据主要是语音的长度之类的数据
        onLoadedmetadata(res) {
            this.audio.waiting = false;
            this.audio.maxTime = parseInt(res.target.duration);
        },
        // 音频翻页/上一页,下一页
        turnPre() {
            if (this.currentVoice > 1) {
                this.currentVoice--;
                this.$emit('voiceCurrent', this.currentVoice - 1);
            }
        },
        turnNext() {
            if (this.currentVoice < this.data.length) {
                this.currentVoice++;
                this.$emit('voiceCurrent', this.currentVoice - 1);
            }
        },
        // 改变播放速度
        changeSpeed() {
            if (this.audio.speed < 2) {
                this.audio.speed += 0.5;
            } else {
                this.audio.speed = 1;
            }
            this.$refs.audio.playbackRate = this.audio.speed;
        }
    }
};
</script>

<style lang="less" scoped>
#CommonAudioRow {
	.play-cont {
		.cont-time {
			min-width: 110px;
		}
        .cont-speed{
            min-width: 25px;
        }
		.pr4 {
			padding-right: 4px;
		}
		.pl4 {
			padding-left: 4px;
		}
		.filter {
			filter: grayscale(1);
			opacity: 0.3;
            cursor: no-drop;
		}
	}
}
.bold {
    font-weight: bold !important;
}
</style>
