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

<script>
    import sentText from '../components/sentText'
    import sentVoice from '../components/sentVoice'
    import sentPopups from '../components/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')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .footer {
        background: white;
        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>
