<template>
    <view class="audio">
        <view
            :selectable="false"
            @touchstart.prevent.stop="!isSwan ? onTouchLongH5($event) : null"
            @touchend="!isSwan ? onTouchEndH5($event) : null"
            @longpress.prevent.stop="onLongPress($event)"
            @tap="onTap"
        >
            <image
                class="audio-icon c-inline-block c-color"
                :src="isPlay ? audioPlay : audioStop"
            />
            <view class="c-color c-inline-block c-gap-left">{{ item.time }}"</view>
        </view>
    </view>
</template>

<script>
/**
* @file 问诊-音频
* @author haoyan
*/

let TouchTimer = null;
let startTime = 0;

export default {
    config: {
        component: true
    },
    components: {
    },
    props: {
        item: {
            'type': Object,
            'default': {}
        }
    },
    data() {
        return {
            /* eslint-enable max-len */
            audioStop: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3020938280,4252327487&fm=179&app=35&f=PNG?w=39&h=56&s=EDC03A6611FAA0314954910A0000C0C0',
            audioPlay: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1635055409,1190146157&fm=179&app=35&f=GIF?w=39&h=56&s=EDC03A628F0C3F740CF1DC0F0000E0C1',
            audio: null,
            isPlay: false,
            isSwan: process.env.MARS_ENV === 'swan',
            /* eslint-disable max-len */
        };
    },
    lifetimes: {
        attached() {
        },
        detached() {
            this.audio && this.audio.pause();
        }
    },
    methods: {
        onTouchEndH5() {
            this.clearTimer();
            new Date().getTime() - startTime < 800 && this.playAudio();
        },
        onTouchLongH5() {
            startTime = new Date().getTime();
            TouchTimer = setInterval(() => new Date().getTime() - startTime > 800 && this.onLongPress(), 50);
        },
        onLongPress() {
            clearInterval(TouchTimer);
            this.$emit('showToolTip');
        },
        clearTimer() {
            clearInterval(TouchTimer);
        },
        playAudio() {
            this.$emit('nextAudio');
            if (process.env.MARS_ENV === 'swan') {
                if (this.isPlay === true) {
                    // 停止播放
                    this.audio.pause();
                    this.isPlay = false;
                    this.audio = null;
                }
                else {
                    // 播放音频
                    this.audio = this.$api.createInnerAudioContext();
                    this.audio.obeyMuteSwitch = false;
                    this.audio.src = this.item.url;
                    setTimeout(() => {
                        this.audio.play();
                        this.isPlay = true;
                    }, 100);

                    // 音频自然停止
                    this.audio.onEnded(resp => {
                        this.isPlay = false;
                        this.audio = null;
                    });
                }
            }
            else if (process.env.MARS_ENV === 'h5') {
                if (this.isPlay === true) {
                    // 停止播放
                    this.audio.pause();
                    this.isPlay = false;
                    this.audio = null;
                }
                else {
                    // 播放音频 <audio :src="content" ref="audio"></audio>
                    this.audio = document.createElement('audio');
                    this.audio.src = this.item.url;
                    this.audio.play();
                    this.isPlay = true;

                    // 音频自然停止
                    this.audio.addEventListener('ended', e => {
                        this.isPlay = false;
                        this.audio = null;
                    });
                }
            }
        },
        // 点击[播放语音]
        onTap() {
            this.playAudio();
        }
    }
};
</script>

<style lang="less" scoped>
.audio {
    position: relative;
    min-width: 80px;
    user-select: none;
}
.audio-icon {
    width: .12rem;
    height: .17rem;
}
</style>
