<script setup>
import LiveCallItem from '@/components/liveCall/LiveCallItem.vue'
import {getHistoryCallContent} from '@/api/workbench';

const dialogVisible = ref(false);
const recordLeftRef = ref(null);
const props = defineProps({
  rowData: String
})

const open = (row) => {
  dialogVisible.value = true;
};

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

const recordLeftObj = ref({
  content: []
});
const convertArrayToMap=(array)=> {
  const map = new Map();
  array.forEach(item => {
    // 如果时间戳对应的键已经存在，则添加到现有数组中
    if (map.has(item.conversationTimestamp)) {
      map.get(item.conversationTimestamp).push(item);
    } else {
      // 否则，创建一个新的数组并添加元素
      map.set(item.conversationTimestamp, [item]);
    }
  });
  return map;
}

watch(() => props.rowData, async (newVal) => {
  recordLeftObj.value.content = []
  // let map1 = new Map()
  await getHistoryCallContent(newVal).then(res => {
    res.data?.forEach(item => {
      item.textVoList = convertArrayToMap(item.textVoList);
    })
    recordLeftObj.value = res.data
    // console.info("🚀 ~method:res.data -----", res.data)
    if (res.data && res.data.length > 0) {
      leftHeadData.value.username = res.data[0].callIdNumber || '--';
      leftHeadData.value.phone = res.data[0].callPhone || '--';
      leftHeadData.value.orderName = res.data[0].orderName || '--';
    }
  })
})

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" class="box">
    <LiveCallItem ref="recordLeftRef" :recordArray="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>
