<template>
    <div style="width:100%;text-align: center;" class="aplayer-box">
        <aplayer
                v-if="aplayerExist"
                class="st-aplayer"
                :autoplay="musicOptions.autoplay"
                :controls="true"
                :music="musicOptions"
                @timeupdate="timeupdate"
                @play="play"
                @playing="playing"
                @ended="ended"
                :ref="aplayerRef"
        >
        </aplayer>
    </div>
</template>

<script>
    import Aplayer     from 'vue-aplayer';

    Aplayer.disableVersionBadge = true;
    import * as kejian from '@/api/peixun/kejian';
    import * as commonUtils from '@/utils/common';

    export default {
        name:       'MtaBusAudioPlayer',
        props:      {
            options: {
                type:     Object,
                required: true,
            },
            checktimes: {
                type:     Boolean,
                default() {
                    return true;
                }
            }
        },
        components: {
            Aplayer,
        },
        data() {
            return {
                aplayerExist:     false,
                musicOptions:     null,
                aplayerRef:       'aplayerRef',
                currentTime:      0,
                currentPlaytimes: 0,
            };
        },
        methods:    {
            timeupdate(e) {
                if (!this.musicOptions.dragable && this.checktimes) {
                    // console.log(this.currentPlaytimes, this.musicOptions.playtimes);
                    if (this.currentPlaytimes > this.musicOptions.playtimes && this.$refs[this.aplayerRef].$refs.audio.currentTime !== 0) {
                        this.debounceWarning(this);
                        this.$refs[this.aplayerRef].$refs.audio.pause();
                        this.$refs[this.aplayerRef].$refs.audio.currentTime = 0;
                        return;
                    }
                    // console.log(this.$refs[this.aplayerRef].$refs.audio.currentTime, this.currentTime);
                    // 正常播放
                    if (this.$refs[this.aplayerRef].$refs.audio.currentTime - this.currentTime < 0.6
                        && this.$refs[this.aplayerRef].$refs.audio.currentTime - this.currentTime >= 0) {
                        this.currentTime = this.$refs[this.aplayerRef].$refs.audio.currentTime;
                    } else {
                        this.$refs[this.aplayerRef].$refs.audio.currentTime = this.currentTime;
                    }
                } else {
                    this.currentTime = this.$refs[this.aplayerRef].$refs.audio.currentTime;
                }
            },
            play(e) {
                if (this.currentTime < 0.6) {
                    this.currentPlaytimes++;
                    if (this.currentPlaytimes > this.musicOptions.playtimes) {
                        return;
                    }
                    // save cache  userid + src
                    this.$emit('updAudioPlaytimes', this.currentPlaytimes);
                }

            },
            playing(e) {
            },
            ended(e) {
                this.currentTime = 0;
                commonUtils.saveCourseProgress(100, 100);
                commonUtils.updateSectionProgress();
            },
            debounceWarning: _.debounce((that) => {
                that.$message.warning('已超过最大播放次数');
            }, 200),
            initOption() {
                this.musicOptions = {};
                let defaultOption = {
                    kjId:      null,
                    title:     '无标题',
                    artist:    '某艺术家',
                    src:       null,
                    pic:       '@/assets/images/default/audioImage.jpg',
                    autoplay:  false,
                    dragable:  null,
                    playtimes: null,
                };
                this.musicOptions = Object.assign(defaultOption, this.options);
                this.currentPlaytimes = this.musicOptions.curPlaytimes ? this.musicOptions.curPlaytimes : 0;
            },
            getMusicOptions() {
                if (this.options.kjId) {
                    this.aplayerExist = false;
                    kejian.getKejian({
                                         kjId: this.options.kjId,
                                     }).then(res => {
                        if (res.code === 0) {
                            this.musicOptions = Object.assign(this.musicOptions, {
                                title: res.data.name,
                                src:   res.data.newUrl,
                            });
                            // console.log(this.musicOptions);
                            this.aplayerExist = true;
                        }
                    });
                } else {
                    /*this.musicOptions = {
                        title:    this.options.title,
                        artist:   this.options.artist,
                        src:      this.options.src,
                        pic:      this.options.pic,
                        autoplay: this.options.autoplay,
                    };*/
                    this.aplayerExist = true;
                }
            }
        },
        created() {
            this.aplayerRef = Math.floor(Math.random() * 1000000);
            this.initOption();
        },
        mounted() {
            this.getMusicOptions();

        },
        watch: {
            'options.kjId': {
                handler(value, oValue) {
                    this.getMusicOptions();
                },
            },
        },
    };
</script>
<style lang="scss" scoped>
    .el-button {
        font-size: 14px;
    }

    .fl {
        display: block;
        float: left;
    }

    .ml-30 {
        margin-left: 30px;
    }

    .st-aplayer {
        width: 320px;
        margin: 0 auto;
    }


</style>
<style lang="scss">
    //音频
    .aplayer-box{
        .aplayer.st-aplayer {
            overflow: visible;
            .aplayer-body{
                overflow: visible;
                .aplayer-info{
                    height: 30px;
                    padding: 0 7px;
                    overflow: visible;
                    //音频名称
                    .aplayer-music{
                        display: none;
                    }
                    //音频控制条
                    .aplayer-controller{
                        padding: 6px 0;
                    }
                }
            }
            //音频图片
            .aplayer-pic{
                width: 30px;
                height: 30px;
                background: #fff!important;
                //播放按钮
                .aplayer-play{
                    width: 18px;
                    height: 18px;
                    margin: 0 -12px -10px 0;
                    .aplayer-icon-play{
                        width: 14px;
                        height: 14px;
                        top: 2px;
                        left: 3px;
                    }
                }
                //暂停按钮
                .aplayer-pause{
                    width: 18px;
                    height: 18px;
                    bottom: 50%;
                    right: 50%;
                    margin: 0 -12px -10px 0;
                    .aplayer-icon-pause{
                        width: 14px;
                        height: 14px;
                        top: 2px;
                        left: 2px;
                    }
                }
            }

        }
    }
</style>
