<template>
    <view class="sent--text">
        <input class="input" type="text" :auto-blur="true" @focus="focus" @blur="blur" :focus="focusState"
            v-model="inputTxt" confirm-type="send" @confirm="sent" cursor-spacing="10" />
    </view>
</template>

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

    export default {
        mixins: [
            imBase
        ],
        props: {
            conversationType: {
                type: Number,
                default: 0
            },
            targetId: {
                type: String,
                default: ''
            }
        },
        computed: {
            disabled() {
                return this.inputTxt.length === 0
            }
        },
        mounted() {
            RongIMLib.getTextMessageDraft(this.conversationType, this.targetId, ({
                draft
            }) => {
                draft ? this.inputTxt = draft : ''
            })
        },
        beforeDestroy() {
            // 保存草稿
            RongIMLib.saveTextMessageDraft(this.conversationType, this.targetId, this.inputTxt)
        },
        data() {
            return {
                focusState: false,
                inputTxt: ''
            }
        },
        methods: {
            sent() {
                if (!this.disabled) {
                    im.sentText(this.conversationType, this.targetId, this.inputTxt, this.sender, () => {
                        RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
                        this.$emit('success')
                        this.inputTxt = ''
                    })
                }
            },
            focus() {
                this.$emit('focus')
            },
            blur() {
                uni.hideKeyboard()
                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: 460rpx;
            border-radius: 10rpx;
            margin-right: 15rpx;
            padding: 0 20rpx;
        }
    }
</style>
