<script setup>
import { PlayCircleFilled } from "@ant-design/icons-vue";

defineProps({ order: { type: Object, required: true }, records: { type: Array, default: () => [] }, expanded: Boolean });
defineEmits(["update:expanded"]);
</script>

<template>
  <div>
    <section class="detail-section"><div class="section-title">12398 工单基础信息</div><div class="info-grid"><div><span>12398工单编号</span><strong>{{ order.no }}</strong></div><div><span>工单状态</span><strong>{{ order.status }}</strong></div><div><span>信息来源</span><strong>{{ order.source }}</strong></div><div><span>客户致电12398日期</span><strong>{{ order.calledAt }}</strong></div><div><span>转办日期</span><strong>{{ order.transferredAt }}</strong></div><div><span>客户名称</span><strong>{{ order.customerName }}</strong></div><div><span>联系方式</span><strong>{{ order.phone }}</strong></div><div><span>用户地址</span><strong>{{ order.address }}</strong></div><div><span>客户所在地区(省)</span><strong>{{ order.region }}</strong></div><div><span>省份</span><strong>{{ order.province }}</strong></div><div><span>事件类型</span><strong>{{ order.eventType }}</strong></div><div><span>转办事项分类</span><strong>{{ order.transferCategory }}</strong></div><div><span>问题分类</span><strong>{{ order.problemCategory }}</strong></div><div><span>责任类型</span><strong>{{ order.responsibilityType }}</strong></div></div></section>
    <section class="detail-section"><div class="section-title service-title"><span>95598 业务处理信息</span><button class="text-button" @click="$emit('update:expanded',!expanded)">{{ expanded ? '收起' : '展开' }}</button></div><div v-if="expanded" class="table-wrap"><table class="data-table service-table"><thead><tr><th>序号</th><th>工单编号</th><th>受理内容</th><th>业务类型</th><th>受理时间</th><th>供电单位</th><th>录音</th><th>转译文本</th></tr></thead><tbody><tr v-for="record in records" :key="record.id"><td>{{ record.id }}</td><td>{{ record.no }}</td><td>{{ record.content }}</td><td>{{ record.type }}</td><td>{{ record.acceptedAt }}</td><td>{{ record.company }}</td><td><button class="audio-button"><PlayCircleFilled /><span>{{ record.duration }}</span></button></td><td>{{ record.transcript }}</td></tr></tbody></table></div></section>
  </div>
</template>
