<template>
    <view v-if="!isRemote">
        <view class="state" v-if="isGroup">
            <!-- 已发送 -->
            <u-icon name="checkbox-mark" :size="iconSize" class="sent"
                :color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
            <!-- 已阅读 -->
            <text class="readers">{{ readers }}</text>
        </view>
        <view class="state" v-else>
            <!-- 已发送 -->
            <u-icon name="checkbox-mark" :size="iconSize" class="sent"
                :color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
            <!-- 已阅读 -->
            <u-icon name="checkbox-mark" :size="iconSize" class="receive"
                :color="message.sentStatus >= 50 ? '#34CE98' : '#999999' " />
        </view>
    </view>
</template>

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

    export default {
        name: 'showText',
        props: {
            message: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            isGroup: {
                type: Boolean,
                default: false
            },
            isRemote: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            iconSize() {
                return utils.rpx2px(28)
            },
            readers() {
                if (this.message.extra) {
                    return JSON.parse(this.message.extra).readers || 0
                }
                
                return 0
            }
        }
    }
</script>

<style scoped lang="scss">
    .state {
        padding: 10rpx;
        border-radius: 30rpx;
        background-color: #ddd;
        display: flex;
        margin-right: 10rpx;

        .sent {
            z-index: 2;
        }

        .receive {
            z-index: 1;
            margin-left: -20rpx;
        }

        .readers {
            font-size: 20rpx;
            margin-left: -6rpx;
            color: $text-gray-m;
        }
    }
</style>
