<template>
    <view 
        class="adudio-wrap"
        :style="{
            height: bubbleheight + 'px',
            background: background
        }">
        <view
            class="content-wrap"
            @tap.stop="onTap">
            <image
                class="audio-icon c-inline-block c-color"
                :src="isPlay ? audioPlay : audioStop"></image>
            <view 
                v-if="title" 
                :style="{
                    color: titleColor,
                    'font-size': '14px'
                }"
                class="c-inline-block c-gap-left">{{ title }}</view>
            <view 
                v-if="time"
                :style="{
                    color: timeColor,
                    'font-size': '12px'
                }"
                class="c-color c-inline-block c-gap-left">{{ time }}"</view>
        </view>
        <view class="triangle-icon"></view>
    </view>
</template>

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

export default {
    config: {
        component: true
    },
    components: {
    },
    props: {
        audiourl: {
            'type': String,
            'default': ''
        },
        time: {
            'type': String,
            'default': ''
        },
        timeColor: {
            'type': String,
            'default': '#999999'
        },
        title: {
            'type': String,
            'default': ''
        },
        titleColor: {
            'type': String,
            'default': '#000000'
        },
        bubbleheight: {
            'type': Number,
            'default': 38
        },
        background: {
            'type': String,
            'default': '#F5F5F5'
        }
    },
    data() {
        return {
             /* eslint-enable max-len */
            audioStop: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2807512094,1101183929&fm=179&app=35&f=PNG?w=39&h=56&s=A9413A6E0BCB33704954910A0300C0C1',
            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
            /* eslint-disable max-len */
        };
    },
    lifetimes: {
        detached() {
            if (this.audio) {
                this.audio.pause();
            }
        }
    },
    methods: {
        // 点击[播放语音]
        onTap() {
            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.src = this.audiourl;
                    this.audio.play();
                    this.$emit('curaudio', this.audio);
                    this.isPlay = true;

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

                    // 音频自然停止
                    this.audio.onPause(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.audiourl;
                    this.audio.play();
                    this.$emit('curaudio', this.audio);
                    this.isPlay = true;

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

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

<style lang="less" scoped>
.adudio-wrap {
    padding: 0 12px;
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 5px;
}
.triangle-icon {
    position: absolute;
    top: 50%;
    margin-top: -6px;
    left: -12px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-right-color: #F5F5F5;
}
.audio-icon {
    width: 12px;
    height: 17px;
}
.content-wrap {
    margin-top: -2px;
}
</style>