<template>
    <div class="panel-box">
        <div class="panel-item" @click="handleCall">
            <image class="panel-icon" :src="CallVideoIcon"></image>
        </div>
        <text class="panel-text">视频通话</text>
    </div>
</template>

<script lang="ts" setup>
import { useConversationListState } from '../../../states/ConversationListState';
import { removeC2C } from '../../../utils'
import CallVideoIcon from '../../../assets/chat/call-video.svg'
import { TUIBridge } from '../../../TUIBridge';
import { EVENT } from '../../../constants/event';

const emit = defineEmits(['closePanel', 'showUserPicker']);
const { activeConversation } = useConversationListState();

const handleCall = () => {
    emit('closePanel');

    if (activeConversation.value?.type === 'GROUP') {
        // 群聊：触发显示用户选择器事件
        emit('showUserPicker', { type: 2 });
    } else {
        // 单聊：直接呼叫
        const userID = removeC2C(activeConversation.value.conversationID);
        TUIBridge.notifyEvent({
            eventName: EVENT.ON_CALLS,
            params: {
                userIDList: [userID],
                type: 2,
            },
        });
    }
};
</script>

<style lang="scss" scoped>
@import './AttachmentPicker.module.scss';
</style>