<template>
  <div class="service-system">
    <!-- 左侧边栏 -->
    <aside class="service-sidebar">
      <div class="sidebar-header">
        <h2>智能客服系统</h2>
      </div>
      
      <!-- 新建对话 -->
      <div class="nav-section">
        <div 
          class="nav-item new-chat" 
          @click="startNewChat"
        >
          <el-icon><Plus /></el-icon>
          <span>新建对话</span>
        </div>
      </div>
      
      <!-- 历史对话 -->
      <div class="chat-history">
        <div class="history-title">历史对话</div>
        <div class="history-list">
          <div 
            v-for="chat in chatHistory" 
            :key="chat.id"
            class="history-item"
            :class="{ active: currentChatId === chat.id }"
            @click="loadChat(chat.id)"
          >
            <el-icon><ChatLineRound /></el-icon>
            <div class="history-info">
              <div class="history-name">{{ chat.title }}</div>
              <div class="history-time">{{ chat.time }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="sidebar-footer">
        v2.1.0 (Build 2025)
      </div>
    </aside>

    <!-- 主内容区 -->
    <div class="service-main">
      <!-- 在线问答 -->
      <div v-if="activeView === 'chat'" class="view-chat">
        <div class="chat-header">
          <h1>泰豪小电-对内</h1>
          <p class="subtitle">Real-time Support Agent</p>
        </div>
        
        <div class="chat-layout">
          <!-- 聊天区域 -->
          <div class="chat-area">
            <!-- AI助手信息 -->
            <div class="ai-info">
              <div class="ai-avatar">🤖</div>
              <div class="ai-details">
                <div class="ai-name">泰豪智能服务助手</div>
                <div class="ai-status">
                  <span class="status-dot"></span>
                  基于 RAG 知识库 · 24小时在线
                </div>
              </div>
            </div>

            <!-- 消息列表 -->
            <div class="messages" ref="messagesRef">
              <div v-for="msg in messages" :key="msg.id" class="message" :class="msg.role">
                <div class="message-content">
                  <div class="message-text">{{ msg.text }}</div>
                  <div class="message-time">{{ msg.time }}</div>
                </div>
              </div>
            </div>

            <!-- 快捷操作按钮 -->
            <div class="quick-actions">
              <button class="quick-btn" @click="quickReply('设备操作手册')">
                <el-icon><Document /></el-icon>
                设备操作手册
              </button>
              <button class="quick-btn" @click="quickReply('故障排查指南')">
                <el-icon><Warning /></el-icon>
                故障排查指南
              </button>
              <button class="quick-btn" @click="quickReply('维保服务规范')">
                <el-icon><List /></el-icon>
                维保服务规范
              </button>
              <button class="quick-btn" @click="quickReply('技术参数查询')">
                <el-icon><Search /></el-icon>
                技术参数查询
              </button>
            </div>

            <!-- 输入框 -->
            <div class="input-area">
              <el-icon class="attach-icon"><Paperclip /></el-icon>
              <el-input
                v-model="inputText"
                placeholder="描述您的问题 (如: 发电机启动失败异常)..."
                @keyup.enter="sendMessage"
              />
              <el-button type="primary" :icon="Promotion" circle @click="sendMessage" />
            </div>
          </div>

        </div>
      </div>

      <!-- 数据中台 -->
      <div v-if="activeView === 'stats'" class="view-stats">
        <div class="view-header">
          <h1>智能客服管理中台</h1>
          <p class="subtitle">客户服务数据与工单管理</p>
        </div>

        <div class="stats-section">
          <div class="section-header">
            <h2>数据概览</h2>
            <div class="time-tabs">
              <button :class="{ active: timeRange === 'today' }" @click="timeRange = 'today'">今日</button>
              <button :class="{ active: timeRange === 'week' }" @click="timeRange = 'week'">近7天</button>
              <button :class="{ active: timeRange === 'month' }" @click="timeRange = 'month'">本月</button>
            </div>
          </div>

          <div class="stats-cards">
            <div class="stat-card">
              <div class="stat-icon chat-icon">
                <el-icon><ChatDotRound /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-label">今日咨询量</div>
                <div class="stat-value">342</div>
                <div class="stat-change positive">+12% 较昨日</div>
              </div>
            </div>

            <div class="stat-card">
              <div class="stat-icon success-icon">
                <el-icon><Select /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-label">工单解决率</div>
                <div class="stat-value">98.5%</div>
                <div class="stat-change positive">+0.5% 较昨日</div>
              </div>
            </div>

            <div class="stat-card">
              <div class="stat-icon warning-icon">
                <el-icon><Warning /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-label">未处理工单</div>
                <div class="stat-value">12</div>
                <div class="stat-change positive">+2 较昨日</div>
              </div>
            </div>

            <div class="stat-card">
              <div class="stat-icon complete-icon">
                <el-icon><CircleCheck /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-label">已处理工单</div>
                <div class="stat-value">1,285</div>
                <div class="stat-change positive">+45 较昨日</div>
              </div>
            </div>
          </div>

          <!-- 词云和分布图 -->
          <div class="charts-row">
            <div class="chart-card">
              <h3>热门咨询词云</h3>
              <p class="chart-subtitle">越频繁出现字体越大 ◆◆◆◆◆问题趋势集中</p>
              <div class="word-cloud">
                <span class="word size-xl">发电机启动失败</span>
                <span class="word size-lg">电压不稳定</span>
                <span class="word size-lg">S200型号</span>
                <span class="word size-md">配件更换</span>
                <span class="word size-md">远程监控</span>
                <span class="word size-md">维保合同</span>
                <span class="word size-sm">噪音过大</span>
                <span class="word size-sm">油耗异常</span>
                <span class="word size-xs">固件升级</span>
                <span class="word size-xs">散热故障</span>
              </div>
            </div>

            <div class="chart-card">
              <h3>工单来源分布</h3>
              <div class="distribution-chart">
                <div class="dist-item">
                  <div class="dist-label">微信小程序 (55%)</div>
                  <div class="dist-bar">
                    <div class="dist-fill" style="width: 55%; background: #10b981;"></div>
                  </div>
                </div>
                <div class="dist-item">
                  <div class="dist-label">400电话转接 (20%)</div>
                  <div class="dist-bar">
                    <div class="dist-fill" style="width: 20%; background: #3b82f6;"></div>
                  </div>
                </div>
                <div class="dist-item">
                  <div class="dist-label">官网Web (15%)</div>
                  <div class="dist-bar">
                    <div class="dist-fill" style="width: 15%; background: #8b5cf6;"></div>
                  </div>
                </div>
                <div class="dist-item">
                  <div class="dist-label">IoT自动报警 (10%)</div>
                  <div class="dist-bar">
                    <div class="dist-fill" style="width: 10%; background: #f59e0b;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 工单管理 -->
      <div v-if="activeView === 'tickets'" class="view-tickets">
        <div class="view-header">
          <h1>智能客服管理中台</h1>
          <p class="subtitle">客户服务数据与工单管理</p>
        </div>

        <div class="tickets-section">
          <div class="section-toolbar">
            <h2>工单管理</h2>
            <div class="toolbar-actions">
              <el-select v-model="ticketStatusFilter" placeholder="所有状态" size="small">
                <el-option label="所有状态" value="" />
                <el-option label="处理中" value="processing" />
                <el-option label="待分配" value="pending" />
                <el-option label="已解决" value="resolved" />
                <el-option label="已关闭" value="closed" />
              </el-select>
              <el-select v-model="ticketTypeFilter" placeholder="所有类型" size="small">
                <el-option label="所有类型" value="" />
                <el-option label="技术故障" value="tech" />
                <el-option label="配件需求" value="parts" />
                <el-option label="服务咨询" value="service" />
              </el-select>
              <el-date-picker
                v-model="ticketDateFilter"
                type="date"
                placeholder="年/月/日"
                size="small"
              />
              <el-button type="primary" size="small" :icon="Search">查询</el-button>
            </div>
          </div>

          <el-table :data="filteredTickets" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="工单编号" width="150">
              <template #default="{ row }">
                <el-link type="primary" @click="viewTicketDetail(row)">{{ row.id }}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="client" label="客户名称" width="180" />
            <el-table-column prop="issueType" label="问题类型" width="120" />
            <el-table-column prop="urgency" label="紧急程度" width="100">
              <template #default="{ row }">
                <el-tag :type="getUrgencyType(row.urgency)" size="small">
                  {{ row.urgency }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)" size="small">
                  {{ getStatusText(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createdAt" label="创建时间" width="180" />
            <el-table-column label="操作" width="180" fixed="right">
              <template #default="{ row }">
                <el-button 
                  v-if="row.status === 'pending'" 
                  type="primary" 
                  link 
                  size="small"
                  @click="assignTicket(row)"
                >
                  <el-icon><UserFilled /></el-icon>
                  分配
                </el-button>
                <el-button type="primary" link size="small" @click="addRemark(row)">
                  <el-icon><ChatDotRound /></el-icon>
                  备注
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 用户管理 -->
      <div v-if="activeView === 'users'" class="view-users">
        <div class="view-header">
          <h1>智能客服管理中台</h1>
          <p class="subtitle">客户服务数据与工单管理</p>
        </div>

        <div class="users-section">
          <el-tabs v-model="userTab">
            <el-tab-pane label="内部员工管理" name="internal">
              <div class="tab-toolbar">
                <el-input
                  v-model="employeeSearch"
                  placeholder="搜索姓名/手机号"
                  size="small"
                  style="width: 200px;"
                >
                  <template #prefix><el-icon><Search /></el-icon></template>
                </el-input>
                <el-button type="primary" size="small">
                  <el-icon><Plus /></el-icon>
                  新增员工
                </el-button>
              </div>

              <el-table :data="employees" style="width: 100%">
                <el-table-column prop="name" label="姓名" width="120" />
                <el-table-column prop="dept" label="部门" width="150" />
                <el-table-column prop="role" label="岗位/角色" width="150">
                  <template #default="{ row }">
                    <el-tag size="small" :type="row.role === '管理员' ? 'danger' : 'primary'">
                      {{ row.role }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="phone" label="手机号" width="150" />
                <el-table-column prop="status" label="状态" width="100">
                  <template #default="{ row }">
                    <el-tag :type="row.status === '正常' ? 'success' : 'danger'" size="small">
                      {{ row.status }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                  <template>
                    <el-button type="primary" link size="small">
                      <el-icon><Edit /></el-icon>
                    </el-button>
                    <el-button type="danger" link size="small">
                      <el-icon><Warning /></el-icon>
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>

            <el-tab-pane label="外部客户管理 (小程序)" name="external">
              <div class="tab-toolbar">
                <el-input
                  v-model="customerSearch"
                  placeholder="微信昵称/OpenID"
                  size="small"
                  style="width: 200px;"
                >
                  <template #prefix><el-icon><Search /></el-icon></template>
                </el-input>
                <el-select v-model="consultSort" placeholder="咨询次数" size="small" style="width: 120px;">
                  <el-option label="不限" value="" />
                  <el-option label="咨询次数" value="consult" />
                </el-select>
                <el-select v-model="ticketSort" placeholder="工单数量" size="small" style="width: 120px;">
                  <el-option label="不限" value="" />
                  <el-option label="工单数量" value="ticket" />
                </el-select>
              </div>

              <el-table :data="customers" style="width: 100%">
                <el-table-column label="微信头像/昵称" width="200">
                  <template #default="{ row }">
                    <div class="user-cell">
                      <el-avatar :size="32">{{ row.nickname[0] }}</el-avatar>
                      <span>{{ row.nickname }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="openId" label="OpenID" width="150" />
                <el-table-column prop="company" label="绑定公司" width="180" />
                <el-table-column prop="consultCount" label="咨询次数" width="100" align="center" />
                <el-table-column prop="ticketCount" label="历史工单" width="100" align="center" />
                <el-table-column label="操作" width="120">
                  <template>
                    <el-link type="primary">查看记录</el-link>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>

            <el-tab-pane label="权限角色管理" name="roles">
              <div class="roles-grid">
                <div v-for="role in roles" :key="role.id" class="role-card">
                  <div class="role-header">
                    <el-icon><UserFilled /></el-icon>
                    <span>{{ role.name }}</span>
                  </div>
                  <div class="role-desc">{{ role.desc }}</div>
                  <div class="role-stats">
                    <span>{{ role.users }} 人</span>
                    <span>{{ role.perms }} 项权限</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>

    <!-- 创建工单对话框 -->
    <el-dialog
      v-model="showCreateTicket"
      title="创建服务工单"
      width="700px"
    >
      <el-alert
        title="通过 AI 分析聊天记录，自动填充表单"
        type="info"
        :closable="false"
        style="margin-bottom: 20px;"
      >
        <template #default>
          <el-button type="primary" size="small" @click="aiExtract" :loading="extracting">
            <el-icon><MagicStick /></el-icon>
            {{ extracting ? '分析中...' : 'AI一键智能提取' }}
          </el-button>
        </template>
      </el-alert>

      <el-form :model="ticketForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户姓名" required>
              <el-input v-model="ticketForm.name" placeholder="请输入人姓名">
                <template #prefix><el-icon><User /></el-icon></template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" required>
              <el-input v-model="ticketForm.phone" placeholder="请输入人电话">
                <template #prefix><el-icon><Phone /></el-icon></template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="设备型号" required>
          <el-select v-model="ticketForm.model" placeholder="请选择设备型号" style="width: 100%;">
            <el-option label="TH-500GF" value="TH-500GF" />
            <el-option label="S-200X" value="S-200X" />
          </el-select>
        </el-form-item>

        <el-form-item label="故障类型" required>
          <el-select v-model="ticketForm.faultType" placeholder="电气系统故障" style="width: 100%;">
            <el-option label="电气系统故障" value="electrical" />
            <el-option label="机械故障" value="mechanical" />
            <el-option label="控制系统故障" value="control" />
          </el-select>
        </el-form-item>

        <el-form-item label="故障描述" required>
          <el-input
            v-model="ticketForm.desc"
            type="textarea"
            :rows="4"
            placeholder="请详细描述故障现象..."
          />
        </el-form-item>

        <el-form-item label="紧急程度" required>
          <el-select v-model="ticketForm.urgency" placeholder="紧急" style="width: 100%;">
            <el-option label="紧急" value="high" />
            <el-option label="一般" value="medium" />
            <el-option label="不紧急" value="low" />
          </el-select>
        </el-form-item>

        <el-form-item label="现场地址">
          <el-input v-model="ticketForm.address" placeholder="请输入人详细地址" />
        </el-form-item>

        <el-form-item label="故障照片">
          <div class="upload-area">
            <el-upload
              v-model:file-list="ticketForm.photos"
              :auto-upload="false"
              :on-change="handlePhotoChange"
              :on-remove="handlePhotoRemove"
              list-type="picture-card"
              :limit="9"
              accept="image/*"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
            <div class="upload-tip">支持jpg、png格式，最多上传9张</div>
          </div>
        </el-form-item>

        <el-form-item label="设备铭牌">
          <el-input v-model="ticketForm.devicePlate" placeholder="请输入设备铭牌信息" size="small" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="showCreateTicket = false">取消</el-button>
        <el-button type="primary" @click="submitTicket">提交工单</el-button>
      </template>
    </el-dialog>

    <!-- 工单详情对话框 -->
    <el-dialog
      v-model="showTicketDetail"
      :title="`工单详情 - ${currentTicket?.id}`"
      width="900px"
    >
      <div v-if="currentTicket" class="ticket-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="工单状态">
            <el-tag :type="getStatusType(currentTicket.status)" size="small">
              {{ getStatusText(currentTicket.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="紧急程度">
            <el-tag :type="getUrgencyType(currentTicket.urgency)" size="small">
              {{ currentTicket.urgency }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="客户姓名">{{ currentTicket.clientName }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ currentTicket.phone }}</el-descriptions-item>
          <el-descriptions-item label="设备型号">{{ currentTicket.model }}</el-descriptions-item>
          <el-descriptions-item label="设备序列号">{{ currentTicket.serialNo }}</el-descriptions-item>
          <el-descriptions-item label="故障类型" :span="2">{{ currentTicket.faultType }}</el-descriptions-item>
          <el-descriptions-item label="故障描述" :span="2">{{ currentTicket.faultDesc }}</el-descriptions-item>
          <el-descriptions-item label="现场地址" :span="2">{{ currentTicket.address }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ currentTicket.createdAt }}</el-descriptions-item>
          <el-descriptions-item label="工程师">{{ currentTicket.engineer }}</el-descriptions-item>
        </el-descriptions>

        <div class="ticket-section">
          <h3><el-icon><Picture /></el-icon> 故障图片</h3>
          <div class="image-grid">
            <div class="image-placeholder">图片 1</div>
            <div class="image-placeholder">图片 2</div>
            <div class="image-placeholder add-image">
              <el-icon><Plus /></el-icon>
              <span>添加图片</span>
            </div>
          </div>
        </div>

        <div class="ticket-section">
          <h3><el-icon><Clock /></el-icon> 处理记录</h3>
          <el-timeline>
            <el-timeline-item
              v-for="record in currentTicket.records"
              :key="record.time"
              :timestamp="record.time"
            >
              {{ record.action }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>

      <template #footer>
        <el-button @click="showTicketDetail = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 分配工单对话框 -->
    <el-dialog
      v-model="showAssignDialog"
      title="分配工单"
      width="400px"
    >
      <p>正在为工单 <strong>{{ currentTicket?.id }}</strong> 指派处理人</p>
      <el-form-item label="选择处理人/部门" style="margin-top: 20px;">
        <el-select v-model="assignee" placeholder="请选择..." style="width: 100%;">
          <el-option label="张三(售后部)" value="张三" />
          <el-option label="李四(技术部)" value="李四" />
          <el-option label="王五(区域经理)" value="王五" />
        </el-select>
      </el-form-item>

      <template #footer>
        <el-button @click="showAssignDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmAssign" :disabled="!assignee">确认分配</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import {
  ChatDotRound,
  DataAnalysis,
  ChatLineRound,
  Document,
  User,
  Reading,
  Clock,
  Setting,
  Plus,
  Phone,
  Warning,
  Search,
  CircleClose,
  Paperclip,
  Promotion,
  Select,
  CircleCheck,
  UserFilled,
  Edit,
  MagicStick,
  Picture,
  ArrowDown,
  FolderOpened,
  Upload,
  View,
  Download,
  Tools,
  QuestionFilled,
  Tickets,
  Service
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 当前视图
const activeView = ref('chat')

// 历史对话
const currentChatId = ref(1)
const chatHistory = ref([
  { id: 1, title: '发电机故障咨询', time: '今天 10:30' },
  { id: 2, title: '设备维保规范查询', time: '今天 09:15' },
  { id: 3, title: '配件更换流程', time: '昨天 16:42' },
  { id: 4, title: 'TH-500GF参数查询', time: '昨天 14:20' },
  { id: 5, title: '巡检报告模板', time: '12月10日' },
  { id: 6, title: '客户投诉处理流程', time: '12月09日' }
])

const startNewChat = () => {
  const newId = Date.now()
  chatHistory.value.unshift({
    id: newId,
    title: '新对话',
    time: '刚刚'
  })
  currentChatId.value = newId
  messages.value = [
    { id: 1, role: 'assistant', text: '您好，欢迎使用泰豪智能客服，请问有什么可以帮您的？', time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }) }
  ]
}

const loadChat = (chatId) => {
  currentChatId.value = chatId
  // 模拟加载历史对话
  messages.value = [
    { id: 1, role: 'assistant', text: '您好，欢迎使用泰豪智能客服，请问有什么可以帮您的？', time: '10:00' }
  ]
}

// 聊天相关
const messages = ref([
  { id: 1, role: 'assistant', text: '您好，欢迎使用泰豪智能客服，请问有什么可以帮您的？', time: '10:00' }
])
const inputText = ref('')
const messagesRef = ref(null)

const sendMessage = () => {
  if (!inputText.value.trim()) return
  messages.value.push({
    id: Date.now(),
    role: 'user',
    text: inputText.value,
    time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  })
  inputText.value = ''
}

const quickReply = (text) => {
  inputText.value = text
  sendMessage()
}

// 工单历史
const recentTickets = ref([
  { id: 'TH20241117001', title: '发电机启动失败 - 远程诊断中', time: '更新于 2小时前', status: 'processing' },
  { id: 'TH20241115042', title: '季度例行巡检报告', time: '2024-11-15 13时', status: 'resolved' },
  { id: 'TH20241022089', title: '滤芯配件更换申请', time: '2024-10-22', status: 'closed' },
  { id: 'TH20240910033', title: '控制器固件升级咨询', time: '2024-09-10', status: 'closed' }
])

// 数据中台
const timeRange = ref('today')

// 工单管理
const ticketStatusFilter = ref('')
const ticketTypeFilter = ref('')
const ticketDateFilter = ref(null)

const tickets = ref([
  {
    id: 'GD2025052001',
    client: '上海中心大厦项目部',
    issueType: '技术故障',
    urgency: '高',
    status: 'processing',
    createdAt: '2025-05-20 10:00',
    clientName: '李经理',
    phone: '13800138001',
    model: 'TH-500GF',
    serialNo: 'TH2023051001',
    faultType: '控制系统故障',
    faultDesc: '发电机组无法启动，控制面板显示E03错误代码',
    address: '北京市朝阳区建国路88号',
    engineer: '张三',
    records: [
      { time: '16:45', action: '更换控制器主板' },
      { time: '16:30', action: '发现控制器主板故障' },
      { time: '16:15', action: '到达现场，开始检查设备' }
    ]
  },
  {
    id: 'GD2025052002',
    client: '腾讯滨海大厦',
    issueType: '配件需求',
    urgency: '低',
    status: 'pending',
    createdAt: '2025-05-20 11:30',
    clientName: '王工',
    phone: '13900139001',
    model: 'S-200X',
    serialNo: 'S2023061002',
    faultType: '配件需求',
    faultDesc: '需要更换机油滤芯',
    address: '深圳市南山区科技园',
    engineer: '-',
    records: []
  },
  {
    id: 'GD2025052003',
    client: '南昌地铁2号线',
    issueType: '服务咨询',
    urgency: '中',
    status: 'resolved',
    createdAt: '2025-05-19 15:45',
    clientName: '赵主任',
    phone: '13700137001',
    model: 'TH-500GF',
    serialNo: 'TH2023071003',
    faultType: '服务咨询',
    faultDesc: '咨询年度维保合同续签事宜',
    address: '南昌市红谷滩新区',
    engineer: '李四',
    records: [
      { time: '17:00', action: '已完成合同续签' },
      { time: '16:30', action: '发送合同文件' }
    ]
  }
])

const filteredTickets = computed(() => {
  return tickets.value.filter(t => {
    if (ticketStatusFilter.value && t.status !== ticketStatusFilter.value) return false
    return true
  })
})

// 用户管理
const userTab = ref('internal')
const employeeSearch = ref('')
const customerSearch = ref('')
const consultSort = ref('')
const ticketSort = ref('')

const employees = ref([
  { name: '张三', dept: '售后服务部', role: '管理员', phone: '13800138000', status: '正常' },
  { name: '李四', dept: '技术支持部', role: '技术专家', phone: '13900139001', status: '正常' }
])

const customers = ref([
  { nickname: 'User_A', openId: 'wx_882190...', company: '上海中心项目部', consultCount: 12, ticketCount: 3 },
  { nickname: 'User_B (王工)', openId: 'wx_993211...', company: '腾讯滨海大厦', consultCount: 5, ticketCount: 1 },
  { nickname: 'User_C', openId: 'wx_774322...', company: '南昌地铁', consultCount: 2, ticketCount: 0 },
  { nickname: 'User_D', openId: 'wx_112233...', company: '万达广场', consultCount: 15, ticketCount: 5 },
  { nickname: 'User_E', openId: 'wx_445566...', company: '华为基地', consultCount: 8, ticketCount: 2 }
])

const roles = ref([
  { id: 1, name: '系统管理员', desc: '拥有所有权限', users: 3, perms: 10 },
  { id: 2, name: '客服专员', desc: '处理客户咨询', users: 8, perms: 5 },
  { id: 3, name: '技术支持', desc: '处理技术工单', users: 5, perms: 6 }
])

// 知识库管理
const knowledgeExpanded = ref(true)

// 外部知识库
const activeExternalCategory = ref('device-guide')
const externalFileSearch = ref('')
const showExternalUploadDialog = ref(false)
const externalAiRecognizing = ref(false)
const externalUploadForm = ref({
  name: '',
  category: '',
  uploader: '张三'
})

const externalCategories = ref([
  { key: 'device-guide', name: '设备操作指南', count: 24, icon: 'Tools', color: '#409eff' },
  { key: 'fault-solution', name: '常见故障解决方案', count: 36, icon: 'QuestionFilled', color: '#e6a23c' },
  { key: 'service-policy', name: '三包外服务政策', count: 12, icon: 'Tickets', color: '#67c23a' },
  { key: 'parts-consult', name: '配件咨询话术', count: 18, icon: 'Service', color: '#909399' }
])

const externalFiles = ref([
  { id: 1, name: 'TH-500GF发电机组操作手册.pdf', category: 'device-guide', uploader: '张三', uploadTime: '2025-01-10 10:30' },
  { id: 2, name: 'S-200X静音发电机使用指南.pdf', category: 'device-guide', uploader: '李四', uploadTime: '2025-01-08 14:20' },
  { id: 3, name: '发电机无法启动故障排查指南.pdf', category: 'fault-solution', uploader: '王五', uploadTime: '2025-01-05 09:15' },
  { id: 4, name: '电压不稳定常见原因及解决方案.docx', category: 'fault-solution', uploader: '张三', uploadTime: '2025-01-03 16:45' },
  { id: 5, name: '三包服务政策说明书(2025版).pdf', category: 'service-policy', uploader: '李四', uploadTime: '2024-12-20 11:00' },
  { id: 6, name: '延保服务套餐介绍.pdf', category: 'service-policy', uploader: '张三', uploadTime: '2024-12-15 15:30' },
  { id: 7, name: '配件价格查询话术模板.docx', category: 'parts-consult', uploader: '王五', uploadTime: '2024-12-10 09:00' },
  { id: 8, name: '滤芯更换周期咨询话术.docx', category: 'parts-consult', uploader: '李四', uploadTime: '2024-12-08 14:00' }
])

const currentExternalCategoryName = computed(() => {
  const cat = externalCategories.value.find(c => c.key === activeExternalCategory.value)
  return cat ? cat.name : ''
})

const filteredExternalFiles = computed(() => {
  return externalFiles.value.filter(f => {
    if (f.category !== activeExternalCategory.value) return false
    if (externalFileSearch.value && !f.name.includes(externalFileSearch.value)) return false
    return true
  })
})

// 内部知识库
const activeInternalCategory = ref('tech-manual')
const internalFileSearch = ref('')
const showInternalUploadDialog = ref(false)
const internalAiRecognizing = ref(false)
const internalUploadForm = ref({
  name: '',
  category: '',
  uploader: '张三'
})

const internalCategories = ref([
  { key: 'tech-manual', name: '技术维修手册', count: 45, icon: 'Tools', color: '#409eff' },
  { key: 'product-params', name: '产品参数明细', count: 28, icon: 'Document', color: '#67c23a' },
  { key: 'service-process', name: '内部服务流程规范', count: 15, icon: 'Tickets', color: '#e6a23c' },
  { key: 'service-script', name: '客户服务话术模板', count: 22, icon: 'Service', color: '#909399' }
])

const internalFiles = ref([
  { id: 1, name: 'TH系列发电机维修手册(内部版).pdf', category: 'tech-manual', uploader: '技术部', uploadTime: '2025-01-12 09:00' },
  { id: 2, name: 'S系列静音发电机拆装指南.pdf', category: 'tech-manual', uploader: '技术部', uploadTime: '2025-01-10 11:30' },
  { id: 3, name: '控制系统故障诊断流程.pdf', category: 'tech-manual', uploader: '技术部', uploadTime: '2025-01-08 14:00' },
  { id: 4, name: 'TH-500GF产品参数表.xlsx', category: 'product-params', uploader: '产品部', uploadTime: '2025-01-05 10:00' },
  { id: 5, name: 'S-200X技术规格书.pdf', category: 'product-params', uploader: '产品部', uploadTime: '2025-01-03 15:30' },
  { id: 6, name: '售后服务标准流程(内部).pdf', category: 'service-process', uploader: '服务部', uploadTime: '2024-12-28 09:00' },
  { id: 7, name: '工单处理规范V2.0.docx', category: 'service-process', uploader: '服务部', uploadTime: '2024-12-25 11:00' },
  { id: 8, name: '电话接待话术模板(内部).docx', category: 'service-script', uploader: '培训部', uploadTime: '2024-12-20 14:00' },
  { id: 9, name: '投诉处理话术指南.docx', category: 'service-script', uploader: '培训部', uploadTime: '2024-12-18 16:30' }
])

const currentInternalCategoryName = computed(() => {
  const cat = internalCategories.value.find(c => c.key === activeInternalCategory.value)
  return cat ? cat.name : ''
})

const filteredInternalFiles = computed(() => {
  return internalFiles.value.filter(f => {
    if (f.category !== activeInternalCategory.value) return false
    if (internalFileSearch.value && !f.name.includes(internalFileSearch.value)) return false
    return true
  })
})

// 文件操作
const handleExternalFileChange = (file) => {
  externalUploadForm.value.name = file.name.replace(/\.[^.]+$/, '')
}

const handleInternalFileChange = (file) => {
  internalUploadForm.value.name = file.name.replace(/\.[^.]+$/, '')
}

const aiRecognizeExternalFile = () => {
  externalAiRecognizing.value = true
  setTimeout(() => {
    const categoryMap = {
      '操作': 'device-guide',
      '指南': 'device-guide',
      '故障': 'fault-solution',
      '解决': 'fault-solution',
      '三包': 'service-policy',
      '服务': 'service-policy',
      '配件': 'parts-consult',
      '话术': 'parts-consult'
    }
    for (const [keyword, category] of Object.entries(categoryMap)) {
      if (externalUploadForm.value.name.includes(keyword)) {
        externalUploadForm.value.category = category
        break
      }
    }
    if (!externalUploadForm.value.category) {
      externalUploadForm.value.category = 'device-guide'
    }
    externalAiRecognizing.value = false
    ElMessage.success('AI识别完成，已自动填充分类信息')
  }, 1500)
}

const aiRecognizeInternalFile = () => {
  internalAiRecognizing.value = true
  setTimeout(() => {
    const categoryMap = {
      '维修': 'tech-manual',
      '手册': 'tech-manual',
      '参数': 'product-params',
      '规格': 'product-params',
      '流程': 'service-process',
      '规范': 'service-process',
      '话术': 'service-script',
      '模板': 'service-script'
    }
    for (const [keyword, category] of Object.entries(categoryMap)) {
      if (internalUploadForm.value.name.includes(keyword)) {
        internalUploadForm.value.category = category
        break
      }
    }
    if (!internalUploadForm.value.category) {
      internalUploadForm.value.category = 'tech-manual'
    }
    internalAiRecognizing.value = false
    ElMessage.success('AI识别完成，已自动填充分类信息')
  }, 1500)
}

const confirmExternalUpload = () => {
  if (!externalUploadForm.value.name || !externalUploadForm.value.category) {
    ElMessage.warning('请填写完整信息')
    return
  }
  externalFiles.value.unshift({
    id: Date.now(),
    name: externalUploadForm.value.name + '.pdf',
    category: externalUploadForm.value.category,
    uploader: externalUploadForm.value.uploader,
    uploadTime: new Date().toLocaleString('zh-CN', { hour12: false }).replace(/\//g, '-')
  })
  // 更新分类计数
  const cat = externalCategories.value.find(c => c.key === externalUploadForm.value.category)
  if (cat) cat.count++
  
  showExternalUploadDialog.value = false
  externalUploadForm.value = { name: '', category: '', uploader: '张三' }
  ElMessage.success('文件上传成功')
}

const confirmInternalUpload = () => {
  if (!internalUploadForm.value.name || !internalUploadForm.value.category) {
    ElMessage.warning('请填写完整信息')
    return
  }
  internalFiles.value.unshift({
    id: Date.now(),
    name: internalUploadForm.value.name + '.pdf',
    category: internalUploadForm.value.category,
    uploader: internalUploadForm.value.uploader,
    uploadTime: new Date().toLocaleString('zh-CN', { hour12: false }).replace(/\//g, '-')
  })
  // 更新分类计数
  const cat = internalCategories.value.find(c => c.key === internalUploadForm.value.category)
  if (cat) cat.count++
  
  showInternalUploadDialog.value = false
  internalUploadForm.value = { name: '', category: '', uploader: '张三' }
  ElMessage.success('文件上传成功')
}

const previewKnowledgeFile = (file) => {
  ElMessage.info(`正在预览：${file.name}`)
}

const downloadKnowledgeFile = (file) => {
  ElMessage.success(`开始下载：${file.name}`)
}

// 创建工单
const showCreateTicket = ref(false)
const extracting = ref(false)
const ticketForm = ref({
  name: '',
  phone: '',
  model: '',
  faultType: '',
  desc: '',
  urgency: '',
  address: '',
  devicePlate: '',
  photos: []
})

const aiExtract = () => {
  extracting.value = true
  setTimeout(() => {
    ticketForm.value = {
      name: '李明(AI识别)',
      phone: '13900139000 (AI识别)',
      model: 'TH-500GF',
      faultType: 'electrical',
      desc: '设备无法启动，显示错误代码E03',
      urgency: 'high',
      address: '',
      devicePlate: '',
      photos: []
    }
    extracting.value = false
    ElMessage.success('AI提取完成！')
  }, 1200)
}

const handlePhotoChange = (file, fileList) => {
  // 验证文件类型
  const isImage = file.raw.type.startsWith('image/')
  if (!isImage) {
    ElMessage.error('只能上传图片文件！')
    fileList.pop()
    return
  }
  
  // 验证文件大小（限制5MB）
  const isLt5M = file.raw.size / 1024 / 1024 < 5
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过 5MB！')
    fileList.pop()
    return
  }
  
  ticketForm.value.photos = fileList
  ElMessage.success(`已添加图片：${file.name}`)
}

const handlePhotoRemove = (file, fileList) => {
  ticketForm.value.photos = fileList
  ElMessage.info('已删除图片')
}

const submitTicket = () => {
  // 验证必填字段
  if (!ticketForm.value.name || !ticketForm.value.phone || !ticketForm.value.model || 
      !ticketForm.value.faultType || !ticketForm.value.desc || !ticketForm.value.urgency) {
    ElMessage.warning('请填写所有必填项！')
    return
  }
  
  // 显示上传的图片数量
  const photoCount = ticketForm.value.photos.length
  const message = photoCount > 0 
    ? `工单创建成功！已上传 ${photoCount} 张图片` 
    : '工单创建成功！'
  
  ElMessage.success(message)
  showCreateTicket.value = false
  
  // 重置表单
  ticketForm.value = {
    name: '',
    phone: '',
    model: '',
    faultType: '',
    desc: '',
    urgency: '',
    address: '',
    devicePlate: '',
    photos: []
  }
}

// 工单详情
const showTicketDetail = ref(false)
const currentTicket = ref(null)

const viewTicketDetail = (ticket) => {
  currentTicket.value = ticket
  showTicketDetail.value = true
}

// 分配工单
const showAssignDialog = ref(false)
const assignee = ref('')

const assignTicket = (ticket) => {
  currentTicket.value = ticket
  assignee.value = ''
  showAssignDialog.value = true
}

const confirmAssign = () => {
  ElMessage.success(`工单已分配给 ${assignee.value}`)
  showAssignDialog.value = false
}

const addRemark = (ticket) => {
  ElMessage.info(`添加备注：${ticket.id}`)
}

// 辅助函数
const getStatusType = (status) => {
  const map = {
    'processing': 'warning',
    'pending': '',
    'resolved': 'success',
    'closed': 'info'
  }
  return map[status] || ''
}

const getStatusText = (status) => {
  const map = {
    'processing': '处理中',
    'pending': '待分配',
    'resolved': '已完成',
    'closed': '已关闭'
  }
  return map[status] || status
}

const getUrgencyType = (urgency) => {
  const map = {
    '高': 'danger',
    '中': 'warning',
    '低': 'info'
  }
  return map[urgency] || ''
}
</script>

<style lang="scss" scoped>
.service-system {
  display: flex;
  height: 100vh;
  background: #f5f7fa;
}

// 侧边栏
.service-sidebar {
  width: 200px;
  background: #fff;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  
  .sidebar-header {
    padding: 20px 16px;
    border-bottom: 1px solid #e4e7ed;
    
    h2 {
      font-size: 16px;
      margin: 0;
      color: #303133;
    }
  }
  
  .nav-section {
    padding: 12px 8px;
    
    .section-title {
      font-size: 12px;
      color: #909399;
      padding: 8px 12px;
      margin-bottom: 4px;
    }
    
    .nav-item.new-chat {
      background: #409eff;
      color: #fff;
      
      &:hover {
        background: #66b1ff;
      }
    }
    
    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      margin-bottom: 2px;
      border-radius: 6px;
      cursor: pointer;
      color: #606266;
      transition: all 0.2s;
      
      &:hover {
        background: #f5f7fa;
      }
      
      &.active {
        background: #ecf5ff;
        color: #409eff;
      }
      
      &.has-children {
        .expand-icon {
          margin-left: auto;
          transition: transform 0.2s;
        }
        
        &.expanded .expand-icon {
          transform: rotate(180deg);
        }
      }
      
      span {
        font-size: 14px;
      }
    }
    
    .sub-nav-items {
      padding-left: 20px;
      
      .sub-nav-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        margin-bottom: 2px;
        border-radius: 6px;
        cursor: pointer;
        color: #909399;
        font-size: 13px;
        transition: all 0.2s;
        
        &:hover {
          background: #f5f7fa;
          color: #606266;
        }
        
        &.active {
          background: #ecf5ff;
          color: #409eff;
        }
        
        .el-icon {
          font-size: 14px;
        }
      }
    }
  }
  
  .chat-history {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px;
    
    .history-title {
      font-size: 12px;
      color: #909399;
      padding: 8px 12px;
      margin-bottom: 4px;
    }
    
    .history-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    
    .history-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 6px;
      cursor: pointer;
      color: #606266;
      transition: all 0.2s;
      
      &:hover {
        background: #f5f7fa;
      }
      
      &.active {
        background: #ecf5ff;
        color: #409eff;
      }
      
      .el-icon {
        font-size: 16px;
        flex-shrink: 0;
      }
      
      .history-info {
        flex: 1;
        min-width: 0;
        
        .history-name {
          font-size: 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .history-time {
          font-size: 12px;
          color: #909399;
          margin-top: 2px;
        }
      }
    }
  }
  
  .sidebar-footer {
    margin-top: auto;
    padding: 16px;
    text-align: center;
    font-size: 12px;
    color: #c0c4cc;
    border-top: 1px solid #e4e7ed;
  }
}

// 主内容区
.service-main {
  flex: 1;
  overflow-y: auto;
  background: #f5f7fa;
}

.view-header {
  padding: 24px 32px;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  
  h1 {
    font-size: 24px;
    margin: 0 0 8px 0;
    color: #303133;
  }
  
  .subtitle {
    font-size: 14px;
    color: #909399;
    margin: 0;
  }
}

// 聊天视图
.view-chat {
  .chat-header {
    padding: 24px 32px;
    background: #fff;
    border-bottom: 1px solid #e4e7ed;
    
    h1 {
      font-size: 24px;
      margin: 0 0 8px 0;
      color: #303133;
    }
    
    .subtitle {
      font-size: 14px;
      color: #909399;
      margin: 0;
    }
  }
  
  .chat-layout {
    display: flex;
    gap: 24px;
    padding: 24px 32px;
    height: calc(100vh - 120px);
  }
  
  .chat-area {
    flex: 1;
    background: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .ai-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #e4e7ed;
    
    .ai-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #f0f2f5;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }
    
    .ai-details {
      flex: 1;
    }
    
    .ai-name {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 4px;
    }
    
    .ai-status {
      font-size: 12px;
      color: #67c23a;
      display: flex;
      align-items: center;
      gap: 6px;
      
      .status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #67c23a;
        animation: pulse 2s infinite;
      }
    }
  }
  
  .messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: #f5f7fa;
    
    .message {
      display: flex;
      margin-bottom: 16px;
      
      &.user {
        justify-content: flex-end;
        
        .message-content {
          background: #409eff;
          color: #fff;
        }
      }
      
      .message-content {
        max-width: 60%;
        padding: 12px 16px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      }
      
      .message-text {
        line-height: 1.6;
        word-wrap: break-word;
      }
      
      .message-time {
        font-size: 11px;
        color: #c0c4cc;
        margin-top: 6px;
      }
    }
  }
  
  .quick-actions {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid #e4e7ed;
    border-bottom: 1px solid #e4e7ed;
    background: #fff;
    
    .quick-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      background: #f5f7fa;
      border: 1px solid #e4e7ed;
      border-radius: 16px;
      font-size: 13px;
      color: #606266;
      cursor: pointer;
      transition: all 0.2s;
      
      &:hover {
        background: #ecf5ff;
        border-color: #409eff;
        color: #409eff;
      }
    }
  }
  
  .input-area {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #fff;
    
    .attach-icon {
      font-size: 20px;
      color: #909399;
      cursor: pointer;
    }
  }
  
  .ticket-history {
    width: 320px;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    overflow-y: auto;
    
    .history-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      
      h3 {
        font-size: 16px;
        margin: 0;
        color: #303133;
      }
    }
    
    .history-item {
      padding: 12px;
      margin-bottom: 12px;
      border: 1px solid #e4e7ed;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
      
      &:hover {
        border-color: #409eff;
        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
      }
      
      .ticket-id {
        font-size: 12px;
        color: #909399;
        margin-bottom: 4px;
      }
      
      .ticket-title {
        font-size: 14px;
        color: #303133;
        margin-bottom: 8px;
        line-height: 1.4;
      }
      
      .ticket-meta {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: #c0c4cc;
        margin-bottom: 8px;
      }
    }
  }
}

// 数据中台
.view-stats {
  .stats-section {
    padding: 24px 32px;
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h2 {
      font-size: 18px;
      margin: 0;
      color: #303133;
    }
    
    .time-tabs {
      display: flex;
      gap: 8px;
      
      button {
        padding: 6px 16px;
        background: #fff;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        cursor: pointer;
        color: #606266;
        transition: all 0.2s;
        
        &.active {
          background: #409eff;
          border-color: #409eff;
          color: #fff;
        }
      }
    }
  }
  
  .stats-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
  }
  
  .stat-card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    gap: 16px;
    
    .stat-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #fff;
      
      &.chat-icon { background: #409eff; }
      &.success-icon { background: #67c23a; }
      &.warning-icon { background: #e6a23c; }
      &.complete-icon { background: #67c23a; }
    }
    
    .stat-info {
      flex: 1;
    }
    
    .stat-label {
      font-size: 14px;
      color: #909399;
      margin-bottom: 8px;
    }
    
    .stat-value {
      font-size: 28px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 4px;
    }
    
    .stat-change {
      font-size: 12px;
      
      &.positive {
        color: #67c23a;
      }
    }
  }
  
  .charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  
  .chart-card {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    
    h3 {
      font-size: 16px;
      margin: 0 0 8px 0;
      color: #303133;
    }
    
    .chart-subtitle {
      font-size: 12px;
      color: #909399;
      margin-bottom: 20px;
    }
  }
  
  .word-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 20px;
    
    .word {
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s;
      
      &:hover {
        background: #ecf5ff;
        color: #409eff;
      }
      
      &.size-xl { font-size: 28px; font-weight: 600; color: #303133; }
      &.size-lg { font-size: 22px; font-weight: 500; color: #409eff; }
      &.size-md { font-size: 18px; color: #606266; }
      &.size-sm { font-size: 14px; color: #909399; }
      &.size-xs { font-size: 12px; color: #c0c4cc; }
    }
  }
  
  .distribution-chart {
    .dist-item {
      margin-bottom: 16px;
    }
    
    .dist-label {
      font-size: 14px;
      color: #606266;
      margin-bottom: 8px;
    }
    
    .dist-bar {
      height: 24px;
      background: #f5f7fa;
      border-radius: 4px;
      overflow: hidden;
    }
    
    .dist-fill {
      height: 100%;
      transition: width 0.3s;
    }
  }
}

// 工单管理
.view-tickets {
  .tickets-section {
    padding: 24px 32px;
    background: #fff;
    margin: 24px 32px;
    border-radius: 8px;
  }
  
  .section-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h2 {
      font-size: 18px;
      margin: 0;
      color: #303133;
    }
    
    .toolbar-actions {
      display: flex;
      gap: 12px;
    }
  }
}

// 用户管理
.view-users {
  .users-section {
    padding: 24px 32px;
    background: #fff;
    margin: 24px 32px;
    border-radius: 8px;
  }
  
  .tab-toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
  }
  
  .user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .roles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  
  .role-card {
    padding: 20px;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    
    .role-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 12px;
    }
    
    .role-desc {
      font-size: 14px;
      color: #909399;
      margin-bottom: 16px;
    }
    
    .role-stats {
      display: flex;
      gap: 16px;
      font-size: 13px;
      color: #606266;
    }
  }
}

// 知识库管理
.view-knowledge {
  .knowledge-content {
    padding: 24px 32px;
  }
  
  .knowledge-categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
  }
  
  .category-card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    
    &:hover {
      border-color: #409eff;
      box-shadow: 0 2px 12px rgba(64, 158, 255, 0.15);
    }
    
    &.active {
      border-color: #409eff;
      background: #ecf5ff;
    }
    
    .el-icon {
      font-size: 32px;
    }
    
    .category-name {
      font-size: 14px;
      font-weight: 600;
      color: #303133;
    }
    
    .category-count {
      font-size: 12px;
      color: #909399;
    }
  }
  
  .knowledge-files-section {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
  }
  
  .section-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h3 {
      font-size: 16px;
      margin: 0;
      color: #303133;
    }
    
    .toolbar-actions {
      display: flex;
      gap: 12px;
    }
  }
  
  .file-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    
    .file-icon {
      color: #409eff;
      font-size: 18px;
    }
  }
}

// 工单详情
.ticket-detail {
  .ticket-section {
    margin-top: 24px;
    
    h3 {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      margin-bottom: 16px;
      color: #303133;
    }
  }
  
  .image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  
  .image-placeholder {
    aspect-ratio: 1;
    background: #f5f7fa;
    border: 1px dashed #dcdfe6;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #c0c4cc;
    cursor: pointer;
    
    &.add-image {
      &:hover {
        border-color: #409eff;
        color: #409eff;
      }
    }
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

// 图片上传区域
.upload-area {
  .upload-tip {
    margin-top: 8px;
    font-size: 12px;
    color: #909399;
  }
  
  :deep(.el-upload--picture-card) {
    width: 100px;
    height: 100px;
    line-height: 100px;
  }
  
  :deep(.el-upload-list--picture-card .el-upload-list__item) {
    width: 100px;
    height: 100px;
  }
  
  :deep(.el-upload-list__item-thumbnail) {
    object-fit: cover;
  }
}
</style>
