<template>
  <div class="customer-group-details-container">
    <el-card class="main-card">
      <div class="section-header">
        <i class="el-icon-data-analysis section-icon"></i>
        <h2 class="section-title">数据统计</h2>
      </div>
      <div class="statistics-container">
        <el-row :gutter="24">
          <el-col :span="8" v-for="item in firstRowStats" :key="item.label">
            <el-card class="statistic-card">
              <div class="statistic-content">
                <div class="statistic-value">{{ item.count }}</div>
                <div class="statistic-label">{{ item.label }}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-top: 24px">
          <el-col :span="8" v-for="item in secondRowStats" :key="item.label">
            <el-card class="statistic-card">
              <div class="statistic-content">
                <div class="statistic-value">{{ item.count }}</div>
                <div class="statistic-label">{{ item.label }}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card class="main-card">
      <div class="section-header">
        <i class="el-icon-phone-outline section-icon"></i>
        <h2 class="section-title">呼叫详情</h2>
      </div>

      <div class="search-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="120px">
          <el-form-item label="成员姓名" prop="nickName">
            <el-input
              v-model="queryParams.nickName"
              placeholder="请输入想查询的成员姓名"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
              prefix-icon="el-icon-search"
            />
          </el-form-item>
          <el-form-item label="客户名称" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入想查询的客户姓名"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
              prefix-icon="el-icon-user"
            />
          </el-form-item>
          <el-form-item label="呼叫状态" prop="sendStatus">
              <el-select v-model="queryParams.sendStatus" placeholder="请选择客户拨通状态">
                <el-option v-for="item in groupMsgSendStatusOptions"
                           :key="item.dictValue"
                           :label="item.dictLabel"
                           :value="item.dictValue">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table v-loading="loading" :data="groupMsgUserDetailsList" class="data-table" stripe>
        <el-table-column label="企微成员" align="center" prop="nickName" />
        <el-table-column label="客户" align="center" prop="name" >
          <template slot-scope="scope">
            <div class="customer-info">
              <el-image
                v-if="scope.row.avatar"
                class="customer-avatar"
                :src="scope.row.avatar"
                fit="cover"
                @click="openImageViewer(scope.row.avatar)"
              />
              <span class="customer-name">{{scope.row.name}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="预呼叫时间" align="center" prop="sendTime" />
        <el-table-column label="呼叫状态" align="center" prop="sendStatus" >
          <template slot-scope="scope">
            <dict-tag :options="groupMsgSendStatusOptions" :value="scope.row.sendStatus"/>
          </template>
        </el-table-column>
        <el-table-column label="会话Id" align="center" prop="sessionId" />
        <el-table-column label="外呼开始" align="center">
          <template slot-scope="scope">
            {{ scope.row.startCallTime ? $moment(scope.row.startCallTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}
          </template>
        </el-table-column>
        <el-table-column label="外呼结束" align="center">
          <template slot-scope="scope">
            {{ scope.row.endCallTime ? $moment(scope.row.endCallTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}
          </template>
        </el-table-column>
        <el-table-column label="外呼时长" align="center" prop="durationMsStr" />
        <el-table-column label="通话详情" align="center">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.sessionId ? '查看通话详情' : '无通话记录'" placement="top">
              <el-button
                :type="scope.row.sessionId ? 'primary' : 'info'"
                size="mini"
                :disabled="!scope.row.sessionId"
                @click="scope.row.sessionId && handleViewCallDetails(scope.row.sessionId)"
                v-hasPermi="['qw:groupVoiceMsgUser:details:queryBySessionId']"
                :icon="scope.row.sessionId ? 'el-icon-view' : 'el-icon-close-notification'"
                class="detail-btn"
              >
                {{ scope.row.sessionId ? '查看详情' : '无详情' }}
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getUserList"
        />
      </div>
    </el-card>

    <!-- 通话详情弹窗 -->
    <el-dialog
      title="通话详情"
      :visible.sync="callDetailsDialogVisible"
      width="60%"
      class="detail-dialog"
      append-to-body
      :close-on-click-modal="false"
    >
      <div v-loading="callDetailsLoading">
        <div v-if="callDetails">
          <!-- 基本信息 -->
          <el-card class="info-card">
            <div slot="header" class="info-header">
              <span class="info-title"><i class="el-icon-info"></i> 通话概况</span>
            </div>
            <div class="info-grid">
              <div class="info-item session-id">
                <div class="info-icon session-id-bg">
                  <i class="el-icon-connection"></i>
                </div>
                <div class="info-content">
                  <div class="info-label">会话ID</div>
                  <div class="info-value session-id-value">
                    {{ callDetails.sessionId || '-' }}
                    <el-tooltip content="复制会话ID" placement="top">
                      <el-button
                        v-if="callDetails.sessionId"
                        type="text"
                        size="mini"
                        icon="el-icon-document-copy"
                        @click="copySessionId(callDetails.sessionId)"
                        class="copy-btn"
                      />
                    </el-tooltip>
                  </div>
                </div>
              </div>

              <div class="info-item agent">
                <div class="info-icon agent-bg">
                  <i class="el-icon-service"></i>
                </div>
                <div class="info-content">
                  <div class="info-label">客服</div>
                  <div class="info-value">{{ callDetails.aiSopCallRoleName || '-' }}</div>
                </div>
              </div>

              <div class="info-item customer">
                <div class="info-icon customer-bg">
                  <i class="el-icon-user"></i>
                </div>
                <div class="info-content">
                  <div class="info-label">用户</div>
                  <div class="info-value">{{ callDetails.qwUserNickName || '-' }}</div>
                </div>
              </div>

              <el-tooltip
                :content="getSatisfactionTooltip()"
                placement="top"
              >
                <div class="info-item satisfaction">
                  <div class="info-icon satisfaction-bg">
                    <i class="el-icon-star-on"></i>
                  </div>
                  <div class="info-content">
                    <div class="info-label">满意度</div>
                    <div class="info-value satisfaction-stars">
                      <span
                        v-for="star in 5"
                        :key="star"
                        :class="['star', getStarClass(star)]"
                      >
                        <i :class="getStarIcon(star)"></i>
                      </span>
                    </div>
                  </div>
                </div>
              </el-tooltip>
            </div>
          </el-card>

          <!-- 聊天记录 -->
          <el-card class="chat-card">
            <div slot="header" class="info-header">
              <span class="info-title"><i class="el-icon-chat-line-round"></i> 聊天记录</span>
            </div>
            <chat-record-viewer
              :chat-data="callDetails.aiChatDetails"
              :initial-display-count="4"
              :agent-name="callDetails.aiSopCallRoleName"
              :customer-name="callDetails.externalUserName"
              class="chat-viewer"
            />
          </el-card>

          <!-- 语音记录 -->
          <el-card class="voice-card">
            <div slot="header" class="info-header">
              <span class="info-title"><i class="el-icon-microphone"></i> 语音记录</span>
            </div>
            <div class="voice-container">
              <div v-if="callDetails.voiceText" class="voice-list">
                <!-- 只显示前两条语音 -->
                <div v-for="(voice, index) in getVoiceList(callDetails.voiceText).slice(0, 2)"
                     :key="index"
                     class="voice-item">
                  <div class="voice-row">
                    <div class="voice-info">
                      <i class="el-icon-headset voice-icon"></i>
                      <span class="voice-title">语音{{ getChineseNumber(index + 1) }}</span>
                    </div>
                    <div class="voice-player">
                      <audio
                          :src="voice"
                          controls
                          class="audio-player"
                      ></audio>
                    </div>
                  </div>
                </div>

                <!-- 显示更多语音按钮（展开后隐藏） -->
                <div v-if="getVoiceList(callDetails.voiceText).length > 2 && !showAllVoices" class="expand-voice">
                  <el-button
                      type="text"
                      size="mini"
                      @click="showAllVoices = true"
                      class="expand-btn"
                  >
                    {{ `展开全部 (${getVoiceList(callDetails.voiceText).length - 2}条)` }}
                  </el-button>
                </div>

                <!-- 展开后的额外语音 -->
                <div v-if="showAllVoices">
                  <div v-for="(voice, index) in getVoiceList(callDetails.voiceText).slice(2)"
                       :key="index + 2"
                       class="voice-item">
                    <div class="voice-row">
                      <div class="voice-info">
                        <i class="el-icon-headset voice-icon"></i>
                        <span class="voice-title">语音{{ getChineseNumber(index + 3) }}</span>
                      </div>
                      <div class="voice-player">
                        <audio
                            :src="voice"
                            controls
                            class="audio-player"
                        ></audio>
                      </div>
                    </div>
                  </div>

                  <!-- 收起按钮只有在语音总数超过2条时才显示 -->
                  <div class="expand-voice" v-if="getVoiceList(callDetails.voiceText).length > 2">
                    <el-button
                        type="text"
                        size="mini"
                        @click="showAllVoices = false"
                        class="expand-btn"
                    >
                      收起
                    </el-button>
                  </div>
                </div>
              </div>
              <div v-else class="no-voice-data">
                <i class="el-icon-microphone"></i>
                <p>暂无语音记录</p>
              </div>
            </div>
          </el-card>

        </div>

        <div v-else-if="!callDetailsLoading" class="no-data">
          <i class="el-icon-warning-outline"></i>
          <p>暂无呼叫详情数据</p>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="callDetailsDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { countGroupVoiceMsgUser, CountGroupVoiceMsgUserDetails} from '@/api/qw/groupVoiceMsg'
import { getBySessionIdDetails } from '@/api/qw/groupVoiceMsgUserDetails'
import ChatRecordViewer from '@/components/chat/ChatRecordViewer.vue'

export default {
  name: "Customer-group-details",
  components:{
    ChatRecordViewer
  },

  props:{
    rowDetailFrom:{},
  },

  watch:{
    rowDetailFrom:{
      handler(newVal){
        // 当formData变化时重新查询
        this.getUserList(newVal);
        this.getcountGroupVoiceMsgUser(newVal)
      },
      deep: true
    }
  },
  data() {
    return {
      //详情记录id
      groupMsgId: null,
      //数据统计
      countGroupVoiceMsgUserList: [],

      //成员详情
      groupMsgUserDetailsList:[],

      //客户拨通状态
      groupMsgSendStatusOptions:[],

      //放大图片
      dialogImageUrl:null,
      dialogVisible:false,

      // 呼叫详情弹窗
      callDetailsDialogVisible: false,
      callDetails: null,
      callDetailsLoading: false,
      showAllVoices: false,

      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,

      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,


      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        qwMsgId:null,
        msgId:null,
        nickName:null,
        name:null,
        status:null,
        sendStatus:null,
        chatType: 1 ,

      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {

      },

    };
  },
  computed: {
    firstRowStats() {
      const order = ['待呼叫', '已呼叫', '呼叫失败'];
      return order.map(label => {
        const item = this.countGroupVoiceMsgUserList.find(stat => stat.label === label);
        return item ? item : { label, count: 0 };
      });
    },
    secondRowStats() {
      const order = ['不是好友呼叫失败', '已作废', '系统处理异常'];
      return order.map(label => {
        const item = this.countGroupVoiceMsgUserList.find(stat => stat.label === label);
        return item ? item : { label, count: 0 };
      });
    }
  },
  created() {
    this.getUserList(this.rowDetailFrom)
    this.getcountGroupVoiceMsgUser(this.rowDetailFrom)
    //客户接收状态
    this.getDicts("sys_qw_ai_call_sendStatus").then(response => {
      this.groupMsgSendStatusOptions = response.data;
    });


  },


methods: {
  //获取成员详细
  getUserList(val){
    this.queryParams.msgId = val.id || this.rowDetailFrom.msgId;
    // 检查是否为 null、undefined 或空字符串
    if (this.queryParams.msgId) {
      this.groupMsgId = this.queryParams.msgId;
    }else{
      this.queryParams.msgId = this.groupMsgId;
    }
    this.loading=false;
    CountGroupVoiceMsgUserDetails(this.queryParams).then(res=>{
          this.groupMsgUserDetailsList=res.rows
          this.total = res.total;
          this.loading = false;
    })
  },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getUserList(this.rowDetailFrom);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    openImageViewer(url) {
      // 打开大图预览对话框
      this.dialogImageUrl=url
      this.dialogVisible = true;
    },
    //数据详情
    getcountGroupVoiceMsgUser(val){
      countGroupVoiceMsgUser(val.msgid).then(res=>{
        this.countGroupVoiceMsgUserList=Object.keys(res.data).map(key=>{
          return {label: key,count:res.data[key]}
        })
      })
    },

    /** 查看呼叫详情 */
    handleViewCallDetails(sessionId) {
      this.callDetailsDialogVisible = true;
      this.callDetailsLoading = true;
      this.callDetails = null;
      this.showAllVoices = false; // 重置语音展开状态

      getBySessionIdDetails(sessionId).then(response => {
        this.callDetails = response.data;
        this.callDetailsLoading = false;

        // 自动展开所有语音记录（如果只有2条或更少）
        if (this.callDetails.voiceText) {
          const voiceCount = this.getVoiceList(this.callDetails.voiceText).length;
          if (voiceCount <= 2) {
            this.showAllVoices = true;
          }
        }
      }).catch(() => {
        this.callDetailsLoading = false;
      });
    },

    /** 获取语音记录列表 */
    getVoiceList(voiceText) {
      if (!voiceText) return [];
      // 替换中文逗号为英文逗号，然后分割
      return voiceText.split(',')
        .map(voice => voice.trim())
        .filter(voice => voice.length > 0);
    },

    /** 获取中文数字 */
    getChineseNumber(num) {
      const chineseNumbers = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
      if (num >= 1 && num <= 10) {
        return chineseNumbers[num - 1];
      }
      return num;
    },

    /** 获取星星样式类 */
    getStarClass(starIndex) {
      const satisfaction = this.callDetails?.satisfaction || 0;

      if (satisfaction === 1) {
        // 1级满意度：第1个星星显示灰色，其余为空心
        return starIndex <= 1 ? 'star-gray' : 'star-empty';
      } else if (satisfaction === 2) {
        // 2级满意度：前3个星星显示橙色，其余为空心
        return starIndex <= 3 ? 'star-orange' : 'star-empty';
      } else if (satisfaction === 3) {
        // 3级满意度：5个星星都显示红色
        return 'star-red';
      } else {
        // 无满意度：全部为空心
        return 'star-empty';
      }
    },

    /** 获取星星图标 */
    getStarIcon(starIndex) {
      const satisfaction = this.callDetails?.satisfaction || 0;

      if (satisfaction === 1) {
        // 1级满意度：第1个星星实心灰色，其余空心
        return starIndex <= 1 ? 'el-icon-star-on' : 'el-icon-star-off';
      } else if (satisfaction === 2) {
        // 2级满意度：前3个星星实心橙色，其余空心
        return starIndex <= 3 ? 'el-icon-star-on' : 'el-icon-star-off';
      } else if (satisfaction === 3) {
        // 3级满意度：5个星星都实心红色
        return 'el-icon-star-on';
      } else {
        // 无满意度：全部空心
        return 'el-icon-star-off';
      }
    },

    /** 获取满意度提示文本 */
    getSatisfactionTooltip() {
      const satisfaction = this.callDetails?.satisfaction;
      if (satisfaction === 1) return '满意度：低';
      if (satisfaction === 2) return '满意度：中等';
      if (satisfaction === 3) return '满意度：高';
      return '暂无满意度评价';
    },

    /** 复制会话ID */
    copySessionId(sessionId) {
      if (!sessionId) return;

      // 创建临时textarea元素进行复制
      const textarea = document.createElement('textarea');
      textarea.value = sessionId;
      textarea.style.position = 'fixed';
      textarea.style.opacity = '0';
      document.body.appendChild(textarea);

      try {
        textarea.select();
        const successful = document.execCommand('copy');
        if (successful) {
          this.msgSuccess('会话ID已复制到剪贴板');
        } else {
          this.msgError('复制失败，请手动复制');
        }
      } catch (err) {
        this.msgError('复制失败: ' + err.message);
      } finally {
        document.body.removeChild(textarea);
      }
    },
  }
};
</script>
<style scoped>
.customer-group-details-container {
  padding: 16px;
  background-color: #f5f7fa;
  min-height: 100vh;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow-x: hidden;
  box-sizing: border-box;
}

.main-card {
  margin-bottom: 16px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.section-icon {
  font-size: 20px;
  margin-right: 10px;
  color: #409EFF;
}

.section-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

/* 统计卡片 */
.statistics-container {
  margin-top: 16px;
  width: 100%;
  overflow: hidden;
}

.statistic-card {
  border: none;
  background: linear-gradient(135deg, #ffffff, #fdfdfd);
  border-radius: 10px;
  padding: 16px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  box-sizing: border-box;
}

.statistic-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.statistic-content {
  text-align: center;
  width: 100%;
  overflow: hidden;
}

.statistic-value {
  font-size: 28px;
  font-weight: 700;
  color: #409EFF;
  margin-bottom: 4px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statistic-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 搜索表单 */
.search-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* 数据表格 */
.data-table {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-bottom: 8px;
}

.customer-info {
  display: flex;
  align-items: center;
}

.customer-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 8px;
  cursor: pointer;
  border: 1px solid #e4e7f1;
}

.customer-name {
  vertical-align: middle;
}

.detail-btn {
  transition: all 0.2s ease;
  border-radius: 6px;
  padding: 6px 12px;
}

.detail-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.pagination-container {
  margin-top: 10px;
  text-align: right;
  padding: 8px 0;
  background: transparent;
}

/* 通话详情弹窗 */
.detail-dialog ::v-deep .el-dialog {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 85vh;
  overflow-y: auto;
}

.detail-dialog ::v-deep .el-dialog__header {
  background: linear-gradient(135deg, #409EFF 0%, #4a9eff 100%);
  padding: 12px 16px;
  margin: 0;
}

.detail-dialog ::v-deep .el-dialog__title {
  color: white;
  font-weight: 600;
  font-size: 16px;
}

.detail-dialog ::v-deep .el-dialog__headerbtn {
  top: 12px;
  right: 16px;
}

.detail-dialog ::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: white;
  font-size: 16px;
}

.detail-dialog ::v-deep .el-dialog__body {
  padding: 12px;
  background: #f9fafc;
  max-height: 65vh;
  overflow-y: auto;
}

.detail-dialog ::v-deep .el-dialog__footer {
  padding: 8px 12px;
  background: #f9fafc;
  border-top: 1px solid #e6e9f0;
}

/* 信息卡片 */
.info-header {
  padding: 8px 12px !important;
  background: #f8f9fc;
  border-bottom: 1px solid #ebeef5;
}

.info-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
}

.info-title i {
  margin-right: 6px;
  color: #409EFF;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  padding: 8px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 10px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e6ebf5;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.info-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #409EFF;
}

.info-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  flex-shrink: 0;
  font-size: 14px;
  color: white;
}

.session-id-bg {
  background: linear-gradient(135deg, #409EFF 0%, #5dade2 100%);
}

.agent-bg {
  background: linear-gradient(135deg, #1abc9c 0%, #48c9b0 100%);
}

.customer-bg {
  background: linear-gradient(135deg, #e74c3c 0%, #ec7063 100%);
}

.satisfaction-bg {
  background: linear-gradient(135deg, #f39c12 0%, #f5b041 100%);
}

.info-content {
  flex: 1;
}

.info-label {
  font-size: 12px;
  font-weight: 600;
  color: #606266;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  word-break: break-all;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.session-id-value {
  font-family: 'Courier New', Consolas, monospace;
  color: #1890ff;
  font-size: 14px;
}

.copy-btn {
  margin-left: 6px;
  color: #909399;
  font-size: 12px;
}

.copy-btn:hover {
  color: #409EFF;
}

/* 聊天记录卡片 */
.chat-card {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  margin-bottom: 12px;
  background: white;
}

.chat-viewer {
  margin-top: -10px;
}

.chat-viewer ::v-deep .chat-messages {
  padding: 8px 12px;
}

.chat-viewer ::v-deep .message {
  margin-bottom: 10px !important;
  padding: 8px 12px !important;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 8px;
  max-width: 80%;
}

.chat-viewer ::v-deep .message-agent {
  background: #ecf5ff;
  border: 1px solid #d9ecff;
  align-self: flex-start;
}

.chat-viewer ::v-deep .message-customer {
  background: #f0f9ff;
  border: 1px solid #c6e2ff;
  align-self: flex-end;
}

/* 语音记录卡片 */
.voice-card {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  background: white;
  margin-bottom: 0;
}

.voice-container {
  padding: 8px;
}

.voice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.voice-item {
  background: white;
  border-radius: 8px;
  border: 1px solid #e1e8ef;
  padding: 10px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.voice-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
  border-color: rgba(64, 158, 255, 0.3);
}

.voice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.voice-info {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.voice-icon {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, #409EFF 0%, #64B5FF 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  font-size: 12px;
}

.voice-title {
  font-size: 13px;
  font-weight: 600;
  color: #303133;
}

.voice-player {
  flex: 1;
  min-width: 0;
}

.audio-player {
  width: 100%;
  height: 32px;
  border-radius: 16px;
  background: #f0f9ff;
  border: 1px solid #d9ecff;
}

.no-voice-data {
  text-align: center;
  padding: 30px 16px;
  background: #f8fafc;
  border-radius: 8px;
  color: #909399;
}

.no-voice-data i {
  font-size: 32px;
  margin-bottom: 10px;
  display: block;
  color: #c0c4cc;
}

.no-voice-data p {
  font-size: 13px;
  color: #909399;
  margin: 0;
}

.no-data {
  text-align: center;
  padding: 24px 12px;
}

.no-data i {
  font-size: 28px;
  margin-bottom: 10px;
  color: #c0c4cc;
}

.no-data p {
  font-size: 13px;
  color: #909399;
  margin: 0;
}

/* 满意度星星样式 */
.satisfaction-stars {
  display: flex;
  align-items: center;
  gap: 2px;
}

.star {
  font-size: 14px;
  transition: all 0.3s ease;
}

.star i {
  display: block;
}

/* 空心灰色星星（未点亮的星星） */
.star-empty i {
  color: #e4e7f1;
}

/* 灰色星星（1级满意度） */
.star-gray i {
  color: #909399;
}

/* 橙色星星（2级满意度） */
.star-orange i {
  color: #e6a23c;
}

/* 红色星星（3级满意度） */
.star-red i {
  color: #f56c6c;
}

/* 展开按钮 */
.expand-voice {
  text-align: center;
  padding: 10px 0;
}

.expand-btn {
  padding: 4px 10px !important;
  font-size: 12px;
  border-radius: 16px;
  color: #409EFF;
  border: 1px solid #d9ecff;
  transition: all 0.3s ease;
}

.expand-btn:hover {
  background-color: #ecf5ff;
  color: #66b1ff;
  border-color: #c6e2ff;
}

/* 底部按钮 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px;
}

.dialog-footer .el-button {
  padding: 6px 16px;
  border-radius: 6px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .customer-group-details-container {
    padding: 12px;
  }

  .info-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .voice-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .voice-player {
    width: 100%;
  }

  .info-item {
    padding: 10px;
  }

  .info-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .statistic-value {
    font-size: 22px;
  }

  .statistic-label {
    font-size: 12px;
  }

  .detail-dialog ::v-deep .el-dialog {
    width: 90% !important;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .chat-viewer ::v-deep .message {
    max-width: 90%;
    font-size: 12px;
    padding: 6px 10px !important;
  }

  .detail-dialog ::v-deep .el-dialog__body {
    max-height: 60vh;
    padding: 12px;
  }
}
</style>
