<template>
    <view>
        <view class="health-audio-box">
            <view
                :class="isPlay ? 'health-audio-playing' : 'health-audio-pause'"
                class="health-audio-img"
                @tap="toggle"
            >
            </view>
            <view class="health-audio-control">
                <text class="health-audio-text">点击播放医生的语音回答</text>
                <view class="health-audio-bar">
                    <view class="health-audio-progress" :style="{width: percent}"></view>
                </view>
                <view class="health-audio-time">
                    <view class="health-audio-play">{{ctime}}</view>
                    <view class="health-audio-duration">{{cdurationt}}</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>

/**
 *  @file 语音播放
 *  @author yantingxi
 */
export default {
    config: {
        component: true
    },
    components: {
    },
    props: {
        /**
         * 语音地址
         */
        url: String,
        /**
         * 语音时长
         */
        duration: {
            type: [Number, String],
            default: 0
        }
    },
    watch: {
        time(value) {
            this.ctime = this.formatTime(value);
        }
    },
    data() {
        return {
            audio: null,
            isPlay: false,
            time: 0,
            percent: '0%',
            ctime: '00:00',
            cdurationt: '00:00'
        };
    },
    created() {
        this.cdurationt = this.formatTime(this.duration);
    },
    mounted() {
        this.createElement();
    },
    lifetimes: {
        detached() {
            this.audio && this.audio.pause();
        }
    },
    methods: {
        // 点击[播放语音]
        toggle() {
            if (process.env.MARS_ENV === 'swan') {
                if (this.isPlay === true) {
                    // 停止播放
                    this.audio.pause();
                    this.isPlay = false;
                }
                else {
                    this.audio.play();
                    this.isPlay = true;
                    this.$emit('play');
                }
            }
            else if (process.env.MARS_ENV === 'h5') {
                if (this.isPlay === true) {
                    // 停止播放
                    this.audio.pause();
                    this.isPlay = false;
                }
                else {
                    this.audio.play();
                    this.isPlay = true;
                    this.$emit('play');
                }
            }
        },
        createElement() {
            if (process.env.MARS_ENV === 'swan') {
                // 播放音频
                this.audio = this.$api.createInnerAudioContext();
                this.audio.src = this.url;

                // 音频自然停止
                this.audio.onEnded(resp => {
                    this.isPlay = false;
                    this.audio.seek(0);
                    this.timeupdate(0);
                });

                this.audio.onTimeUpdate(({data}) => {
                    this.timeupdate(data.currentTime);
                });

                // 音频自然停止
                this.audio.onPause(resp => {
                    this.isPlay = false;
                });

            } else if (process.env.MARS_ENV === 'h5') {
                // 播放音频 <audio :src="content" ref="audio"></audio>
                this.audio = document.createElement('audio');
                this.audio.src = this.url;
                // this.audio.crossOrigin = 'anonymous';
                // 音频自然停止
                this.audio.addEventListener('ended', e => {
                    this.isPlay = false;
                    this.audio.currentTime = 0;
                });

                // 音频自然停止
                this.audio.addEventListener('pause', e => {
                    this.isPlay = false;
                });

                this.audio.addEventListener('timeupdate', e => {
                    this.timeupdate(this.audio.currentTime);
                });

                this.pageHide(this.audio);
            }
        },
        timeupdate(currentTime) {
            this.percent = currentTime / this.duration * 100 + '%';
            this.time = currentTime.toFixed(0);
        },
        formatTime(val) {
            let min =  Math.floor((val / 60) % 60);
            let sec = val % 60;
            return (min < 10 ? `0${min}` : min) + ':' + (sec < 10 ? `0${sec}` : sec);
        },
        pageHide(vm) {
            let pageHideEvent = [
                'pagehide',
                'visibilitychange',
                'mozvisibilitychange',
                'msvisibilitychange',
                'webkitvisibilitychange'
            ];
            let hidden;

            if (typeof document.hidden !== 'undefined') {
                hidden = 'hidden';
            } else if (typeof document.msHidden !== 'undefined') {
                hidden = 'msHidden';
            } else if (typeof document.mozHidden !== 'undefined') {
                hidden = 'mozHidden';
            } else if (typeof document.webkitHidden !== 'undefined') {
                hidden = 'webkitHidden';
            }
            pageHideEvent.map(eventName => {
                document.addEventListener(eventName, e => {
                    if (document[hidden] || e.hidden) {
                        vm.pause();
                        return;
                    }
                });
            });
        }
    }
};
</script>
<style lang="stylus" scoped>
    .health-audio-box
        padding .1rem
        border 1px solid #f5f5f5
        border-radius 6px
        display flex
        align-items center
        background-color #fafafa

        .health-audio-img
            flex 0 0 42px
            width 13.3333%
            height 42px
            background url('https://self-logo.cdn.bcebos.com/player-pause.082ce5a3.gif') no-repeat
            background-size 42px 168px
        .health-audio-pause
            background-position 0px 0px
        .health-audio-playing
            background-position 0px -126px
        .health-audio-control
            padding-left .1rem
            flex auto
            width 86.666%
            .health-audio-text
                font-size .14rem
                color #333
            .health-audio-bar
                height 3px
                background-color #ebebeb
                .health-audio-progress
                    height 3px
                    background-color #02b7ca
                    width 10%
            .health-audio-time
                display flex
                justify-content space-between
                font-size .13rem
                color #999
</style>