yunke/yunkes/src/components/VoiceClipModal.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getCustomers, getVoiceClips, matchVoiceClip, search } from '@/api'
import { mediaUrl } from '@/api/client'
import type { Customer, VoiceClip } from '@/api/types'
import { formatCallDuration, formatTime } from '@/utils/format'

/**
 * 长语音记录 modal —— 复刻云客「微信长语音列表」modal 的展示部分 +
 * 本地手动匹配（voice_clip ↔ customer）。
 *
 * 调用方传 `userId`（从 CallList 行传入，精确限定员工）。
 *
 * 匹配是本地写（PATCH /voice-clips/{id}/match）：把 voice_clip.matched_friend_id
 * 关联到 customer.friend_id，不回写云客。matched_friend_name 由后端在 GET 时
 * 经 Customer join 解析（remark > nickname > real_name > friend_id）。
 *
 * 录音播放采用 local-first：优先 `/api/media/{media_hash}`（本地化音频），
 * 回退到 `oss_file_name` 的 OSS 直链（mirrors CallList.playRecord）。
 */
const props = withDefaults(
  defineProps<{
    modelValue: boolean
    userId: string
    /** 本地通道标记（wechat / whatsapp）。 */
    channel?: string
    title?: string
    /** 该员工姓名，用于标题展示（可选）。 */
    staffName?: string | null
  }>(),
  {
    channel: 'wechat',
    title: '',
    staffName: null,
  },
)
const emit = defineEmits<{ 'update:modelValue': [boolean] }>()

const loading = ref(false)
const errorMsg = ref<string | null>(null)
const items = ref<VoiceClip[]>([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(10)

// 录音结束时间窗（el-date-picker datetimerange，clearable）。
const dateRange = ref<[Date, Date] | null>(null)

// 当前内联播放的片段。
const playingUrl = ref<string | null>(null)
const playingLabel = ref('')

// ----- 手动匹配 picker 状态 -----
// picker 对话框是否打开。
const pickerOpen = ref(false)
// 正在为其挑选客户的 voice_clip 行（picker 打开期间非空）。
const pickerRow = ref<VoiceClip | null>(null)
const pickerLoading = ref(false)
const pickerQuery = ref('')
// picker 当前展示的客户候选（默认 = 该员工最近活跃客户；输入查询后 = 全通道名搜索）。
const pickerResults = ref<Customer[]>([])
// PATCH 提交中（避免重复点击）。
const matching = ref(false)

const dialogTitle = computed(() => {
  if (props.title) return props.title
  const who = props.staffName || props.userId
  return `长语音记录 · ${who}`
})

const pickerTitle = computed(() => {
  const who = pickerRow.value?.user_real_name || pickerRow.value?.user_id || ''
  return who ? `选择匹配客户 · ${who}` : '选择匹配客户'
})

async function load(): Promise<void> {
  if (!props.userId) {
    items.value = []
    total.value = 0
    return
  }
  loading.value = true
  errorMsg.value = null
  try {
    let start: number | undefined
    let end: number | undefined
    if (dateRange.value && dateRange.value.length === 2) {
      start = dateRange.value[0].getTime()
      end = dateRange.value[1].getTime()
    }
    const res = await getVoiceClips({
      user_id: props.userId,
      channel: props.channel,
      start,
      end,
      page: page.value,
      page_size: pageSize.value,
    })
    items.value = res.items
    total.value = res.total
  } catch (e) {
    errorMsg.value = (e as Error).message
    ElMessage.error(`长语音记录加载失败：${(e as Error).message}`)
  } finally {
    loading.value = false
  }
}

function durationDisplay(row: VoiceClip): string {
  return row.duration_format || formatCallDuration(row.mp3_duration)
}

// ----- 录音异常检查（本地元数据判定，无网络/无后端） -----
interface Anomaly {
  type: string
  label: string
}

/**
 * 基于本地元数据判定单条 voice_clip 的异常：
 *   - 无录音文件（oss_file_name 缺失）
 *   - 时长为 0（mp3_duration 缺失或为 0）
 *   - 时间缺失（start_time / end_time 缺失）
 * 纯前端计算，仅作用于当前已加载分页（≤50 条），不涉及服务端查询。
 */
function clipAnomalies(clip: VoiceClip): Anomaly[] {
  const anomalies: Anomaly[] = []
  if (!clip.oss_file_name) anomalies.push({ type: 'no_file', label: '无录音文件' })
  if (!clip.mp3_duration || clip.mp3_duration === 0) {
    anomalies.push({ type: 'zero_duration', label: '时长为0' })
  }
  if (!clip.start_time || !clip.end_time) {
    anomalies.push({ type: 'no_time', label: '时间缺失' })
  }
  return anomalies
}

// 「仅看异常」开关：开启时仅展示当前分页内命中异常的片段。
const onlyAnomaly = ref(false)

// 当前分页命中异常的片段数量（用于"N 条异常"汇总，不受开关影响）。
const anomalyCount = computed(() => items.value.filter((c) => clipAnomalies(c).length > 0).length)

// 表格实际渲染的数据：开关 ON 时过滤为仅异常项，OFF 时原样展示。
const displayItems = computed(() =>
  onlyAnomaly.value ? items.value.filter((c) => clipAnomalies(c).length > 0) : items.value,
)

function playClip(row: VoiceClip): void {
  // Local-first: 优先本地化的 /api/media/{media_hash}，回退到 OSS 直链
  // (mirrors CallList.playRecord)。
  const local = row.media_hash ? mediaUrl(row.media_hash) : null
  const url = local ?? row.oss_file_name
  if (!url) {
    ElMessage.info('该片段无录音文件')
    return
  }
  playingUrl.value = url
  const who = row.user_real_name || row.user_id
  const when = formatTime(row.end_time)
  playingLabel.value = `${who}${when !== '--' ? ` · ${when}` : ''}`
}

function closePlaying(): void {
  playingUrl.value = null
  playingLabel.value = ''
}

function onFilterChange(): void {
  page.value = 1
  load()
}

function resetFilters(): void {
  dateRange.value = null
  page.value = 1
  load()
}

function handlePageChange(p: number): void {
  page.value = p
  load()
}

function handlePageSizeChange(s: number): void {
  pageSize.value = s
  page.value = 1
  load()
}

// ----- 手动匹配 picker 逻辑 -----

/** 客户显示名（与后端 matched_friend_name 解析口径一致：remark > nickname > real_name > friend_id）。 */
function customerName(c: Customer): string {
  return c.friend_remark || c.friend_nickname || c.real_name || c.friend_id
}

/** 打开 picker：先按员工+通道加载默认候选（最近活跃客户），清空查询框。 */
async function openPicker(row: VoiceClip): Promise<void> {
  pickerRow.value = row
  pickerQuery.value = ''
  pickerOpen.value = true
  pickerResults.value = []
  await loadPickerDefaults()
}

/** 默认候选：该员工、该通道下的客户（最近活跃在前）。失败不阻塞（用户可走名搜索）。 */
async function loadPickerDefaults(): Promise<void> {
  if (!pickerRow.value) return
  pickerLoading.value = true
  try {
    const res = await getCustomers({
      user_id: pickerRow.value.user_id,
      channel: props.channel as 'wechat' | 'whatsapp',
      page: 1,
      page_size: 20,
    })
    pickerResults.value = res.items
  } catch {
    // 默认列表加载失败时静默——用户仍可在搜索框输入查询走 /search 路径。
    pickerResults.value = []
  } finally {
    pickerLoading.value = false
  }
}

/** 名字查询：走 /search（跨该通道全员工），覆盖默认按员工范围。 */
async function runPickerSearch(): Promise<void> {
  const q = pickerQuery.value.trim()
  if (!q) {
    await loadPickerDefaults()
    return
  }
  pickerLoading.value = true
  try {
    const res = await search({
      q,
      type: 'customers',
      channel: props.channel as 'wechat' | 'whatsapp',
      page: 1,
      page_size: 20,
    })
    pickerResults.value = res.customers?.items ?? []
  } catch (e) {
    ElMessage.error(`客户搜索失败：${(e as Error).message}`)
    pickerResults.value = []
  } finally {
    pickerLoading.value = false
  }
}

function onPickerQueryEnter(): void {
  runPickerSearch()
}

function clearPickerQuery(): void {
  pickerQuery.value = ''
  loadPickerDefaults()
}

/** 选定一个客户：PATCH 本地匹配 → 关闭 picker → 刷新主表（拿回 matched_friend_name）。 */
async function confirmMatch(c: Customer): Promise<void> {
  if (!pickerRow.value) return
  const row = pickerRow.value
  matching.value = true
  try {
    await matchVoiceClip(row.voice_clip_id, c.friend_id)
    ElMessage.success(`已匹配：${customerName(c)}`)
    pickerOpen.value = false
    pickerRow.value = null
    await load()
  } catch (e) {
    ElMessage.error(`匹配失败：${(e as Error).message}`)
  } finally {
    matching.value = false
  }
}

/** 取消匹配：二次确认 → PATCH friend_id=null → 刷新主表。 */
async function unmatch(row: VoiceClip): Promise<void> {
  try {
    await ElMessageBox.confirm(
      `确定取消该片段与「${row.matched_friend_name ?? row.matched_friend_id}」的匹配？`,
      '取消匹配',
      { type: 'warning', confirmButtonText: '取消匹配', cancelButtonText: '保留' },
    )
  } catch {
    return // 用户放弃
  }
  matching.value = true
  try {
    await matchVoiceClip(row.voice_clip_id, null)
    ElMessage.success('已取消匹配')
    await load()
  } catch (e) {
    ElMessage.error(`取消匹配失败：${(e as Error).message}`)
  } finally {
    matching.value = false
  }
}

watch(
  () => props.modelValue,
  (open) => {
    if (open) {
      page.value = 1
      dateRange.value = null
      playingUrl.value = null
      playingLabel.value = ''
      load()
    }
  },
)
</script>

<template>
  <el-dialog
    :model-value="modelValue"
    :title="dialogTitle"
    width="900px"
    align-center
    @update:model-value="emit('update:modelValue', $event)"
    @closed="closePlaying"
  >
    <!-- Filters: 录音结束时间范围（对齐云客 modal 三筛之一，本期只做时间窗） -->
    <div class="yk-voice-clip__filters">
      <span class="yk-voice-clip__filter-label">录音结束时间</span>
      <el-date-picker
        v-model="dateRange"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        size="small"
        format="YYYY-MM-DD HH:mm:ss"
        @change="onFilterChange"
      />
      <el-button link type="primary" size="small" @click="resetFilters">重置</el-button>
      <span class="yk-voice-clip__filter-spacer" />
      <el-switch v-model="onlyAnomaly" size="small" />
      <span class="yk-voice-clip__filter-label">仅看异常</span>
      <el-tag
        :type="anomalyCount > 0 ? 'danger' : 'success'"
        size="small"
        effect="plain"
        class="yk-voice-clip__anomaly-count"
      >
        {{ anomalyCount }} 条异常
      </el-tag>
    </div>

    <el-alert
      v-if="errorMsg"
      :title="errorMsg"
      type="error"
      show-icon
      :closable="false"
      style="margin-bottom: 8px"
    />

    <!-- Inline playback bar -->
    <div v-if="playingUrl" class="yk-voice-clip__player">
      <div class="yk-voice-clip__player-label">{{ playingLabel }}</div>
      <audio controls :src="playingUrl" preload="metadata" style="width: 100%">
        您的浏览器不支持音频播放。
      </audio>
      <a :href="playingUrl" target="_blank" rel="noopener" class="yk-voice-clip__player-link">
        在新窗口打开
      </a>
    </div>

    <el-table
      v-loading="loading"
      :data="displayItems"
      border
      size="small"
      style="width: 100%"
      empty-text="暂无长语音记录"
    >
      <el-table-column label="员工姓名" min-width="100">
        <template #default="{ row }">{{ row.user_real_name || row.user_id || '--' }}</template>
      </el-table-column>
      <el-table-column label="企业串码" prop="company_code" width="110">
        <template #default="{ row }">{{ row.company_code || '--' }}</template>
      </el-table-column>
      <el-table-column label="录音开始" min-width="150">
        <template #default="{ row }">{{ formatTime(row.start_time) }}</template>
      </el-table-column>
      <el-table-column label="录音结束" min-width="150">
        <template #default="{ row }">{{ formatTime(row.end_time) }}</template>
      </el-table-column>
      <el-table-column label="录音时长" width="100" align="right">
        <template #default="{ row }">{{ durationDisplay(row) }}</template>
      </el-table-column>
      <el-table-column label="录音异常" width="140" align="center">
        <template #default="{ row }">
          <template v-if="clipAnomalies(row).length">
            <el-tag
              v-for="a in clipAnomalies(row)"
              :key="a.type"
              type="danger"
              size="small"
              effect="light"
              style="margin: 2px"
            >
              {{ a.label }}
            </el-tag>
          </template>
          <span v-else style="color: #67c23a">✓</span>
        </template>
      </el-table-column>
      <el-table-column label="已匹配客户" min-width="120">
        <template #default="{ row }">
          <span v-if="row.matched_friend_id" :title="row.matched_friend_id">
            {{ row.matched_friend_name ?? row.matched_friend_id }}
          </span>
          <span v-else style="color: #c0c4cc">--</span>
        </template>
      </el-table-column>
      <el-table-column label="文件地址" min-width="160" show-overflow-tooltip>
        <template #default="{ row }">
          <span v-if="row.oss_file_name" class="yk-voice-clip__url" :title="row.oss_file_name">
            {{ row.oss_file_name }}
          </span>
          <span v-else style="color: #c0c4cc">--</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="170" align="center" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="openPicker(row)">匹配</el-button>
          <el-button
            v-if="row.matched_friend_id"
            link
            type="warning"
            size="small"
            :disabled="matching"
            @click="unmatch(row)"
          >
            取消匹配
          </el-button>
          <el-button
            v-if="row.oss_file_name"
            link
            type="primary"
            size="small"
            @click="playClip(row)"
          >
            播放
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="yk-voice-clip__pager">
      <el-pagination
        :current-page="page"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next"
        background
        size="small"
        @current-change="handlePageChange"
        @size-change="handlePageSizeChange"
      />
    </div>

    <!-- 客户选择 picker（嵌套 dialog） -->
    <el-dialog
      v-model="pickerOpen"
      :title="pickerTitle"
      width="640px"
      append-to-body
      align-center
      @closed="pickerRow = null"
    >
      <div class="yk-voice-clip__picker-search">
        <el-input
          v-model="pickerQuery"
          placeholder="按姓名/备注搜索客户；留空显示该员工最近客户"
          size="small"
          clearable
          @keyup.enter="onPickerQueryEnter"
          @clear="clearPickerQuery"
        />
        <el-button type="primary" size="small" @click="runPickerSearch">搜索</el-button>
      </div>

      <el-table
        v-loading="pickerLoading"
        :data="pickerResults"
        border
        size="small"
        style="width: 100%"
        max-height="360"
        empty-text="无候选客户，请尝试搜索"
      >
        <el-table-column label="名称" min-width="160">
          <template #default="{ row: c }">{{ customerName(c) }}</template>
        </el-table-column>
        <el-table-column label="备注" min-width="120">
          <template #default="{ row: c }">{{ c.friend_remark || '--' }}</template>
        </el-table-column>
        <el-table-column label="昵称" min-width="120">
          <template #default="{ row: c }">{{ c.friend_nickname || '--' }}</template>
        </el-table-column>
        <el-table-column label="所属员工" min-width="110">
          <template #default="{ row: c }">{{ c.sale_name || c.owner_account_id || '--' }}</template>
        </el-table-column>
        <el-table-column label="操作" width="90" align="center" fixed="right">
          <template #default="{ row: c }">
            <el-button
              type="primary"
              link
              size="small"
              :disabled="matching"
              @click="confirmMatch(c)"
            >
              选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <template #footer>
      <el-button @click="emit('update:modelValue', false)">关闭</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.yk-voice-clip__filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.yk-voice-clip__filter-label {
  font-size: 13px;
  color: #606266;
}

.yk-voice-clip__filter-spacer {
  flex: 1 1 auto;
}

.yk-voice-clip__anomaly-count {
  margin-left: 4px;
}

.yk-voice-clip__player {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.yk-voice-clip__player-label {
  font-size: 12px;
  color: #606266;
}

.yk-voice-clip__player-link {
  font-size: 12px;
  color: var(--el-color-primary, #409eff);
  align-self: flex-end;
}

.yk-voice-clip__url {
  color: #909399;
  font-size: 12px;
  word-break: break-all;
}

.yk-voice-clip__pager {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.yk-voice-clip__picker-search {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
</style>