<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 v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId" @success="onSuccess" />
            <view class="msg-type msg-popups" @click="showPopups = !showPopups"> <image class="icon" src="@/static/icon/popups-icon.png" /> </view>
        </view>
        <!-- 弹出层 -->
        <sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId" @success="() => {showPopups = false, onSuccess()}" />
    </view>
</template>

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

    export default {
        props: {
            conversationType: {
                type: Number,
                default: 0
            },
            targetId: {
                type: String,
                default: ''
            }
        },
        components: {
            sentText,
            sentVoice,
            sentPopups
        },
        data() {
            return {
                chatType: 1, // 0 语音，1 文本
                showPopups: false
            }
        },
        methods: {
            // 切换聊天类型，语音/文本
            changeMessageType() {
                this.chatType = this.chatType === 1 ? 0 : 1
            },
            onSuccess() {
                this.$emit('onSuccess')
            },
            // 处理弹出层
            onHidePopus(){
                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>
