<template>
    <view class="messageBar">
        <!-- footer -->
        <view class="footer">
            <view class="msg-type" @click="changeMessageType">
                <image class="icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix" />
                <image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix" />
            </view>
            <sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId" @success="onSuccess" />
            <sent-text ref="textView" v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId" @success="onSuccess" @blur="onBlur"  />
            <view class="msg-type msg-popups" @click="onShowEmoji">
                <image class="icon" src="@/static/icon/emoji-icon.png" /> 
                <!-- 考虑唤起键盘，暂时保留v-show -->
                <!-- <image v-show="!showEmoji" class="icon" src="@/static/icon/emoji-icon.png" /> -->
                <!-- <image v-show="showEmoji" class="icon" src="@/static/icon/key-icon.png" /> -->
            </view>
            <view class="msg-type msg-popups" @click="() => {showPopups = !showPopups, showEmoji = false}"> <image class="icon" src="@/static/icon/popups-icon.png" /> </view>
        </view>
        <!-- 弹出层 -->
        <sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId" @success="() => {showPopups = false, onSuccess()}" />
        <!-- 表情包 -->
        <sent-emoji :show="showEmoji" @onEmoji="onEmoji" @delete="onDelete" @sent="onSent"></sent-emoji>
    </view>
</template>

<script>
    import sentText from './sent/sentText'
    import sentVoice from './sent/sentVoice'
    import sentPopups from './sent/sentPopups'
    import sentEmoji from './sent/sentEmoji'

    export default {
        props: {
            conversationType: {
                type: Number,
                default: 0
            },
            targetId: {
                type: String,
                default: ''
            }
        },
        components: {
            sentText,
            sentVoice,
            sentPopups,
            sentEmoji
        },
        data() {
            return {
                chatType    : 1, // 0 语音，1 文本
                showPopups  : false,
                showEmoji   : false,
                chatText    : {
                    value   : "",
                    cursor  : 0
                }
            }
        },
        methods: {
            // 切换聊天类型，语音/文本
            changeMessageType() {
                this.chatType = this.chatType === 1 ? 0 : 1
                if(this.showEmoji) this.showEmoji = false
                if(this.showPopups) this.showPopups = false
            },
            onSuccess() {
                this.$emit('onSuccess')
            },
            // 处理弹出层
            onHidePopus(){
                if(this.showPopups){
                    this.showPopups = false
                }
            },
            // 输入表情
            onEmoji(e){
                let atMsg  = this.chatText
                let newMsg = () => {
                    return atMsg.value.slice(0, atMsg.cursor) + e.emoji + atMsg.value.slice(atMsg.cursor)
                }
                atMsg.value = newMsg()
                atMsg.cursor += 2
                // 全局通讯
                uni.$emit('emojiValue', atMsg)
            },
            // 删除表情
            onDelete(){
                console.log('删除')
            },
            // 发送消息
            onSent(){
                this.$refs.textView.sent()
                this.chatText = {
                    value   : "",
                    cursor  : 0
                }
            },
            // 获取输入框文字最新状态
            onBlur(e){
                this.chatText = e
            },
            // 显示emoji表情
            onShowEmoji(){
                this.showEmoji = !this.showEmoji
                this.chatType = 1
                if(this.showPopups) this.showPopups = false
            }
        }
    }
</script>

<style lang="scss" scoped>
    .messageBar{
        border-radius: ($radius*2) ($radius*2) 0 0;
        background: white;
        .footer {
            padding: 20rpx 30rpx;
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            .msg-type {
                width: 70rpx;
                height: 70rpx;
        
                .icon {
                    margin: 5rpx;
                    width: 60rpx;
                    height: 60rpx;
                }
            }
        }
    }
</style>
