<template>
  <el-dialog
    :visible.sync="innerVisible"
    width="560px"
    append-to-body
    custom-class="sip-recording-dialog"
    :show-close="true"
    @close="handleClose"
  >
    <div slot="title" class="sip-dlg-title">
      <div class="sip-dlg-title-main">
        <i class="el-icon-headset sip-dlg-title-icon"></i>
        <span>{{ title }}</span>
      </div>
      <div v-if="subtitle" class="sip-dlg-title-sub">{{ subtitle }}</div>
    </div>

    <div class="sip-audio-card" v-loading="audioLoading">
      <div class="sip-audio-label">
        <i class="el-icon-video-play"></i>
        <span>通话录音</span>
      </div>
      <audio
        v-if="audioUrl"
        ref="playAudio"
        :src="audioUrl"
        controls
        preload="auto"
        class="sip-audio-player"
      >您的浏览器不支持音频播放</audio>
      <div v-else-if="!audioLoading" class="sip-empty-tip">暂无录音文件</div>
    </div>

    <div class="sip-chat-wrap">
      <div class="sip-chat-head">
        <span>对话记录</span>
        <span v-if="totalCount" class="sip-chat-count">共 {{ totalCount }} 条</span>
      </div>

      <div ref="chatPanel" class="sip-chat-panel">
        <div v-if="messages.length" class="sip-chat-list">
          <div class="sip-chat-tip">以下为通话转写内容</div>
          <div
            v-for="(msg, index) in messages"
            :key="index"
            class="sip-chat-row"
            :class="msg.role === 'user' ? 'is-user' : 'is-assistant'"
          >
            <div class="sip-chat-avatar" :class="msg.role === 'user' ? 'avatar-user' : 'avatar-ai'">
              {{ roleAvatarText(msg) }}
            </div>
            <div class="sip-chat-body">
              <div class="sip-chat-role">{{ roleLabelText(msg) }}</div>
              <div class="sip-chat-bubble">{{ msg.content }}</div>
            </div>
          </div>
        </div>
        <div v-else class="sip-empty-tip sip-empty-chat">暂无对话记录</div>
      </div>

      <div v-if="totalCount > pageSize" class="sip-chat-more">
        <el-button
          v-if="hasMore"
          type="text"
          size="small"
          icon="el-icon-arrow-down"
          @click="$emit('load-more')"
        >加载更多（已显示 {{ messages.length }}/{{ totalCount }}）</el-button>
        <el-button
          v-if="canCollapse"
          type="text"
          size="small"
          icon="el-icon-arrow-up"
          @click="$emit('collapse')"
        >收起</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'SipRecordingPlayDialog',
  props: {
    visible: { type: Boolean, default: false },
    title: { type: String, default: '通话回放' },
    subtitle: { type: String, default: '' },
    audioUrl: { type: String, default: '' },
    audioLoading: { type: Boolean, default: false },
    messages: { type: Array, default: () => [] },
    totalCount: { type: Number, default: 0 },
    pageSize: { type: Number, default: 8 },
    hasMore: { type: Boolean, default: false },
    canCollapse: { type: Boolean, default: false }
  },
  computed: {
    innerVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    roleAvatarText(msg) {
      const raw = (msg && (msg.rawRole || msg.role)) || ''
      if (raw === 'user') return '客'
      if (raw === 'agent') return '坐'
      return 'AI'
    },
    roleLabelText(msg) {
      const raw = (msg && (msg.rawRole || msg.role)) || ''
      if (raw === 'user') return '客户'
      if (raw === 'agent') return '坐席'
      return 'AI 助手'
    },
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>

<style>
/* 非 scoped：custom-class 挂在 body 下的 dialog */
.sip-recording-dialog {
  border-radius: 12px;
  overflow: hidden;
}
.sip-recording-dialog .el-dialog__header {
  padding: 16px 20px 10px;
  border-bottom: 1px solid #f0f0f0;
}
.sip-recording-dialog .el-dialog__body {
  padding: 14px 16px 18px;
  background: #f5f6f8;
}
</style>

<style scoped>
.sip-dlg-title-main {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1f2329;
}
.sip-dlg-title-icon {
  color: #07c160;
  font-size: 18px;
}
.sip-dlg-title-sub {
  margin-top: 4px;
  margin-left: 26px;
  font-size: 12px;
  color: #8a8f98;
  font-weight: 400;
}
.sip-audio-card {
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  min-height: 72px;
}
.sip-audio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #646a73;
  margin-bottom: 8px;
}
.sip-audio-label i {
  color: #07c160;
}
.sip-audio-player {
  width: 100%;
  height: 36px;
  outline: none;
}
.sip-chat-wrap {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.sip-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2329;
}
.sip-chat-count {
  font-weight: 400;
  color: #8a8f98;
  font-size: 12px;
}
.sip-chat-panel {
  background: #ededed;
  max-height: 420px;
  overflow-y: auto;
  padding: 12px 12px 8px;
}
.sip-chat-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sip-chat-tip {
  align-self: center;
  font-size: 12px;
  color: #999;
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 10px;
  border-radius: 3px;
  margin-bottom: 2px;
}
.sip-chat-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.sip-chat-row.is-user {
  flex-direction: row-reverse;
}
.sip-chat-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 36px;
  text-align: center;
  font-weight: 600;
}
.avatar-user {
  background: #95ec69;
  color: #1a1a1a;
}
.avatar-ai {
  background: #fff;
  color: #576b95;
  border: 1px solid #e5e5e5;
}
.sip-chat-body {
  max-width: 74%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sip-chat-row.is-user .sip-chat-body {
  align-items: flex-end;
}
.sip-chat-role {
  font-size: 11px;
  color: #999;
  padding: 0 2px;
}
.sip-chat-bubble {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: #111;
  word-break: break-word;
  white-space: pre-wrap;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.sip-chat-row.is-assistant .sip-chat-bubble {
  background: #fff;
  border-top-left-radius: 2px;
}
.sip-chat-row.is-user .sip-chat-bubble {
  background: #95ec69;
  border-top-right-radius: 2px;
}
.sip-empty-tip {
  text-align: center;
  color: #999;
  font-size: 13px;
  padding: 18px 0;
}
.sip-empty-chat {
  background: #ededed;
  margin: 0;
  padding: 48px 0;
}
.sip-chat-more {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 8px 12px 12px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
}
.sip-chat-more .el-button {
  color: #576b95;
}
</style>
