<script setup>
import LiveCallItem from '@/components/liveCall/liveCallItem.vue'
const dialogVisible = ref(false);
const recordLeftRef = ref(null);
const open = (row) => {
    dialogVisible.value = true;
};

const leftHeadData = ref({
    username: '张三',
    phone: '13546812315',
    orderName: '张三工单',
})

const recordLeftObj = ref({
    content: []
});

const scrollToBottom = (scrollbarRef) => {
    if (scrollbarRef) {
        const container = scrollbarRef.$el.querySelector('.el-scrollbar__wrap');
        container.style.scrollBehavior = 'smooth'; // 添加平滑滚动效果
        container.scrollTop = container.scrollHeight;
    }
};

scrollToBottom(recordLeftRef.value)

defineExpose({
    open,
});

</script>

<template>
    <el-dialog v-model="dialogVisible" title="历史通话记录" width="600" :before-close="handleClose" class="box">
        <LiveCallItem ref="recordLeftRef" :recordObj="recordLeftObj" :headData="leftHeadData" style="width: 100%;" />
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">
                    关闭
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style>
.box {
    height: 68vh;
}
</style>
