storlead-sasa-platform/ui/smarttrade-platform/src/views/SettingsView.vue

<template>
  <div class="settings-page">
    <div class="settings-header">
      <div class="header-left">
        <div class="data-title">⚙️ 系统设置</div>
        <p class="header-desc">管理账号、AI配置、营销渠道和通知偏好</p>
      </div>
      <div class="header-actions">
        <button class="btn btn-secondary" @click="resetAllSettings">
          <i class="fas fa-undo"></i> 重置默认
        </button>
        <button class="btn btn-primary" @click="saveAllSettings">
          <i class="fas fa-save"></i> 保存设置
        </button>
      </div>
    </div>

    <!-- Settings Grid -->
    <div class="settings-grid">
      <!-- Left Column -->
      <!-- <div class="settings-column">
        <div class="settings-section">
          <div class="section-header">
            <div class="section-icon" style="background: rgba(99, 102, 241, 0.2); color: var(--primary);">
              <i class="fas fa-user-shield"></i>
            </div>
            <div class="section-title">
              <h3>账号与安全</h3>
              <p>管理您的账户信息和安全设置</p>
            </div>
          </div>
          
          <div class="settings-list">
            <div class="profile-card">
              <div class="profile-avatar">
                <span>张</span>
                <button class="avatar-edit" @click="showAvatarModal = true">
                  <i class="fas fa-camera"></i>
                </button>
              </div>
              <div class="profile-info">
                <div class="profile-name">张经理</div>
                <div class="profile-role">销售总监</div>
                <div class="profile-email">zhang@company.com</div>
              </div>
              <button class="btn btn-secondary btn-sm" @click="showProfileModal = true">
                <i class="fas fa-edit"></i> 编辑
              </button>
            </div>

            <div class="settings-item" @click="showPasswordModal = true">
              <div class="item-icon" style="background: rgba(245, 158, 11, 0.2); color: var(--warning);">
                <i class="fas fa-key"></i>
              </div>
              <div class="item-content">
                <div class="item-title">修改密码</div>
                <div class="item-desc">定期更换密码，保护账号安全</div>
              </div>
              <div class="item-action">
                <button class="btn btn-secondary btn-sm">修改</button>
              </div>
            </div>

            <div class="settings-item">
              <div class="item-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--success);">
                <i class="fas fa-shield-alt"></i>
              </div>
              <div class="item-content">
                <div class="item-title">两步验证</div>
                <div class="item-desc">开启后登录需手机验证码，提升安全性</div>
              </div>
              <div class="item-action">
                <div class="toggle-switch" :class="{ active: settings.twoFactor }" @click="settings.twoFactor = !settings.twoFactor">
                  <span class="toggle-slider"></span>
                </div>
              </div>
            </div>

            <div class="settings-item" @click="showLoginHistoryModal = true">
              <div class="item-icon" style="background: rgba(139, 92, 246, 0.2); color: var(--secondary);">
                <i class="fas fa-history"></i>
              </div>
              <div class="item-content">
                <div class="item-title">登录历史</div>
                <div class="item-desc">查看最近的登录记录</div>
              </div>
              <div class="item-action">
                <span class="item-value">查看</span>
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>
          </div>
        </div>

        <div class="settings-section">
          <div class="section-header">
            <div class="section-icon" style="background: rgba(236, 72, 153, 0.2); color: #EC4899;">
              <i class="fas fa-brain"></i>
            </div>
            <div class="section-title">
              <h3>AI大脑配置</h3>
              <p>定制您的智能营销助手</p>
            </div>
          </div>
          
          <div class="settings-list">
            <div class="settings-item" @click="showModelModal = true">
              <div class="item-icon" style="background: rgba(99, 102, 241, 0.2); color: var(--primary);">
                <i class="fas fa-microchip"></i>
              </div>
              <div class="item-content">
                <div class="item-title">模型微调</div>
                <div class="item-desc">利用企业私有数据微调AI，使其更懂业务</div>
              </div>
              <div class="item-action">
                <span class="item-value success">
                  <i class="fas fa-check-circle"></i> v2.3
                </span>
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>

            <div class="settings-item" @click="showKnowledgeModal = true">
              <div class="item-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--success);">
                <i class="fas fa-book"></i>
              </div>
              <div class="item-content">
                <div class="item-title">知识库管理</div>
                <div class="item-desc">维护产品知识、商务条款、行业知识等</div>
              </div>
              <div class="item-action">
                <span class="item-value">1,247条</span>
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>

            <div class="settings-item">
              <div class="item-icon" style="background: rgba(6, 182, 212, 0.2); color: var(--info);">
                <i class="fas fa-graduation-cap"></i>
              </div>
              <div class="item-content">
                <div class="item-title">自动学习</div>
                <div class="item-desc">AI自动从邮件、聊天中学习新知识</div>
              </div>
              <div class="item-action">
                <div class="toggle-switch" :class="{ active: settings.autoLearn }" @click="settings.autoLearn = !settings.autoLearn">
                  <span class="toggle-slider"></span>
                </div>
              </div>
            </div>

            <div class="settings-item">
              <div class="item-icon" style="background: rgba(245, 158, 11, 0.2); color: var(--warning);">
                <i class="fas fa-rocket"></i>
              </div>
              <div class="item-content">
                <div class="item-title">策略自进化</div>
                <div class="item-desc">AI自动测试并优化营销策略</div>
              </div>
              <div class="item-action">
                <div class="toggle-switch" :class="{ active: settings.autoEvolve }" @click="settings.autoEvolve = !settings.autoEvolve">
                  <span class="toggle-slider"></span>
                </div>
              </div>
            </div>

            <div class="settings-item">
              <div class="item-icon" style="background: rgba(239, 68, 68, 0.2); color: var(--danger);">
                <i class="fas fa-brain"></i>
              </div>
              <div class="item-content">
                <div class="item-title">个性化程度</div>
                <div class="item-desc">控制AI生成内容的个性化程度</div>
              </div>
              <div class="item-action">
                <select class="mini-select" v-model="settings.personalizeLevel">
                  <option value="low">低</option>
                  <option value="medium">中</option>
                  <option value="high">高</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div> -->

      <!-- Right Column -->
      <div class="settings-column">
        <!-- Auto Prospect Config -->
        <!-- <div class="settings-section">
          <div class="section-header">
            <div class="section-icon" style="background: rgba(59, 130, 246, 0.2); color: #3B82F6;">
              <i class="fas fa-search"></i>
            </div>
            <div class="section-title">
              <h3>自动寻客配置</h3>
              <p>配置智能寻客的数据源和策略</p>
            </div>
          </div>
          
          <div class="settings-list">
            <div class="settings-item" @click="showDataSourceModal = true">
              <div class="item-icon" style="background: rgba(99, 102, 241, 0.2); color: var(--primary);">
                <i class="fas fa-database"></i>
              </div>
              <div class="item-content">
                <div class="item-title">数据源管理</div>
                <div class="item-desc">海关数据、LinkedIn、Google Maps等</div>
              </div>
              <div class="item-action">
                <span class="item-value success">8个已启用</span>
                <i class="fas fa-chevron-right"></i>
              </div>
            </div>

            <div class="settings-item">
              <div class="item-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--success);">
                <i class="fas fa-users"></i>
              </div>
              <div class="item-content">
                <div class="item-title">Lookalike算法</div>
                <div class="item-desc">基于成交客户特征，智能推荐相似潜客</div>
              </div>
              <div class="item-action">
                <div class="toggle-switch" :class="{ active: settings.lookalike }" @click="settings.lookalike = !settings.lookalike">
                  <span class="toggle-slider"></span>
                </div>
              </div>
            </div>

            <div class="settings-item">
              <div class="item-icon" style="background: rgba(236, 72, 153, 0.2); color: #EC4899;">
                <i class="fas fa-user-tie"></i>
              </div>
              <div class="item-content">
                <div class="item-title">关键人挖掘</div>
                <div class="item-desc">自动识别目标公司的采购决策人</div>
              </div>
              <div class="item-action">
                <div class="toggle-switch" :class="{ active: settings.decisionMaker }" @click="settings.decisionMaker = !settings.decisionMaker">
                  <span class="toggle-slider"></span>
                </div>
              </div>
            </div>

            <div class="settings-item">
              <div class="item-icon" style="background: rgba(245, 158, 11, 0.2); color: var(--warning);">
                <i class="fas fa-globe"></i>
              </div>
              <div class="item-content">
                <div class="item-title">官网智能分析</div>
                <div class="item-desc">分析客户官网，判断业务匹配度</div>
              </div>
              <div class="item-action">
                <div class="toggle-switch" :class="{ active: settings.websiteAnalysis }" @click="settings.websiteAnalysis = !settings.websiteAnalysis">
                  <span class="toggle-slider"></span>
                </div>
              </div>
            </div>
          </div>
        </div> -->

        <!-- Channel Integration -->
        <div class="settings-section">
          <div class="section-header">
            <div class="section-icon" style="background: rgba(34, 197, 94, 0.2); color: #22C55E;">
              <i class="fas fa-paper-plane"></i>
            </div>
            <div class="section-title">
              <h3>渠道集成</h3>
              <p>绑定营销渠道，启用多渠道触达</p>
            </div>
          </div>
          
          <div class="channel-list">
            <div class="channel-item" :class="{ connected: channels.email.connected }">
              <div class="channel-icon" style="background: rgba(99, 102, 241, 0.2); color: var(--primary);">
                <i class="fas fa-envelope"></i>
              </div>
              <div class="channel-content">
                <div class="channel-title">企业邮箱</div>
                <div class="channel-desc">{{ emailList.length > 0 ? emailList.length + '个账号已绑定' : '未绑定' }}</div>
              </div>
              <div class="channel-action">
                <button v-if="channels.email.connected" class="btn btn-secondary btn-sm" @click="openEmailModal">
                  <i class="fas fa-cog"></i> 管理
                </button>
                <button v-else class="btn btn-primary btn-sm" @click="openEmailModal">
                  <i class="fas fa-plus"></i> 绑定
                </button>
              </div>
            </div>

            <div class="channel-item" :class="{ connected: channels.whatsapp.connected }">
              <div class="channel-icon" style="background: rgba(37, 211, 102, 0.2); color: #25D366;">
                <i class="fab fa-whatsapp"></i>
              </div>
              <div class="channel-content">
                <div class="channel-title">WhatsApp Business</div>
                <div class="channel-desc">{{ channels.whatsapp.connected ? '已绑定: ' + channels.whatsapp.phone : '未绑定' }}</div>
              </div>
              <div class="channel-action">
                <span v-if="channels.whatsapp.connected" class="status-badge success">
                  <i class="fas fa-check"></i> 已连接
                </span>
                <button v-else class="btn btn-primary btn-sm">
                  <i class="fas fa-plus"></i> 绑定
                </button>
              </div>
            </div>

            <div class="channel-item" :class="{ connected: channels.linkedin.connected }">
              <div class="channel-icon" style="background: rgba(10, 102, 194, 0.2); color: #0A66C2;">
                <i class="fab fa-linkedin"></i>
              </div>
              <div class="channel-content">
                <div class="channel-title">LinkedIn</div>
                <div class="channel-desc">{{ channels.linkedin.connected ? channels.linkedin.connections + '个连接' : '未绑定' }}</div>
              </div>
              <div class="channel-action">
                <button class="btn btn-secondary btn-sm" @click="showLinkedInModal = true">
                  <i class="fas fa-cog"></i> 管理
                </button>
              </div>
            </div>

            <div class="channel-item" :class="{ connected: channels.wechat.connected }">
              <div class="channel-icon" style="background: rgba(7, 193, 96, 0.2); color: #07C160;">
                <i class="fab fa-weixin"></i>
              </div>
              <div class="channel-content">
                <div class="channel-title">企业微信</div>
                <div class="channel-desc">{{ channels.wechat.connected ? '已绑定' : '未绑定' }}</div>
              </div>
              <div class="channel-action">
                <button class="btn btn-secondary btn-sm" @click="showWeChatModal = true">
                  <i class="fas fa-cog"></i> 管理
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Notification Settings -->
        <!-- <div class="settings-section">
          <div class="section-header">
            <div class="section-icon" style="background: rgba(245, 158, 11, 0.2); color: var(--warning);">
              <i class="fas fa-bell"></i>
            </div>
            <div class="section-title">
              <h3>通知设置</h3>
              <p>管理通知偏好和提醒方式</p>
            </div>
          </div>
          
          <div class="settings-list">
            <div class="settings-item">
              <div class="item-icon" style="background: rgba(99, 102, 241, 0.2); color: var(--primary);">
                <i class="fas fa-envelope"></i>
              </div>
              <div class="item-content">
                <div class="item-title">邮件通知</div>
                <div class="item-desc">重要通知发送到邮箱</div>
              </div>
              <div class="item-action">
                <div class="toggle-switch" :class="{ active: settings.emailNotify }" @click="settings.emailNotify = !settings.emailNotify">
                  <span class="toggle-slider"></span>
                </div>
              </div>
            </div>

            <div class="settings-item">
              <div class="item-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--success);">
                <i class="fas fa-reply"></i>
              </div>
              <div class="item-content">
                <div class="item-title">客户回复提醒</div>
                <div class="item-desc">客户回复邮件、消息时即时提醒</div>
              </div>
              <div class="item-action">
                <div class="toggle-switch" :class="{ active: settings.replyNotify }" @click="settings.replyNotify = !settings.replyNotify">
                  <span class="toggle-slider"></span>
                </div>
              </div>
            </div>
          </div>
        </div> -->
      </div>
    </div>

    <!-- Toast -->
    <transition name="toast">
      <div v-if="showToast" class="toast" :class="toastType">
        <i :class="toastType === 'success' ? 'fas fa-check-circle' : 'fas fa-info-circle'"></i>
        {{ toastMessage }}
      </div>
    </transition>

    <!-- 模型微调弹窗 -->
    <div v-if="showModelModal" class="modal-overlay" @click.self="showModelModal = false">
      <div class="modal settings-modal wide">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-microchip"></i> AI模型微调配置</div>
          <button class="modal-close" @click="showModelModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="model-info-card">
            <div class="model-header">
              <div class="model-icon"><i class="fas fa-robot"></i></div>
              <div class="model-title">
                <h4>TradeBrain AI v2.3</h4>
                <span class="model-status">已训练</span>
              </div>
            </div>
            <div class="model-stats">
              <div class="model-stat">
                <span class="stat-label">训练数据量</span>
                <span class="stat-value">12,456 条</span>
              </div>
              <div class="model-stat">
                <span class="stat-label">最后训练</span>
                <span class="stat-value">2026-03-20</span>
              </div>
              <div class="model-stat">
                <span class="stat-label">准确率</span>
                <span class="stat-value">94.5%</span>
              </div>
            </div>
          </div>
          <div class="fine-tune-section">
            <h5><i class="fas fa-graduation-cap"></i> 微调训练</h5>
            <div class="form-group">
              <label class="form-label">训练数据来源</label>
              <select class="form-select">
                <option>全部历史邮件</option>
                <option>成交客户邮件</option>
                <option>自定义选择</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">训练频率</label>
              <select class="form-select">
                <option>每天自动</option>
                <option>每周</option>
                <option>手动</option>
              </select>
            </div>
            <button class="btn btn-primary" @click="showModelFineTuneModal = true">
              <i class="fas fa-play"></i> 开始训练
            </button>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showModelModal = false">关闭</button>
        </div>
      </div>
    </div>

    <!-- 数据源管理弹窗 -->
    <div v-if="showDataSourceModal" class="modal-overlay" @click.self="showDataSourceModal = false">
      <div class="modal settings-modal extra-wide">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-database"></i> 数据源管理中心</div>
          <button class="modal-close" @click="showDataSourceModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <!-- 统计概览 -->
          <div class="sources-overview">
            <div class="overview-card">
              <div class="overview-icon"><i class="fas fa-database"></i></div>
              <div class="overview-info">
                <div class="overview-value">{{ dataSources.filter(s => s.enabled).length }}</div>
                <div class="overview-label">已启用数据源</div>
              </div>
            </div>
            <div class="overview-card">
              <div class="overview-icon"><i class="fas fa-record-vinyl"></i></div>
              <div class="overview-info">
                <div class="overview-value">{{ dataSources.reduce((sum, s) => sum + s.recordsNum, 0).toLocaleString() }}</div>
                <div class="overview-label">总数据量</div>
              </div>
            </div>
            <div class="overview-card">
              <div class="overview-icon"><i class="fas fa-sync"></i></div>
              <div class="overview-info">
                <div class="overview-value">{{ dataSources.filter(s => s.lastSync.includes('2026-03-24')).length }}</div>
                <div class="overview-label">今日同步</div>
              </div>
            </div>
            <div class="overview-card">
              <div class="overview-icon"><i class="fas fa-globe"></i></div>
              <div class="overview-info">
                <div class="overview-value">200+</div>
                <div class="overview-label">覆盖国家</div>
              </div>
            </div>
          </div>

          <!-- 数据源列表 -->
          <div class="data-source-list">
            <div v-for="source in dataSources" :key="source.id" class="data-source-item" @click="showDataSourceDetail(source)">
              <div class="source-icon" :class="source.type">
                <i :class="{
                  'trade': 'fas fa-ship',
                  'linkedin': 'fab fa-linkedin',
                  'maps': 'fas fa-map-marked-alt',
                  'company': 'fas fa-building',
                  'exhibition': 'fas fa-calendar-alt',
                  'procurement': 'fas fa-shopping-cart',
                  'social': 'fas fa-share-alt',
                  'association': 'fas fa-users'
                }[source.type]"></i>
              </div>
              <div class="source-info">
                <div class="source-name">{{ source.name }}</div>
                <div class="source-meta">
                  <span><i class="fas fa-database"></i> {{ source.records }} 条</span>
                  <span><i class="fas fa-sync"></i> {{ source.lastSync }}</span>
                  <span><i class="fas fa-star"></i> 质量: {{ source.quality }}%</span>
                </div>
                <div class="source-desc">{{ source.description }}</div>
              </div>
              <div class="source-status" :class="source.enabled ? 'active' : 'inactive'">
                <i :class="source.enabled ? 'fas fa-check-circle' : 'fas fa-pause-circle'"></i>
                {{ source.enabled ? '已启用' : '已暂停' }}
              </div>
              <div class="source-action">
                <button class="btn btn-sm" :class="source.enabled ? 'btn-secondary' : 'btn-primary'">
                  <i :class="source.enabled ? 'fas fa-pause' : 'fas fa-play'"></i>
                </button>
              </div>
            </div>
          </div>

          <!-- 外贸数据源配置 -->
          <div class="foreign-trade-section">
            <h4><i class="fas fa-globe-americas"></i> 外贸数据源快速入口</h4>
            <div class="quick-source-grid">
              <div class="quick-source-card">
                <i class="fas fa-ship"></i>
                <span>海关数据</span>
                <button class="btn btn-sm btn-primary" @click="selectedQuickSource = {name:'海关数据',type:'trade'}; showQuickSourceModal = true">配置</button>
              </div>
              <div class="quick-source-card">
                <i class="fab fa-linkedin"></i>
                <span>LinkedIn</span>
                <button class="btn btn-sm btn-primary" @click="selectedQuickSource = {name:'LinkedIn',type:'linkedin'}; showQuickSourceModal = true">配置</button>
              </div>
              <div class="quick-source-card">
                <i class="fas fa-calendar-alt"></i>
                <span>展会数据</span>
                <button class="btn btn-sm btn-secondary" @click="selectedQuickSource = {name:'展会数据',type:'exhibition'}; showQuickSourceModal = true">启用</button>
              </div>
              <div class="quick-source-card">
                <i class="fas fa-shopping-cart"></i>
                <span>采购数据</span>
                <button class="btn btn-sm btn-primary" @click="selectedQuickSource = {name:'采购数据',type:'procurement'}; showQuickSourceModal = true">配置</button>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showDataSourceModal = false">关闭</button>
          <button class="btn btn-primary" @click="showAddDataSourceModal = true"><i class="fas fa-plus"></i> 添加数据源</button>
        </div>
      </div>
    </div>

    <!-- 添加数据源弹窗 -->
    <div v-if="showAddDataSourceModal" class="modal-overlay" @click.self="showAddDataSourceModal = false">
      <div class="modal settings-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fas fa-plus-circle"></i> 添加数据源</div>
          <button class="modal-close" @click="showAddDataSourceModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label">数据源类型 <span class="required">*</span></label>
            <select class="form-select">
              <option value="">请选择数据源类型</option>
              <option value="trade">海关数据</option>
              <option value="linkedin">LinkedIn</option>
              <option value="maps">Google Maps</option>
              <option value="company">企业数据库</option>
              <option value="exhibition">展会数据</option>
              <option value="procurement">采购数据</option>
              <option value="social">社交媒体</option>
              <option value="association">行业协会</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">数据源名称 <span class="required">*</span></label>
            <input type="text" class="form-input" placeholder="请输入数据源名称">
          </div>
          <div class="form-group">
            <label class="form-label">API密钥 / 账号</label>
            <input type="text" class="form-input" placeholder="请输入API密钥或账号">
          </div>
          <div class="form-group">
            <label class="form-label">API密码 / 密钥</label>
            <input type="password" class="form-input" placeholder="请输入API密码或密钥">
          </div>
          <div class="form-group">
            <label class="form-label">数据覆盖地区</label>
            <select class="form-select">
              <option value="global">全球</option>
              <option value="china">中国</option>
              <option value="asia">亚洲</option>
              <option value="europe">欧洲</option>
              <option value="americas">美洲</option>
              <option value="middle-east">中东</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">自动同步频率</label>
            <select class="form-select">
              <option value="daily">每天</option>
              <option value="weekly">每周</option>
              <option value="monthly">每月</option>
              <option value="manual">手动</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">数据保留天数</label>
            <select class="form-select">
              <option value="90">90天</option>
              <option value="180">180天</option>
              <option value="365">365天</option>
              <option value="unlimited">无限</option>
            </select>
          </div>
          <div class="test-connection">
            <button class="btn btn-secondary"><i class="fas fa-plug"></i> 测试连接</button>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showAddDataSourceModal = false">取消</button>
          <button class="btn btn-primary" @click="showAddDataSourceModal = false; showToastMessage('数据源添加成功', 'success')">确认添加</button>
        </div>
      </div>
    </div>

    <!-- 外贸数据源快速入口弹窗 -->
    <div v-if="showQuickSourceModal" class="modal-overlay" @click.self="showQuickSourceModal = false">
      <div class="modal settings-modal">
        <div class="modal-header">
          <div class="modal-title">
            <i :class="{
              'trade': 'fas fa-ship',
              'linkedin': 'fab fa-linkedin',
              'exhibition': 'fas fa-calendar-alt',
              'procurement': 'fas fa-shopping-cart'
            }[selectedQuickSource?.type]"></i>
            {{ selectedQuickSource?.name }} - 快速配置
          </div>
          <button class="modal-close" @click="showQuickSourceModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <!-- 海关数据配置 -->
          <div v-if="selectedQuickSource?.type === 'trade'">
            <div class="quick-config-section">
              <h5><i class="fas fa-cog"></i> 基本配置</h5>
              <div class="form-group">
                <label class="form-label">海关数据API</label>
                <select class="form-select">
                  <option>请选择海关数据服务商</option>
                  <option>腾仓数据</option>
                  <option>环球慧展</option>
                  <option>外贸数据宝</option>
                  <option>自定义API</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">API Key</label>
                <input type="text" class="form-input" placeholder="请输入API Key">
              </div>
              <div class="form-group">
                <label class="form-label">API Secret</label>
                <input type="password" class="form-input" placeholder="请输入API Secret">
              </div>
            </div>
            <div class="quick-config-section">
              <h5><i class="fas fa-filter"></i> 数据筛选</h5>
              <div class="form-group">
                <label class="form-label">目标进出口国</label>
                <div class="checkbox-group">
                  <label class="checkbox-item"><input type="checkbox" checked> 中国</label>
                  <label class="checkbox-item"><input type="checkbox" checked> 美国</label>
                  <label class="checkbox-item"><input type="checkbox" checked> 欧盟</label>
                  <label class="checkbox-item"><input type="checkbox"> 中东</label>
                  <label class="checkbox-item"><input type="checkbox"> 东南亚</label>
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">产品关键词</label>
                <input type="text" class="form-input" placeholder="SSD, 存储, 电子元器件">
              </div>
            </div>
          </div>

          <!-- LinkedIn配置 -->
          <div v-if="selectedQuickSource?.type === 'linkedin'">
            <div class="quick-config-section">
              <h5><i class="fab fa-linkedin"></i> LinkedIn 账号</h5>
              <div class="form-group">
                <label class="form-label">绑定邮箱/手机</label>
                <input type="text" class="form-input" placeholder="LinkedIn注册邮箱或手机号">
              </div>
              <div class="form-group">
                <label class="form-label">密码</label>
                <input type="password" class="form-input" placeholder="LinkedIn密码">
              </div>
            </div>
            <div class="quick-config-section">
              <h5><i class="fas fa-search"></i> 自动寻客设置</h5>
              <div class="form-group">
                <label class="form-label">每日搜索限额</label>
                <select class="form-select">
                  <option>50次/天</option>
                  <option>100次/天</option>
                  <option>200次/天</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">每日添加好友限额</label>
                <select class="form-select">
                  <option>20人/天</option>
                  <option>50人/天</option>
                  <option>100人/天</option>
                </select>
              </div>
            </div>
          </div>

          <!-- 展会数据配置 -->
          <div v-if="selectedQuickSource?.type === 'exhibition'">
            <div class="quick-config-section">
              <h5><i class="fas fa-calendar-alt"></i> 展会选择</h5>
              <div class="form-group">
                <label class="form-label">目标展会</label>
                <div class="checkbox-group">
                  <label class="checkbox-item"><input type="checkbox" checked> 广交会</label>
                  <label class="checkbox-item"><input type="checkbox" checked> CES</label>
                  <label class="checkbox-item"><input type="checkbox" checked> IFA</label>
                  <label class="checkbox-item"><input type="checkbox"> Computex</label>
                  <label class="checkbox-item"><input type="checkbox"> MWC</label>
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">展会年份</label>
                <select class="form-select">
                  <option>2026年</option>
                  <option>2025年</option>
                  <option>2024年</option>
                </select>
              </div>
            </div>
          </div>

          <!-- 采购数据配置 -->
          <div v-if="selectedQuickSource?.type === 'procurement'">
            <div class="quick-config-section">
              <h5><i class="fas fa-shopping-cart"></i> 采购数据配置</h5>
              <div class="form-group">
                <label class="form-label">数据源</label>
                <select class="form-select">
                  <option>中国采购网</option>
                  <option>全球招标网</option>
                  <option>政府采购网</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">行业分类</label>
                <div class="checkbox-group">
                  <label class="checkbox-item"><input type="checkbox" checked> 电子产品</label>
                  <label class="checkbox-item"><input type="checkbox" checked> 信息技术</label>
                  <label class="checkbox-item"><input type="checkbox"> 机械设备</label>
                  <label class="checkbox-item"><input type="checkbox"> 化工原料</label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showQuickSourceModal = false">取消</button>
          <button class="btn btn-primary" @click="showQuickSourceModal = false; showToastMessage('数据源配置已保存', 'success')">保存配置</button>
        </div>
      </div>
    </div>

    <!-- 数据源详情弹窗 -->
    <div v-if="showDataSourceDetailModal" class="modal-overlay" @click.self="showDataSourceDetailModal = false">
      <div class="modal settings-modal wide">
        <div class="modal-header">
          <div class="modal-title">
            <i :class="{
              'trade': 'fas fa-ship',
              'linkedin': 'fab fa-linkedin',
              'maps': 'fas fa-map-marked-alt',
              'company': 'fas fa-building',
              'exhibition': 'fas fa-calendar-alt',
              'procurement': 'fas fa-shopping-cart',
              'social': 'fas fa-share-alt',
              'association': 'fas fa-users'
            }[selectedDataSource?.type]"></i>
            {{ selectedDataSource?.name }} - 详情
          </div>
          <button class="modal-close" @click="showDataSourceDetailModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body" v-if="selectedDataSource">
          <!-- 数据源状态卡片 -->
          <div class="source-detail-header">
            <div class="source-detail-status">
              <span class="status-badge" :class="selectedDataSource.enabled ? 'active' : 'inactive'">
                <i :class="selectedDataSource.enabled ? 'fas fa-check-circle' : 'fas fa-pause-circle'"></i>
                {{ selectedDataSource.enabled ? '已启用' : '已暂停' }}
              </span>
            </div>
            <p class="source-description">{{ selectedDataSource.description }}</p>
          </div>

          <!-- 统计信息 -->
          <div class="source-stats-grid">
            <div class="source-stat-card">
              <div class="stat-icon"><i class="fas fa-database"></i></div>
              <div class="stat-info">
                <div class="stat-value">{{ selectedDataSource.records }}</div>
                <div class="stat-label">数据总量</div>
              </div>
            </div>
            <div class="source-stat-card">
              <div class="stat-icon"><i class="fas fa-globe"></i></div>
              <div class="stat-info">
                <div class="stat-value">{{ selectedDataSource.coverage }}</div>
                <div class="stat-label">覆盖范围</div>
              </div>
            </div>
            <div class="source-stat-card">
              <div class="stat-icon"><i class="fas fa-sync"></i></div>
              <div class="stat-info">
                <div class="stat-value">{{ selectedDataSource.updateFreq }}</div>
                <div class="stat-label">更新频率</div>
              </div>
            </div>
            <div class="source-stat-card">
              <div class="stat-icon"><i class="fas fa-star"></i></div>
              <div class="stat-info">
                <div class="stat-value">{{ selectedDataSource.quality }}%</div>
                <div class="stat-label">数据质量</div>
              </div>
            </div>
          </div>

          <!-- 外贸相关配置 -->
          <div class="detail-section">
            <h5><i class="fas fa-cog"></i> 数据配置</h5>
            <div class="config-grid">
              <div class="config-item">
                <label>自动同步</label>
                <div class="toggle-switch active"><span class="toggle-slider"></span></div>
              </div>
              <div class="config-item">
                <label>同步时间</label>
                <select class="form-select">
                  <option>每天 00:00</option>
                  <option>每天 06:00</option>
                  <option>每天 12:00</option>
                </select>
              </div>
              <div class="config-item">
                <label>保留天数</label>
                <select class="form-select">
                  <option>90天</option>
                  <option>180天</option>
                  <option>365天</option>
                </select>
              </div>
            </div>
          </div>

          <!-- 数据字段映射 -->
          <div class="detail-section">
            <h5><i class="fas fa-th"></i> 数据字段映射</h5>
            <div class="fields-list">
              <div class="field-item">
                <span class="field-name">公司名称</span>
                <i class="fas fa-arrow-right"></i>
                <span class="field-target">company_name</span>
              </div>
              <div class="field-item">
                <span class="field-name">联系人</span>
                <i class="fas fa-arrow-right"></i>
                <span class="field-target">contact_name</span>
              </div>
              <div class="field-item">
                <span class="field-name">邮箱</span>
                <i class="fas fa-arrow-right"></i>
                <span class="field-target">email</span>
              </div>
              <div class="field-item">
                <span class="field-name">电话</span>
                <i class="fas fa-arrow-right"></i>
                <span class="field-target">phone</span>
              </div>
            </div>
          </div>

          <!-- 最近同步日志 -->
          <div class="detail-section">
            <h5><i class="fas fa-history"></i> 最近同步记录</h5>
            <div class="sync-logs">
              <div class="sync-log-item">
                <span class="log-time">2026-03-24 08:00</span>
                <span class="log-status success">成功</span>
                <span class="log-count">+1,234 条新数据</span>
              </div>
              <div class="sync-log-item">
                <span class="log-time">2026-03-23 08:00</span>
                <span class="log-status success">成功</span>
                <span class="log-count">+987 条新数据</span>
              </div>
              <div class="sync-log-item">
                <span class="log-time">2026-03-22 08:00</span>
                <span class="log-status success">成功</span>
                <span class="log-count">+1,456 条新数据</span>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showDataSourceDetailModal = false">关闭</button>
          <button class="btn btn-secondary" v-if="selectedDataSource?.enabled"><i class="fas fa-pause"></i> 暂停</button>
          <button class="btn btn-primary" v-else><i class="fas fa-play"></i> 启用</button>
        </div>
      </div>
    </div>

    <!-- 企业邮箱弹窗 -->
    <Email ref="emailRef" />

    <!-- LinkedIn弹窗 -->
    <div v-if="showLinkedInModal" class="modal-overlay" @click.self="showLinkedInModal = false">
      <div class="modal settings-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fab fa-linkedin"></i> LinkedIn 配置</div>
          <button class="modal-close" @click="showLinkedInModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div v-if="!linkedInAccount.connected" class="connect-prompt">
            <div class="connect-icon"><i class="fab fa-linkedin"></i></div>
            <h4>连接您的LinkedIn账号</h4>
            <p>绑定后可以自动搜索潜在客户、发送连接请求、发送私信等</p>
            <button class="btn btn-primary"><i class="fab fa-linkedin"></i> 使用LinkedIn账号登录</button>
          </div>
          <div v-else class="linkedin-connected">
            <div class="account-info-section">
              <div class="form-group">
                <label class="form-label">绑定邮箱</label>
                <input type="email" class="form-input" v-model="linkedInAccount.email" placeholder="LinkedIn注册邮箱">
              </div>
              <div class="form-group">
                <label class="form-label">公司主页</label>
                <input type="text" class="form-input" v-model="linkedInAccount.companyPage" placeholder="公司LinkedIn主页">
              </div>
            </div>
            <div class="linkedin-stats">
              <div class="stat-item">
                <span class="stat-label">连接数</span>
                <span class="stat-value">{{ linkedInAccount.connections }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">本周私信</span>
                <span class="stat-value">{{ linkedInAccount.messages }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">搜索限额</span>
                <span class="stat-value">{{ linkedInAccount.searchLimit }}/周</span>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showLinkedInModal = false">关闭</button>
          <button class="btn btn-primary" @click="showLinkedInModal = false; showToastMessage('LinkedIn账号已绑定', 'success')">保存</button>
        </div>
      </div>
    </div>

    <!-- 企业微信弹窗 -->
    <div v-if="showWeChatModal" class="modal-overlay" @click.self="showWeChatModal = false">
      <div class="modal settings-modal">
        <div class="modal-header">
          <div class="modal-title"><i class="fab fa-weixin"></i> 企业微信配置</div>
          <button class="modal-close" @click="showWeChatModal = false"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
          <div v-if="!weChatAccount.connected" class="connect-prompt">
            <div class="connect-icon wechat"><i class="fab fa-weixin"></i></div>
            <h4>连接企业微信</h4>
            <p>绑定后可以自动发送消息、管理客户、查看员工跟进情况</p>
            <button class="btn btn-primary wechat-btn"><i class="fab fa-weixin"></i> 扫码绑定企业微信</button>
          </div>
          <div v-else class="wechat-connected">
            <div class="account-info-section">
              <div class="form-group">
                <label class="form-label">企业ID (CorpId)</label>
                <input type="text" class="form-input" v-model="weChatAccount.corpId" placeholder="企业微信企业ID">
              </div>
              <div class="form-group">
                <label class="form-label">应用AgentId</label>
                <input type="text" class="form-input" v-model="weChatAccount.agentId" placeholder="企业微信应用AgentId">
              </div>
            </div>
            <div class="wechat-stats">
              <div class="stat-item">
                <span class="stat-label">启用用户</span>
                <span class="stat-value">{{ weChatAccount.users }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">部门数量</span>
                <span class="stat-value">{{ weChatAccount.departments }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="showWeChatModal = false">关闭</button>
          <button class="btn btn-primary" @click="showWeChatModal = false; showToastMessage('企业微信已绑定', 'success')">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import Email from '@/components/email/email.vue'
import { getUserEmails } from '@/api/emails'

const showToast = ref(false)
const toastMessage = ref('')
const toastType = ref('success')

const showProfileModal = ref(false)
const showPasswordModal = ref(false)
const showAvatarModal = ref(false)
const showLoginHistoryModal = ref(false)
const showModelModal = ref(false)
const showModelFineTuneModal = ref(false)
const showKnowledgeModal = ref(false)
const showDataSourceModal = ref(false)
const showDataSourceDetailModal = ref(false)
const showAddDataSourceModal = ref(false)
const showQuickSourceModal = ref(false)
const selectedQuickSource = ref(null)

const showEmailDetailModal = ref(false)

const showLinkedInModal = ref(false)
const showWeChatModal = ref(false)

// 数据源列表
const dataSources = ref([
  { id: 1, name: '海关数据', type: 'trade', enabled: true, lastSync: '2026-03-24 08:00', records: '2,456,789', recordsNum: 2456789, status: '正常', description: '全球海关进出口数据，实时更新', coverage: '200+国家', updateFreq: '每日', quality: 95 },
  { id: 2, name: 'LinkedIn', type: 'linkedin', enabled: true, lastSync: '2026-03-24 07:30', records: '89,432', recordsNum: 89432, status: '正常', description: 'LinkedIn企业主页和用户数据', coverage: '全球', updateFreq: '每日', quality: 88 },
  { id: 3, name: 'Google Maps', type: 'maps', enabled: true, lastSync: '2026-03-23 22:00', records: '567,890', recordsNum: 567890, status: '正常', description: '全球企业地址和位置数据', coverage: '全球', updateFreq: '每周', quality: 82 },
  { id: 4, name: '企业数据库', type: 'company', enabled: true, lastSync: '2026-03-24 06:00', records: '1,234,567', recordsNum: 1234567, status: '正常', description: '企业工商信息数据库', coverage: '中国', updateFreq: '每日', quality: 92 },
  { id: 5, name: '展会数据', type: 'exhibition', enabled: false, lastSync: '2026-03-15 18:00', records: '45,678', recordsNum: 45678, status: '已暂停', description: '全球展会参展商和采购商数据', coverage: '全球', updateFreq: '展会季', quality: 85 },
  { id: 6, name: '采购数据', type: 'procurement', enabled: true, lastSync: '2026-03-24 05:00', records: '345,678', recordsNum: 345678, status: '正常', description: '招标采购信息数据库', coverage: '中国', updateFreq: '每日', quality: 90 },
  { id: 7, name: '社交媒体', type: 'social', enabled: true, lastSync: '2026-03-24 04:00', records: '234,567', recordsNum: 234567, status: '正常', description: 'Facebook、Twitter等社交媒体数据', coverage: '全球', updateFreq: '每日', quality: 75 },
  { id: 8, name: '行业协会', type: 'association', enabled: false, lastSync: '2026-03-10 12:00', records: '23,456', recordsNum: 23456, status: '已暂停', description: '行业协会会员企业数据', coverage: '中国', updateFreq: '每月', quality: 80 }
])

// 选中的数据源详情
const selectedDataSource = ref(null)
const showDataSourceDetail = (source) => {
  selectedDataSource.value = source
  showDataSourceDetailModal.value = true
}

const emailRef = ref()
const openEmailModal = () => {
  emailRef.value.open(emailList.value)
}
// 选中的邮箱详情
const selectedEmailAccount = ref(null)

// LinkedIn账号
const linkedInAccount = ref({
  connected: false,
  email: '',
  companyPage: '',
  connections: 0,
  messages: 0,
  searchLimit: 100
})

// 企业微信
const weChatAccount = ref({
  connected: false,
  corpId: '',
  agentId: '',
  users: 0,
  departments: 0
})

const settings = reactive({
  twoFactor: false,
  autoLearn: true,
  autoEvolve: true,
  personalizeLevel: 'high',
  lookalike: true,
  decisionMaker: true,
  websiteAnalysis: true,
  emailNotify: true,
  replyNotify: true,
  riskNotify: true,
  weeklyReport: true
})

const channels = reactive({
  email: { connected: true, accounts: 2 },
  whatsapp: { connected: true, phone: '+86 138****8888' },
  linkedin: { connected: false, connections: 0 },
  wechat: { connected: false }
})

const showToastMessage = (message, type = 'success') => {
  toastMessage.value = message
  toastType.value = type
  showToast.value = true
  setTimeout(() => {
    showToast.value = false
  }, 3000)
}

const saveAllSettings = () => {
  showToastMessage('设置已保存', 'success')
}

const resetAllSettings = () => {
  showToastMessage('设置已重置为默认值', 'success')
}

const emailList = ref([])
const getEmails = () => {
  getUserEmails().then(res => {
    emailList.value = res.result
  })
}

onMounted(() => {
  getEmails()
})
</script>

<style scoped>
  @import '../assets/styles/settings.css';
</style>