<template>
    <view class="msg--file">
        <message-state :message="message" :isGroup="isGroup" :isRemote="isRemote" />

        <view class="">
            <view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
            <view class="file" :class="isRemote ? 'left': 'right'">
                <view class="img">
                    {{ content.fileType }}
                    {{ content.name }}
                </view>
            </view>
        </view>
    </view>
</template>

<!-- "content": {
        "fileType": "jpg",
        "remote": "https://rongcloud-spic.ronghub.com/Xl1PRVpHVldeRQAGVgEHAAcBBgYGBgcDAwMGMjA3MA%3D%3D.jpg?e=1661583313&token=livk5rb3__JZjCtEiMxXpQ8QscLxbNLehwhHySnX:t58hs4uvM1RFsBeKLTcDbVW-k5w=",
        "size": 347062,
        "objectName": "RC:FileMsg",
        "name": "Screenshot_2022-02-25-14-44-55-886_io.zhhealth.app.jpg",
        "local": "file:///storage/emulated/0/DCIM/Screenshots/Screenshot_2022-02-25-14-44-55-886_io.zhhealth.app.jpg",
        "userInfo": {
            "userId": "10051",
            "name": "Jason.电信",
            "extra": "",
            "portraitUrl": "http://storage.zh.shangkelian.cn/uploads/2022/02/16/29b13f5301694721ad7acd8b8b67bbd9.jpg"
        }
    }, -->
<script>
    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
    import messageState from './messageState'
    import imBase from '../../mixins/imBase.js'

    export default {
        mixins: [
            imBase
        ],
        props: {
            message: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            isGroup: {
                type: Boolean,
                default: false
            }
        },
        components: {
            messageState
        },
        computed: {
            isRemote() {
                return this.message.messageDirection == 2
            },
            content() {
                return this.message.content
            }
        }
    }
</script>

<style lang="scss" scoped>
    .msg--file {
        display: flex;
        align-items: flex-end;

        .name {
            font-size: 24rpx;
            color: $text-gray-m;
        }

        .file {
            .img {
                width: 180rpx;
            }

            &.left {
                .img {
                    border-radius: 0 10rpx 10rpx 10rpx;
                }
            }

            &.right {
                .img {
                    border-radius: 10rpx 0 10rpx 10rpx;
                }
            }
        }

    }
</style>
