<template>
    <view class="">
        <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
        <view class="msg--voice">
            <view class="voice" :class="isRemote ? 'left': 'right'" @click="onPlayMsg">
                <image v-if="!isRemote" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
                <text class="duration">{{ duration }}"</text>
                <image v-if="isRemote" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
            </view>
            <u-badge isDot :show="message.content.local =='' && isRemote" />
        </view>
    </view>
</template>

<script>
    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'

    export default {
        name: 'showVoice',
        props: {
            message: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            isGroup: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            duration() {
                return this.message.content.duration
            },
            isRemote() {
                return this.message.messageDirection == 2
            },
            contact() {
                return function(targetId) {
                    return this.$store.getters.contactInfo(targetId)
                }
            }
        },
        methods: {
            // 播放语音消息
            onPlayMsg() {
                if (this.message.content.local) {
                    this.playMsg(this.message.content.local)
                } else {
                    RongIMLib.downloadMediaMessage(this.message.messageId, {
                        success: (path) => {
                            this.message.content.local = path
                            this.playMsg(path)
                        },
                        progress: (progress, messageId) => {},
                        cancel: (messageId) => {},
                        error: (errorCode, messageId) => {
                            // 发送错误回调
                        }
                    })
                }
            },
            playMsg(path) {
                uni.$emit('onVideoMessagePlay')
                const innerAudioContext = uni.createInnerAudioContext()
                innerAudioContext.src = path
                innerAudioContext.autoplay = true
                innerAudioContext.onStop(resStop => {
                    uni.$emit('onVideoMessageStop')
                    innerAudioContext.destroy()
                })
                innerAudioContext.onError(err => {
                    console.log(err);
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .name {
        font-size: 24rpx;
        color: $text-gray-m;
    }

    .msg--voice {
        display: flex;
        align-items: center;

        .u-badge {
            margin-left: 20rpx;
        }

        .voice {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 79rpx;
            width: 170rpx;
            padding: 0 20rpx;
            box-sizing: border-box;

            .icon {
                width: 38rpx;
                height: 38rpx;
            }

            &.left {
                border-radius: 0 20rpx 20rpx 20rpx;
                background: white;

                .duration {
                    color: #333;
                    font-size: 30rpx;
                }
            }

            &.right {
                border-radius: 20rpx 0 20rpx 20rpx;
                background: $main-color;

                .duration {
                    color: white;
                    font-size: 30rpx;
                }
            }
        }
    }
</style>
