<template>
	<div class="call-summary">
		<el-scrollbar class="h100 transition-box-content" ref="scrollbarRef" max-height="400" v-loading="loading">
			<template v-if="!invalidId">
				<div class="call-box">
          <el-form label-width="100px">
            <el-form-item label="客户姓名：">
              <div class="break">
                {{ recognizeList?.name }}
              </div>
            </el-form-item>
<!--            <el-form-item label="年龄：">
              <div class="break">
                {{ recognizeList?.age }}
              </div>
            </el-form-item>
            <el-form-item label="性别：">
              <div class="break">
                {{ recognizeList?.sex }}
              </div>
            </el-form-item>
            <el-form-item label="身份证号：">
              <div class="break">
                {{ recognizeList?.id_card }}
              </div>
            </el-form-item>-->
            <el-form-item label="地址：">
              <div class="break">
                {{ recognizeList?.address }}
              </div>
            </el-form-item>
<!--            <el-form-item label="公司名称：">
              <div class="break">
                {{ recognizeList?.company_name }}
              </div>
            </el-form-item>
            <el-form-item label="通话小结：">
              <div class="break">
                {{ recognizeList?.call_detail_content }}
              </div>
            </el-form-item>
            <el-form-item label="受理类型：">
              <di class="break"v>
                {{ recognizeList?.acceptance_type }}
              </div>
            </el-form-item>
            <el-form-item label="推送分类：">
              <div class="break">
                {{ recognizeList?.push_classification }}
              </div>
            </el-form-item>
            <el-form-item label="热点分类：">
              <div class="break">
                {{ recognizeList?.hotspot_classification }}
              </div>
            </el-form-item>
            <el-form-item label="事件目的：">
              <div class="break">
                {{ recognizeList?.event_purpose }}
              </div>
            </el-form-item>
            <el-form-item label="工单标题：">
              <div class="break">
                {{ recognizeList?.record_title }}
              </div>
            </el-form-item>
            <el-form-item label="诉求详情：">
              <div class="break">
                {{ recognizeList?.appeal_detatls }}
              </div>
            </el-form-item>-->
          </el-form>
        </div>
				<div class="flex-center-center mt10">
					<el-button type="primary" @click="fillSingle" round>一键填单</el-button>
					<el-button @click="onRefresh" class="default-button" round>刷新</el-button>
				</div>
			</template>
      <el-empty v-else :image-size="100"/>
		</el-scrollbar>
	</div>
</template>
<script setup lang="ts" name="orderAcceptCallSummary">
import { computed, ref } from 'vue';
import { voiceAssistantContent } from '@/api/todo/voiceAssistant';
import { useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';

const emit = defineEmits(['orderOverwrite', 'close']);
const recognizeList = ref<EmptyObjectType>({}); // 识别信息
// 获取识别内容
const route = useRoute();
const loading = ref(false);
// 无效id
const invalidId = computed(() => {
	return !route.query.callId || route.query.callId.length === 13;
});
const getRecognize = async () => {
	loading.value = true;
	try {
		const callId = route.query.callId;
		if (invalidId.value) {
			// ElMessage.info('暂未获取到通话ID,请关闭页面重新进入重试');
			loading.value = false;
			return;
		}
		const { result } = await voiceAssistantContent(typeof callId === 'string' ? callId : '');
		recognizeList.value = result;
		loading.value = false;
	} catch (error) {
		console.log('获取识别内容失败', error);
		loading.value = false;
		ElMessage.error('获取识别内容失败');
	}
};
// 一键填单
const fillSingle = () => {
	ElMessageBox.confirm(`确定要一键填单吗？填单后会覆盖之前填写的内容，请谨慎操作`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			emit('orderOverwrite', recognizeList.value);
		})
		.catch(() => {});
};
const onRefresh = () => {
	getRecognize();
};
defineExpose({
	getRecognize,
});
</script>
<style scoped lang="scss">
.call-summary {
	.transition-box-content {
		max-height: 400px;
    .call-box{
      padding: 10px 20px 0 20px;
    }
	}
  .break{
    word-break: break-all;
  }
}
</style>
