<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="avatarSize" />
        </view>
        <view class="content">
            <view class="header">
                <view class="name">
                    {{ contact(item.targetId).name }}
                    <text v-if="item.conversationType === 3" class='group'>[群]</text>
                </view>
                <view class="time">{{ item.sentTime|timeCustomCN }}</view>
            </view>
            <message-preview class="preview" :msg="item.latestMessage" :draft="item.draft"
                :conversationType="item.conversationType" :user="item.latestMessage.userInfo" />
        </view>
    </view>
</template>

<script>
    import messagePreview from './messagePreview'
    import utils from '@/utils/index.js'
    import imBase from '../../mixins/imBase.js'

    export default {
        mixins: [
            imBase
        ],
        props: {
            item: {
                type: Object,
                default: function() {
                    return {}
                }
            }
        },
        components: {
            messagePreview
        }
    }
</script>

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

        .avatar {
            position: relative;
            padding-top: 5rpx;

            .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: #eee !important;
            border-bottom-style: solid;

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

                .name {
                    font-size: $title-size + 2;
                    color: #454545;

                    .group {
                        color: $main-color;
                        font-size: $title-size-m - 4;
                        margin-left: 4px;
                        position: relative;
                        top: -4rpx;
                    }
                }

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