<template>
  <div class="student-practice-container">
    <div class="page-header">
      <h1 class="page-title">学员陪练记录</h1>
      <div class="header-actions">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleDateChange"
        />
        <el-button type="primary" @click="refreshData">
          <el-icon class="el-icon--left"><Refresh /></el-icon>
          刷新数据
        </el-button>
        <el-button @click="exportRecords">
          <el-icon class="el-icon--left"><Download /></el-icon>
          导出记录
        </el-button>
      </div>
    </div>

    <!-- 陪练统计概览 -->
    <div class="stats-overview">
      <div class="stat-card card" v-for="stat in practiceStats" :key="stat.label">
        <div class="stat-icon" :style="{ backgroundColor: stat.bgColor }">
          <el-icon :size="32" :color="stat.color">
            <component :is="stat.icon" />
          </el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-label">{{ stat.label }}</div>
          <div class="stat-trend" :class="stat.trend > 0 ? 'up' : 'down'" v-if="stat.trend !== 0">
            <el-icon><component :is="stat.trend > 0 ? 'Top' : 'Bottom'" /></el-icon>
            {{ Math.abs(stat.trend) }}%
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section card">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="学员姓名">
          <el-input 
            v-model="filterForm.studentName" 
            placeholder="搜索学员姓名"
            clearable
            @input="handleRealTimeSearch"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="岗位">
          <el-select 
            v-model="filterForm.position" 
            placeholder="全部岗位" 
            clearable
            @change="handleRealTimeSearch"
            style="width: 120px"
          >
            <el-option label="美容师" value="beautician" />
            <el-option label="美容顾问" value="beauty_consultant" />
            <el-option label="医美医生" value="doctor" />
            <el-option label="客户服务" value="service" />
          </el-select>
        </el-form-item>
        <el-form-item label="陪练场景">
          <el-select 
            v-model="filterForm.scene" 
            placeholder="全部场景" 
            clearable
            @change="handleRealTimeSearch"
            style="width: 120px"
          >
            <el-option label="客户咨询" value="customer_consultation" />
            <el-option label="美容护理" value="beauty_care" />
            <el-option label="产品介绍" value="product_introduction" />
            <el-option label="问题处理" value="problem_handling" />
            <el-option label="服务礼仪" value="service_etiquette" />
          </el-select>
        </el-form-item>
        <el-form-item label="陪练结果">
          <el-select 
            v-model="filterForm.result" 
            placeholder="全部结果" 
            clearable
            @change="handleRealTimeSearch"
            style="width: 120px"
          >
            <el-option label="优秀" value="excellent" />
            <el-option label="良好" value="good" />
            <el-option label="一般" value="average" />
            <el-option label="需改进" value="needs_improvement" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleReset">
            <el-icon class="el-icon--left"><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 当前筛选条件显示 -->
      <div v-if="hasActiveFilters" class="filter-tags">
        <span class="filter-label">当前筛选：</span>
        <el-tag 
          v-if="filterForm.studentName" 
          closable 
          @close="clearStudentName"
          type="primary"
        >
          学员：{{ filterForm.studentName }}
        </el-tag>
        <el-tag 
          v-if="filterForm.position" 
          closable 
          @close="clearPosition"
          type="success"
        >
          岗位：{{ getPositionText(filterForm.position) }}
        </el-tag>
        <el-tag 
          v-if="filterForm.scene" 
          closable 
          @close="clearScene"
          type="warning"
        >
          场景：{{ getSceneText(filterForm.scene) }}
        </el-tag>
        <el-tag 
          v-if="filterForm.result" 
          closable 
          @close="clearResult"
          type="info"
        >
          结果：{{ getResultText(filterForm.result) }}
        </el-tag>
        <el-tag 
          v-if="dateRange && dateRange.length === 2" 
          closable 
          @close="clearDateRange"
          type="danger"
        >
          日期：{{ formatDateRange(dateRange) }}
        </el-tag>
        <el-button 
          link 
          type="danger" 
          size="small" 
          @click="handleReset"
          class="clear-all-btn"
        >
          清空全部
        </el-button>
      </div>

      <!-- 搜索结果统计 -->
      <div class="search-result-info">
        <span class="result-count">
          共找到 <strong>{{ filteredRecordsList.length }}</strong> 条陪练记录
          <span v-if="hasActiveFilters" class="filter-hint">（已筛选）</span>
        </span>
      </div>
    </div>

    <!-- 陪练记录列表 -->
    <div class="records-list card">
      <el-table 
        :data="filteredRecordsList" 
        style="width: 100%" 
        v-loading="loading"
        @row-click="viewPracticeDetail"
      >
        <el-table-column prop="student_name" label="学员姓名" width="120" />
        <el-table-column prop="position" label="岗位" width="120">
          <template #default="scope">
            <el-tag size="small">{{ getPositionText(scope.row.position) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="session_id" label="会话ID" width="120" />
        <el-table-column prop="scene_name" label="陪练场景" min-width="150">
          <template #default="scope">
            <el-tag :type="getSceneTypeTag(scope.row.scene_type)" size="small">
              {{ scope.row.scene_name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="duration_seconds" label="陪练时长" width="120">
          <template #default="scope">
            <span>{{ formatDuration(scope.row.duration_seconds) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="round_count" label="对话轮数" width="100" />
        <el-table-column prop="score" label="综合评分" width="120" sortable>
          <template #default="scope">
            <div class="score-display">
              <el-progress 
                :percentage="scope.row.score" 
                :color="getScoreColor(scope.row.score)"
                :stroke-width="8"
              />
              <span class="score-text">{{ scope.row.score }}分</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="result" label="陪练结果" width="120">
          <template #default="scope">
            <el-tag :type="getResultTagType(scope.row.result)">
              {{ getResultText(scope.row.result) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="practice_time" label="陪练时间" width="180" sortable />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button link type="primary" size="small" @click.stop="viewPracticeDetail(scope.row)">
              <el-icon><View /></el-icon>
              查看详情
            </el-button>
            <el-button link type="primary" size="small" @click.stop="replayPractice(scope.row)">
              <el-icon><VideoPlay /></el-icon>
              回放对话
            </el-button>
            <el-button link type="primary" size="small" @click.stop="contactStudent(scope.row)">
              <el-icon><Message /></el-icon>
              联系学员
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 对话回放弹窗 -->
    <el-dialog
      v-model="replayDialogVisible"
      :title="(currentRecord?.student_name || '') + ' - ' + (currentRecord?.scene_name || '') + ' - 对话回放'"
      width="800px"
      top="5vh"
    >
      <div class="replay-content" v-if="currentRecord">
        <!-- 陪练信息 -->
        <div class="replay-header">
          <div class="session-info">
            <h3>{{ currentRecord.scene_name }}</h3>
            <div class="session-meta">
              <span>学员：{{ currentRecord.student_name }}</span>
              <span>时长：{{ formatDuration(currentRecord.duration_seconds) }}</span>
              <span>轮数：{{ currentRecord.round_count }}</span>
              <span>评分：{{ currentRecord.score }}分</span>
            </div>
          </div>
        </div>

        <!-- 对话记录 -->
        <div class="conversation-replay" v-loading="currentRecord.loading">
          <!-- 加载状态 -->
          <div v-if="currentRecord.loading" class="loading-state">
            <el-icon class="is-loading" :size="48"><Loading /></el-icon>
            <p>正在加载对话记录...</p>
          </div>
          
          <!-- 空状态 -->
          <div v-else-if="!currentRecord.conversation || currentRecord.conversation.length === 0" class="empty-state">
            <el-empty description="暂无对话记录" />
          </div>
          
          <!-- 对话列表 -->
          <div v-else class="conversation-list">
            <div 
              v-for="(message, index) in currentRecord.conversation" 
              :key="index"
              class="message-item"
              :class="message.role"
            >
              <div class="message-avatar">
                <el-avatar v-if="message.role === 'user'" :size="32">
                  {{ currentRecord.student_name?.charAt(0) || 'U' }}
                </el-avatar>
                <el-avatar v-else :size="32" style="background: #409eff">
                  AI
                </el-avatar>
              </div>
              <div class="message-content">
                <div class="message-header">
                  <span class="sender-name">
                    {{ message.role === 'user' ? currentRecord.student_name : 'AI陪练师' }}
                  </span>
                  <span class="message-time">{{ message.timestamp }}</span>
                </div>
                <div class="message-text">{{ message.content }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'
import { getStudentPracticeRecords, getStudentPracticeStatistics, getSessionConversation, type StudentPracticeRecord } from '@/api/manager/practice'

// 加载状态
const loading = ref(false)

// 日期范围
const dateRange = ref<[Date, Date] | null>([
  new Date(new Date().setDate(new Date().getDate() - 30)),
  new Date()
])

// 分页
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)

// 弹窗状态
const replayDialogVisible = ref(false)
const currentRecord = ref<any>(null)

// 筛选表单
const filterForm = reactive({
  studentName: '',
  position: '',
  scene: '',
  result: ''
})

// 陪练统计数据
const practiceStats = ref([
  {
    label: '总陪练次数',
    value: '0',
    icon: 'ChatLineRound',
    color: '#667eea',
    bgColor: 'rgba(102, 126, 234, 0.1)',
    trend: 0
  },
  {
    label: '平均评分',
    value: '0',
    icon: 'TrendCharts',
    color: '#67c23a',
    bgColor: 'rgba(103, 194, 58, 0.1)',
    trend: 0
  },
  {
    label: '总陪练时长',
    value: '0h',
    icon: 'Timer',
    color: '#e6a23c',
    bgColor: 'rgba(230, 162, 60, 0.1)',
    trend: 0
  },
  {
    label: '优秀率',
    value: '0%',
    icon: 'Trophy',
    color: '#f56c6c',
    bgColor: 'rgba(245, 108, 108, 0.1)',
    trend: 0
  }
])

// 学员陪练记录列表（真实数据）
const recordsList = ref<StudentPracticeRecord[]>([])

// 筛选后的记录列表直接返回（后端已处理筛选和分页）
const filteredRecordsList = computed(() => recordsList.value)

// 是否有活跃的筛选条件
const hasActiveFilters = computed(() => {
  return !!(filterForm.studentName || filterForm.position || filterForm.scene || filterForm.result || (dateRange.value && dateRange.value.length === 2))
})

/**
 * 获取岗位文本
 */
const getPositionText = (position: string) => {
  const positionMap: Record<string, string> = {
    beautician: '美容师',
    beauty_consultant: '美容顾问',
    doctor: '医美医生',
    service: '客户服务'
  }
  return positionMap[position] || position
}

/**
 * 获取场景文本
 */
const getSceneText = (scene: string) => {
  const sceneMap: Record<string, string> = {
    customer_consultation: '客户咨询',
    beauty_care: '美容护理',
    product_introduction: '产品介绍',
    problem_handling: '问题处理',
    service_etiquette: '服务礼仪'
  }
  return sceneMap[scene] || scene
}

/**
 * 获取结果文本
 */
const getResultText = (result: string) => {
  const resultMap: Record<string, string> = {
    excellent: '优秀',
    good: '良好',
    average: '一般',
    needs_improvement: '需改进'
  }
  return resultMap[result] || result
}

/**
 * 格式化日期范围
 */
const formatDateRange = (range: Date[]) => {
  if (!range || range.length !== 2) return ''
  const start = range[0].toLocaleDateString()
  const end = range[1].toLocaleDateString()
  return start + ' 至 ' + end
}

/**
 * 获取场景类型标签样式
 */
const getSceneTypeTag = (type: string) => {
  const tagMap: Record<string, string> = {
    customer_consultation: 'primary',
    beauty_care: 'success',
    product_introduction: 'warning',
    problem_handling: 'danger',
    service_etiquette: 'info'
  }
  return tagMap[type] || ''
}

/**
 * 获取评分颜色
 */
const getScoreColor = (score: number) => {
  if (score >= 90) return '#67c23a'
  if (score >= 80) return '#409eff'
  if (score >= 70) return '#e6a23c'
  return '#f56c6c'
}

/**
 * 获取结果标签类型
 */
const getResultTagType = (result: string) => {
  const tagMap: Record<string, string> = {
    excellent: 'success',
    good: 'primary',
    average: 'warning',
    needs_improvement: 'danger'
  }
  return tagMap[result] || ''
}

/**
 * 格式化时长
 */
const formatDuration = (seconds: number) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60

  if (hours > 0) {
    return hours + '小时' + minutes + '分钟'
  } else if (minutes > 0) {
    return minutes + '分钟' + secs + '秒'
  } else {
    return secs + '秒'
  }
}

/**
 * 日期变化处理
 */
const handleDateChange = () => {
  currentPage.value = 1
  loadRecordsList()
}

/**
 * 加载陪练记录列表
 */
const loadRecordsList = async () => {
  try {
    loading.value = true
    
    // 构建查询参数
    const params: any = {
      page: currentPage.value,
      size: pageSize.value
    }
    
    // 添加筛选条件
    if (filterForm.studentName) {
      params.student_name = filterForm.studentName
    }
    if (filterForm.position) {
      params.position = getPositionText(filterForm.position)
    }
    if (filterForm.scene) {
      params.scene_type = filterForm.scene
    }
    if (filterForm.result) {
      params.result = filterForm.result
    }
    if (dateRange.value && dateRange.value.length === 2) {
      params.start_date = dateRange.value[0].toISOString().split('T')[0]
      params.end_date = dateRange.value[1].toISOString().split('T')[0]
    }
    
    const res = await getStudentPracticeRecords(params)
    if (res.code === 200 && res.data) {
      recordsList.value = res.data.items
      total.value = res.data.total
    } else {
      ElMessage.error(res.message || '获取陪练记录失败')
    }
  } catch (error) {
    console.error('加载陪练记录失败:', error)
    ElMessage.error('加载陪练记录失败')
  } finally {
    loading.value = false
  }
}

/**
 * 加载统计数据
 */
const loadStatistics = async () => {
  try {
    const res = await getStudentPracticeStatistics()
    if (res.code === 200 && res.data) {
      practiceStats.value[0].value = String(res.data.total_count)
      practiceStats.value[1].value = String(res.data.avg_score)
      practiceStats.value[2].value = `${res.data.total_duration_hours}h`
      practiceStats.value[3].value = `${res.data.excellent_rate}%`
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

/**
 * 刷新数据
 */
const refreshData = () => {
  loadRecordsList()
  loadStatistics()
  ElMessage.success('数据已刷新')
}

/**
 * 导出记录
 */
const exportRecords = () => {
  ElMessage.success('正在导出学员陪练记录...')
}

/**
 * 实时搜索处理
 */
const handleRealTimeSearch = () => {
  currentPage.value = 1
}

/**
 * 重置筛选
 */
const handleReset = () => {
  filterForm.studentName = ''
  filterForm.position = ''
  filterForm.scene = ''
  filterForm.result = ''
  dateRange.value = [
    new Date(new Date().setDate(new Date().getDate() - 30)),
    new Date()
  ]
  currentPage.value = 1
  loadRecordsList()
  ElMessage.success('已重置所有筛选条件')
}

/**
 * 清除学员姓名筛选
 */
const clearStudentName = () => {
  filterForm.studentName = ''
  currentPage.value = 1
  loadRecordsList()
}

/**
 * 清除岗位筛选
 */
const clearPosition = () => {
  filterForm.position = ''
  currentPage.value = 1
  loadRecordsList()
}

/**
 * 清除场景筛选
 */
const clearScene = () => {
  filterForm.scene = ''
  currentPage.value = 1
  loadRecordsList()
}

/**
 * 清除结果筛选
 */
const clearResult = () => {
  filterForm.result = ''
  currentPage.value = 1
  loadRecordsList()
}

/**
 * 清除日期范围筛选
 */
const clearDateRange = () => {
  dateRange.value = null
  currentPage.value = 1
  loadRecordsList()
}

/**
 * 分页大小改变
 */
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
  loadRecordsList()
}

/**
 * 当前页改变
 */
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  loadRecordsList()
}

/**
 * 查看陪练详情
 */
const viewPracticeDetail = (record: any) => {
  ElMessage.info('查看 ' + record.studentName + ' 的陪练详情')
}

/**
 * 回放陪练对话
 */
const replayPractice = async (record: any) => {
  // 首先显示弹窗和加载状态
  currentRecord.value = {
    ...record,
    conversation: [],
    loading: true
  }
  replayDialogVisible.value = true
  
  try {
    // 调用API获取对话记录
    const res = await getSessionConversation(record.session_id)
    
    if (res.code === 200 && res.data) {
      const conversation = res.data.conversation || []
      
      // 检查是否有对话记录
      if (conversation.length === 0) {
        ElMessageBox.alert(
          '该陪练会话没有对话记录。可能是在陪练过程中对话未成功保存到数据库。',
          '暂无对话记录',
          {
            confirmButtonText: '知道了',
            type: 'warning'
          }
        )
        currentRecord.value = null
        replayDialogVisible.value = false
        return
      }
      
      // 更新对话记录
      currentRecord.value = {
        ...record,
        conversation: conversation,
        loading: false
      }
      
      ElMessage.success(`成功加载${conversation.length}条对话记录`)
    } else {
      throw new Error(res.message || '获取对话记录失败')
    }
  } catch (error: any) {
    console.error('获取对话记录失败:', error)
    ElMessage.error('获取对话记录失败：' + (error.message || '未知错误'))
    currentRecord.value = null
    replayDialogVisible.value = false
  }
}

/**
 * 联系学员
 */
const contactStudent = (record: any) => {
  ElMessage.info('正在联系学员 ' + record.student_name + '...')
}

// 组件挂载时初始化数据
onMounted(() => {
  loadRecordsList()
  loadStatistics()
})
</script>

<style lang="scss" scoped>
.student-practice-container {
  max-width: 1400px;
  margin: 0 auto;

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .page-title {
      font-size: 24px;
      font-weight: 600;
      color: #333;
    }

    .header-actions {
      display: flex;
      gap: 12px;
    }
  }

  .stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;

    .stat-card {
      padding: 24px;
      display: flex;
      align-items: center;
      gap: 20px;

      .stat-icon {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .stat-content {
        flex: 1;

        .stat-value {
          font-size: 32px;
          font-weight: 700;
          color: #333;
          line-height: 1;
          margin-bottom: 8px;
        }

        .stat-label {
          font-size: 14px;
          color: #666;
          margin-bottom: 8px;
        }

        .stat-trend {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 12px;
          font-weight: 500;

          &.up {
            color: #67c23a;
          }

          &.down {
            color: #f56c6c;
          }
        }
      }
    }
  }

  .filter-section {
    padding: 20px;
    margin-bottom: 20px;

    .filter-form {
      .el-form-item {
        margin-bottom: 0;
      }
    }

    .filter-tags {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;

      .filter-label {
        color: #666;
        font-size: 14px;
        margin-right: 8px;
      }

      .clear-all-btn {
        margin-left: 8px;
      }
    }

    .search-result-info {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid #f0f0f0;

      .result-count {
        color: #666;
        font-size: 14px;

        strong {
          color: #409eff;
          font-weight: 600;
        }
      }

      .filter-hint {
        color: #e6a23c;
        font-size: 12px;
      }
    }
  }

  .records-list {
    padding: 24px;

    .score-display {
      display: flex;
      align-items: center;
      gap: 12px;

      .score-text {
        font-weight: 600;
        min-width: 50px;
      }
    }

    .pagination-wrapper {
      display: flex;
      justify-content: center;
      margin-top: 24px;
    }
  }

  .replay-content {
    .replay-header {
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid #eee;

      .session-info {
        h3 {
          font-size: 18px;
          font-weight: 600;
          color: #333;
          margin-bottom: 8px;
        }

        .session-meta {
          display: flex;
          gap: 16px;
          font-size: 14px;
          color: #666;

          span {
            padding: 4px 8px;
            background: #f5f7fa;
            border-radius: 4px;
          }
        }
      }
    }

    .conversation-replay {
      max-height: 400px;
      overflow-y: auto;
      
      .loading-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        color: #909399;
        
        p {
          margin-top: 16px;
          font-size: 14px;
        }
      }
      
      .empty-state {
        padding: 40px 20px;
      }

      .conversation-list {
        .message-item {
          display: flex;
          gap: 12px;
          margin-bottom: 16px;

          &.user {
            flex-direction: row-reverse;

            .message-content {
              background: #409eff;
              color: white;
              border-radius: 18px 18px 4px 18px;
            }
          }

          &.ai {
            .message-content {
              background: #f5f7fa;
              color: #333;
              border-radius: 18px 18px 18px 4px;
            }
          }

          .message-avatar {
            flex-shrink: 0;
          }

          .message-content {
            max-width: 70%;
            padding: 12px 16px;

            .message-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 4px;
              font-size: 12px;
              opacity: 0.8;

              .sender-name {
                font-weight: 500;
              }

              .message-time {
                font-size: 11px;
              }
            }

            .message-text {
              line-height: 1.4;
              word-break: break-word;
            }

            .ai-feedback {
              margin-top: 8px;
              padding: 8px;
              background: rgba(255, 255, 255, 0.1);
              border-radius: 4px;
              font-size: 12px;

              .el-tag {
                margin-right: 8px;
              }
            }
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .student-practice-container {
    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .header-actions {
        width: 100%;
        justify-content: flex-end;
      }
    }

    .stats-overview {
      grid-template-columns: 1fr;
    }

    .filter-form {
      .el-form-item {
        display: block;
        margin-bottom: 16px !important;
      }
    }

    .conversation-replay {
      .message-item {
        .message-content {
          max-width: 85%;
        }
      }
    }
  }
}
</style>

