<template>
    <view>
        <view class="im--audio" :class="guest ? 'right': 'left'" @click="onPlayMsg">
            <image v-if="!guest" class="audio-mp3" src="@/static/icon/audio_green.png" mode="widthFix"></image>
            <text class="audio-text">"{{msg.duration}}"</text>
            <image v-if="guest" class="audio-mp3" src="@/static/icon/audio_white.png" mode="widthFix"></image>
        </view>
    </view>
</template>

<script>
    export default {
        name: "im",
        props: {
            msg: {
                type: Object,
                default: () => {
                    return {
                        local: '',
                        remote: '',
                        objectName: '',
                        duration: 0
                    }
                }
            },
            guest: {
                type: Boolean,
                default: true
            }
        },
        methods: {
            // 播放语音消息
            onPlayMsg() {
                console.log('播放', this.msg.remote);
                uni.downloadFile({
                    url: this.msg.remote,
                    success: (res) => {
                        if (res.statusCode === 200) {
                            let innerAudioContext = uni.createInnerAudioContext()
                            innerAudioContext.src = res.tempFilePath
                            if (this.audioContextPaused) {
                                innerAudioContext.play()
                                this.audioContextPaused = false
                                return
                            }
                            innerAudioContext.stop()
                            innerAudioContext.onStop(resStop => {
                                console.log('停止');
                                this.audioContextPaused = true
                            })
                            innerAudioContext.onError(err => {
                                console.log(err);
                            })
                        }
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .im--audio {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 79rpx;
        width: 170rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
    }

    ,
    .im--audio.left {
        border-radius: 0 20rpx 20rpx 20rpx;
        background: white;
    }

    .im--audio.right {
        border-radius: 20rpx 0 20rpx 20rpx;
        background: #34CE98;
    }

    .audio-mp3 {
        width: 38rpx;
        height: 38rpx;
    }

    .audio-text {
        font-size: 30rpx;
    }

    .im--audio.left .audio-text {
        color: #333;
    }

    .im--audio.right .audio-text {
        color: white;
    }
</style>
