<template>
    <view class="message--cell">
        <view class="avatar">
            <u-badge max="99" shape="horn" absolute :offset="[-5, -8]" :value="item.unreadMessageCount" />
            <u-avatar :src="contact(item.targetId).portraitUrl" shape="square" size="44" />
        </view>
        <view class="content">
            <view class="header">
                <view class="name">{{ contact(item.targetId).name }} <text v-if="item.conversationType === 3"
                        class='qun'>[群]</text></view>
                <view class="time">{{ item.sentTime|timeCustomCN }}</view>
            </view>
            <message-preview class="preview" :msg="item.latestMessage" :conversationType="item.conversationType"
                :user="item.latestMessage.userInfo" />
        </view>
    </view>
</template>

<script>
    import messagePreview from './messagePreview'

    export default {
        props: {
            item: {
                type: Object,
                default: function() {
                    return {}
                }
            }
        },
        computed: {
            contact() {
                return function(targetId) {
                    return this.$store.getters.contactInfo(targetId)
                }
            }
        },
        components: {
            messagePreview
        }
    }
</script>

<style lang="scss" scoped>
    .message--cell {
        display: flex;
        padding: 20rpx 10rpx 0 30rpx;

        .avatar {
            position: relative;

            .u-badge {
                z-index: 998;
            }
        }

        .content {
            margin-left: 30rpx;
            box-sizing: border-box;
            position: relative;
            flex: 1;
            

            border-bottom-width: 0.5px !important;
            border-color: #f9f9f9 !important;
            border-bottom-style: solid;

            .header {
                display: flex;
                justify-content: space-between;

                .name {
                    font-size: $title-size + 2;
                    color: #454545;
                    display: flex;
                    align-items: center;

                    .qun {
                        color: $main-color;
                        font-size: $title-size-m;
                        margin-left: 4px;
                    }
                }

                .time {
                    font-size: $title-size-sm - 3;
                    color: $text-gray-m;
                    position: absolute;
                    right: 30rpx;
                    padding-top: 4rpx;
                    font-weight: normal;
                }
            }
        }
    }
</style>
