
<template>
    <div>
        <div class="demo-wrap">
            <div class="time-wrap">
                <text class="progress-text left">{{toTime(position)}}</text>
                <text class="progress-text right">{{toTime(duration)}}</text>
            </div>
            <lc-progress :value="getPos(position)" :bar-width="500"></lc-progress>
        </div>

        <audio id="myAudio">
            <source :src="src" />
        </audio>

    </div>
</template>
<script>
    import Light from 'light'
    import LcProgress from './lc-progress';
    import Utils from 'lighting-ui/packages/utils';
    export default {
        components: { LcProgress },
        props:{
            src: {
                type: String,
            }
        },
        data(){
            return {
                playerId:'',
                position:0,
                value: 0,
                uploading:false,
                duration:'',
                type:'',
                vvv:'',
                isWeb:false,
                t:null,
                isplayed:false,
                tag: false,
                duration_time:''
            }
        },
        watch: {  
            tag () { 
                document.getElementById("myAudio").load()   
                document.getElementById("myAudio").oncanplay = () => {
                    this.duration = document.getElementById("myAudio").duration.toFixed(0)
                }  
            }
        },
        mounted() {
            var that = this;
            this.$nextTick(() => {
                this.tag = !this.tag
            })
            if (Utils.env.isWeb()){
                that.isWeb = true;
                that.position = document.getElementById("myAudio").currentTime.toFixed(0)
            }else{
               var params = {
                    src:this.src,
                    autoplay: false,
                    loop: false,
                    volume: 1,
                    playbackRate:1,
                    startTime: 0,
                }
                weex.requireModule('LightJSBridge').call("audioplay.createAudioContext", params, function(data){
                    if(data.data.type=='onCreated'){
                        that.playerId = data.data.playerId;
                        that.duration = data.data.duration.toFixed(0);
                        that.duration_time = data.data.duration;
                        that.type = data.data.type;
                        let positionNum = 0;
                        that.position = positionNum.toFixed(0);
                    }else if(data.data.type == "onTimeUpdate"){
                        that.position = data.data.currentTime.toFixed(0);
                    }else if(data.data.type == "onSeeked"){
                        that.position = data.data.currentTime.toFixed(0);
                    }
                }) 
            }
            Light.on("viewdisappear",function() {
                var params = {
                    playerId: that.playerId
                }
                weex.requireModule('LightJSBridge').call(
                "audioplay.pause",
                params, that.$page.id
                );
            })
            // 临时解决ios无法监听viewdisappear事件
            Light.requireModule("globalEvent").addEventListener("WXApplicationWillResignActiveEvent",function(){
                var params = {
                    playerId: that.playerId
                }
                weex.requireModule('LightJSBridge').call(
                "audioplay.pause",
                params, that.$page.id
                );
            });
        },
        beforeDestroy() {
            clearInterval(this.t)
        },
        methods: {
            play(){
                var that = this;
                if (this.isWeb) {
                    const audioEle = document.getElementById("myAudio"); 
                    if(!that.isplayed){
                        that.isplayed=true
                        audioEle.play()
                        that.duration = audioEle.duration.toFixed(0)
                        that.position = audioEle.currentTime.toFixed(0)
                        that.t = setInterval(() => {
                            that.position++
                            audioEle.addEventListener('ended', function () {  
                                that.isplayed=false
                            }, false);
                            if(that.position>=that.duration){
                                that.position=that.duration;
                                clearInterval(that.t)
                            }
                        }, 1000);
                    }
                    
                }else{
                    var params = {
                        playerId: that.playerId
                    }
                    weex.requireModule('LightJSBridge').call(
                    "audioplay.play",
                    params,
                    function(data) {
                        if(data.info.error_code!='0'){
                            console.log("error---"+data.info.error_message)
                        }
                    },
                    that.$page.id
                    );
                }
            },
            pause(){
                var that = this;
                if (this.isWeb) {
                    document.getElementById("myAudio").pause()
                    clearInterval(that.t)
                    that.isplayed=false;
                }else{
                    var params = {
                        playerId: that.playerId
                    }
                    weex.requireModule('LightJSBridge').call(
                    "audioplay.pause",
                    params,
                    function(data) {
                        if(data.info.error_code!='0'){
                            console.log("error---"+data.info.error_message)
                        }
                    },
                    that.$page.id
                    );
                }
            },
            seek(v){
                var that = this;
                if (this.isWeb) {
                    const audioEle = document.getElementById("myAudio"); 
                    if(v>that.duration){
                        v = that.duration
                        that.play()
                        audioEle.addEventListener('ended', function () {  
                            clearInterval(that.t)
                            that.isplayed=false
                        }, false);
                    }
                    document.getElementById("myAudio").currentTime=v
                    that.position = v 
                    audioEle.addEventListener('ended', function () {  
                        that.isplayed=false
                    }, false);
                }else{
                    if(v>that.duration_time){
                        v = that.duration_time
                    }
                    var params = {
                        playerId: that.playerId,
                        position:v
                    }
                    weex.requireModule('LightJSBridge').call(
                    "audioplay.seek",
                    params,
                    function(data) {
                        if(data.info.error_code!='0'){
                            console.log("error---"+data.info.error_message)
                        }
                    },
                    that.$page.id
                    );
                }
            },
            toTime(t){
                if (!t) return;
                if (t < 60) return "00:" + ((i = t) < 10 ? "0" + i : i);
                if (t < 3600) return "" + ((a = parseInt(t / 60)) < 10 ? "0" + a : a) + ":" + ((i = t % 60) < 10 ? "0" + i : i);
                if (3600 <= t) {
                    var a, i, e = parseInt(t / 3600);
                    return (e < 10 ? "0" + e : e) + ":" + ((a = parseInt(t % 3600 / 60)) < 10 ? "0" + a : a) + ":" + ((i = t % 60) < 10 ? "0" + i : i);
                }
            },
            getPos(p){
                return p/this.duration*100
            }
           

        },
    }
</script>
<style scoped >

.demo-wrap {
    justify-content: center;
    align-items: center;
  }
.time-wrap {
    width: 500px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .progress-text {
    font-size: 24px;
    color: #44B825;
  }

  .left {
    margin-right: 10px;
  }

  .right {
    margin-left: 10px;
  }
</style>
