<template>
    <view class="sent--text">
        <input class="input" type="text" @focus="focus" @blur="blur" v-model="inputTxt" confirm-type="send"
            @confirm="sent" cursor-spacing="10" />
        <!-- <button class="button" size="mini" :disabled="disabled" @click="sent">发送</button> -->
    </view>
</template>

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

    export default {
        props: {
            conversationType: {
                type: Number,
                default: 0
            },
            targetId: {
                type: String,
                default: ''
            },
            inputTxt: {
                type: String,
                default: ''
            }
        },
        computed: {
            disabled() {
                return this.inputTxt.length === 0
            },
            sender() {
                return this.$store.getters.sender
            }
        },
        created() {
            RongIMLib.getTextMessageDraft(this.conversationType, this.targetId, ({
                draft
            }) => {
                draft ? this.inputTxt = draft : ''
            })
        },
        beforeDestroy() {
            RongIMLib.saveTextMessageDraft(this.conversationType, this.targetId, this.inputTxt, (res) => {
                console.log('销毁组件之前，保存草稿信息，但是没有执行', res);
            })
        },
        methods: {
            // 发送文本消息
            sent() {
                if (!this.disabled) {
                    RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
                    im.sentText(this.conversationType, this.targetId, this.inputTxt, this.sender, () => {
                        this.$emit('success')
                        this.inputTxt = ''
                    })
                }
            },
            focus() {
                this.$emit('focus')
            },
            blur() {
                this.$emit('blur')
            }
        }
    }
</script>

<style scoped lang="scss">
    .sent--text {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .input {
            background: #F3F6FB;
            height: 70rpx;
            width: 500rpx;
            border-radius: 10rpx;
            margin-right: 15rpx;
            padding: 0 20rpx;
        }
    }
</style>
