<template>
    <view class="">
        <view class="notify" v-if="message.objectName === 'RC:GrpNtf'">{{ message.content.message }}</view>
        <view class="notify" v-else-if="message.objectName === 'RC:RcNtf'">
            {{ contact(message.senderUserId).name }} 撤回了一条消息
        </view>
        <view v-else :class="['cell-item', message.messageDirection == 1 ? 'right' : 'left']">
            <u-avatar class="avatar" @click="toUser(message)" :size="avatarSize" shape="square"
                :src="contact(message.senderUserId).portraitUrl" />
            <view class="msg">
                <show-text v-if="message.objectName === 'RC:TxtMsg'" :message="message" :isGroup="isGroup" />
                <show-voice v-else-if="message.objectName === 'RC:HQVCMsg'" :message="message" :isGroup="isGroup" />
                <show-image v-else-if="message.objectName === 'RC:ImgMsg'" :message="message" :isGroup="isGroup" />
                <show-call v-else-if="message.objectName === 'RC:InfoNtf'" :message="message" :isGroup="isGroup" />
                <view v-else class="">
                    [未处理的消息类型 {{ message.objectName }}]
                </view>
            </view>
            <!-- <view class="time">{{ item.sentTime|timeCustomCN }}</view> 时间判断，最好是隔一段时间没有消息才展示一个 -->
        </view>
    </view>
</template>

<script>
    import showVoice from './show/showVoice'
    import showImage from './show/showImage'
    import showText from './show/showText'
    import showCall from './show/showCall'
    import utils from '@/utils/index.js'

    export default {
        components: {
            showCall,
            showVoice,
            showImage,
            showText
        },
        props: {
            message: {
                type: Object,
                default: function() {
                    return {}
                }
            },
            isGroup: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                avatarRpx: 84
            }
        },
        computed: {
            avatarSize() {
                return utils.rpx2px(this.avatarRpx)
            },
            contact() {
                return function(targetId) {
                    return this.$store.getters.contactInfo(targetId)
                }
            }
        },
        methods: {
            toUser(item) {
                if (item.messageDirection == 1) {
                    uni.navigateTo({
                        url: '/pages/im/friends/mine?targetId=' + item.senderUserId
                    })
                } else {
                    uni.navigateTo({
                        url: '/pages/im/friends/info?targetId=' + item.senderUserId
                    })
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .notify {
        text-align: center;
        font-size: 24rpx;
        color: #666;
    }

    .cell-item {
        display: flex;
        width: 710rpx;
        justify-content: flex-start;

        &.left {
            flex-direction: row;
        }

        &.right {
            flex-direction: row-reverse;

            .state {
                flex-direction: row;
                justify-content: flex-end;
            }
        }

        .msg {
            margin: 0 20rpx;
        }
    }
</style>
