<template>
    <dl data-type="3" :class='[(chatMen ? "chat-right" : "chat-left")]'>
        <dt>
            <a>
                <img :src='chatImg' class="c-images-cycle">
            </a>
        </dt>
        <div class="c-content">
            <span class="c-f12 name">{{chatObj.sender_name}}</span>
            <div class="c-msg">
                <span class="yidu" v-show="chatMen && chatJudge && chatJudge > chatObj.timestamp">已读</span>
                <dd class="word-bread audio" :class='{" active": judgeBofang}' @click="openVoice(photoSrc(JSON.parse(chatObj.content).path))">
                    <audio id="audio" :src='photoSrc(JSON.parse(chatObj.content).path)'></audio>
                    <div style="width:34.5px" class="soundWav">
                        <span class="soundWavT">{{JSON.parse(chatObj.content).times + "''"}}</span>
                    </div>
                </dd>
            </div>
        </div>
    </dl>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../assets/sass/message-chat";
</style>
<script>
import common from '../../assets/js/common'

export default {
    props: ['chatMen', 'chatJudge', 'chatObj', 'chatImg'],
    components: {

    },
    mounted() {

    },
    data() {
        return {
            judgeBofang: false,
            timer: null,
            time: 0
        }
    },
    methods: {
        photoSrc(str) {
            return common.setImgUrl(str)
        },
        // 音频播放
        openVoice(val) {
            this.judgeBofang = false
            let _this = this,
                audio = document.getElementById('audio')
            if (this.timer) {
                audio.pause()
                clearInterval(this.timer)
            }
            audio.src = val
            audio.currentTime = 0
            this.judgeBofang = true
            audio.play()
            this.time = 0
            this.timer = setInterval(function() {
                _this.time += 0.2
                if (_this.time >= JSON.parse(_this.chatObj.content).times) {
                    // 停止播放效果
                    _this.judgeBofang = false
                    clearInterval(_this.timer)
                    this.timer = null
                }
            }, 200)
        }
    }
}
</script>
