<script setup lang="ts">
import { ref, inject, defineAsyncComponent } from 'vue'
import { ElMessage } from 'element-plus'
import { handlePlatformFileExport } from '../../utils/settings'
import { getUsernameFromToken } from '../../utils/token'
import { markApi } from '../../api/mark'
const TrialExpiredDialog = defineAsyncComponent(() => import('../common/TrialExpiredDialog.vue'))

const refreshVipStatus = inject<() => Promise<boolean>>('refreshVipStatus')

const props = defineProps<{
  isVip: boolean
}>()

const emit = defineEmits<{
  updateData: [data: any[]]
}>()

const trademarkData = ref<any[]>([])
const trademarkFileName = ref('')
const trademarkFile = ref<File | null>(null)
const trademarkUpload = ref<HTMLInputElement | null>(null)
const trademarkLoading = ref(false)
const trademarkProgress = ref(0)
const exportLoading = ref(false)
const currentStep = ref(0)
const totalSteps = ref(0)
let brandProgressTimer: any = null

// 三个任务的进度数据
const taskProgress = ref({
  product: { total: 0, current: 0, completed: 0, label: '产品商标筛查', desc: '筛查未注册商标或TM标的商品' },
  brand: { total: 0, current: 0, completed: 0, label: '品牌商标筛查', desc: '筛查未注册商标的品牌' },
  platform: { total: 0, current: 0, completed: 0, label: '跟卖许可筛查', desc: '筛查亚马逊许可跟卖的商品' }
})

// 查询状态: idle-待开始, inProgress-进行中, done-已完成, error-错误, networkError-网络错误, cancel-已取消
const queryStatus = ref<'idle' | 'inProgress' | 'done' | 'error' | 'networkError' | 'cancel'>('idle')
const errorMessage = ref('')
const statusConfig = {
  idle: {
    icon: '/image/img.png',
    title: '暂无数据，请按左侧流程操作',
    desc: ''
  },
  inProgress: {
    icon: '/icon/wait.png',
    title: '正在查询中...',
    desc: '请耐心等待，正在为您筛查商标信息'
  },
  done: {
    icon: '/icon/done1.png',
    title: '筛查完成',
    desc: '已成功完成所有商标筛查任务'
  },
  error: {
    icon: '/icon/error.png',
    title: '筛查失败',
    desc: '筛查过程中出现错误，请重新尝试'
  },
  networkError: {
    icon: '/icon/networkErrors.png',
    title: '网络连接失败',
    desc: '网络异常，请检查网络连接后重试'
  },
  cancel: {
    icon: '/icon/cancel.png',
    title: '已取消查询',
    desc: '您已取消本次查询任务'
  }
}

// 选择的账号（模拟数据）
const selectedAccount = ref(1)
const accountOptions = [
  { id: 1, name: 'chensri3.com', username: 'chensri3.com', status: 1 }
]

// 地区选择
const region = ref('美国')
const regionOptions = [
  { label: '美国', value: '美国', flag: '🇺🇸' }
]

// 查询类型多选
const queryTypes = ref<string[]>(['product'])

const showTrialExpiredDialog = ref(false)
const trialExpiredType = ref<'device' | 'account' | 'both' | 'subscribe'>('account')
const vipStatus = inject<any>('vipStatus')

function showMessage(message: string, type: 'success' | 'warning' | 'error' | 'info' = 'info') {
  ElMessage({ message, type })
}

function openTrademarkUpload() {
  trademarkUpload.value?.click()
}

async function handleTrademarkUpload(e: Event) {
  const input = e.target as HTMLInputElement
  const file = input.files?.[0]
  if (!file) return
  
  const ok = /\.xlsx?$/.test(file.name)
  if (!ok) {
    showMessage('仅支持 .xlsx/.xls 文件', 'warning')
    return
  }
  
  trademarkFileName.value = file.name
  trademarkFile.value = file
  queryStatus.value = 'idle' // 重置状态
  trademarkData.value = []
  emit('updateData', [])
  showMessage(`文件已准备：${file.name}`, 'success')
  input.value = ''
}

async function startTrademarkQuery() {
  if (!trademarkFileName.value || !trademarkFile.value) {
    showMessage('请先导入商标列表', 'warning')
    return
  }
  
  if (refreshVipStatus) await refreshVipStatus()
  
  if (!props.isVip) {
    if (vipStatus) trialExpiredType.value = vipStatus.value.expiredType
    showTrialExpiredDialog.value = true
    return
  }
  
  const needProductCheck = queryTypes.value.includes('product')
  const needBrandCheck = queryTypes.value.includes('brand')
  
  trademarkLoading.value = true
  trademarkProgress.value = 0
  trademarkData.value = []
  queryStatus.value = 'inProgress'
  
  // 重置任务进度
  taskProgress.value.product.total = 0
  taskProgress.value.product.current = 0
  taskProgress.value.product.completed = 0
  taskProgress.value.brand.total = 0
  taskProgress.value.brand.current = 0
  taskProgress.value.brand.completed = 0
  taskProgress.value.platform.total = 0
  taskProgress.value.platform.current = 0
  taskProgress.value.platform.completed = 0
  
  // 通知父组件更新数据
  emit('updateData', [])
  
  try {
    let productResult: any = null
    let brandList: string[] = []
    
    if (needProductCheck) {
      // 步骤1: 产品商标筛查 - 调用新建任务接口
      showMessage('正在上传文件...', 'info')
      const createResult = await markApi.newTask(trademarkFile.value)
      
      if (createResult.code !== 200 && createResult.code !== 0) {
        throw new Error(createResult.msg || '创建任务失败')
      }
      
      showMessage('文件上传成功，正在处理...', 'success')
      
      const taskData = taskProgress.value.product
      taskData.total = 100  // 设置临时总数以显示进度动画
      taskData.current = 5   // 立即显示初始进度
      
      // 启动进度动画(5-95%)
      const progressTimer = setInterval(() => {
        if (taskData.current < 95) {
          taskData.current = Math.min(taskData.current + 3, 95)
        }
      }, 500)
      
      // 轮询检查任务状态
      const pollTask = async () => {
        const maxWaitTime = 60000
        const pollInterval = 3000
        const startTime = Date.now()
        
        let taskResult: any = null
        while (Date.now() - startTime < maxWaitTime) {
          if (!trademarkLoading.value) {
            clearInterval(progressTimer)
            return null
          }
          
          await new Promise(resolve => setTimeout(resolve, pollInterval))
          if (!trademarkLoading.value) {
            clearInterval(progressTimer)
            return null
          }
          
          try {
            taskResult = await markApi.getTask()
            if (taskResult.code === 200 || taskResult.code === 0) {
              if (taskResult.data.original?.download_url) {
                clearInterval(progressTimer)
                return taskResult
              }
            }
          } catch (err) {
            // 继续等待
          }
        }
        
        clearInterval(progressTimer)
        return taskResult
      }
      
      try {
        productResult = await pollTask()
        if (!trademarkLoading.value) return
        
        if (!productResult || (productResult.code !== 200 && productResult.code !== 0)) {
          throw new Error('获取任务超时或失败，请重试')
        }
        
        if (!productResult.data.original?.download_url) {
          throw new Error('任务处理超时，请稍后重试')
        }
        
        // 设置真实统计数据
        taskData.total = productResult.data.original?.total || 0
        taskData.current = taskData.total
        taskData.completed = productResult.data.filtered.length
      } finally {
        clearInterval(progressTimer)
      }
      
      // 映射后端数据到前端格式
      trademarkData.value = productResult.data.filtered.map((item: any) => ({
        name: item['品牌'] || '',
        status: item['商标类型'] || '',
        class: '',
        owner: '',
        expireDate: item['注册时间'] || '',
        similarity: 0,
        asin: item['ASIN'],
        productImage: item['商品主图']
      }))
      
      // 如果需要品牌筛查，从产品结果中提取品牌列表
      if (needBrandCheck) {
        brandList = productResult.data.filtered
          .map((item: any) => item['品牌'])
          .filter((brand: string) => brand && brand.trim())
      }
      
      showMessage(`产品筛查完成，共 ${taskData.total} 条，筛查出 ${taskData.completed} 条`, 'success')
    }
    
    // 品牌商标筛查
    if (needBrandCheck) {
      if (!trademarkLoading.value) return
      
      // 如果没有执行产品筛查，需要先从Excel提取品牌列表
      if (!needProductCheck) {
        showMessage('正在从Excel提取品牌列表...', 'info')
        const extractResult = await markApi.extractBrands(trademarkFile.value)
        
        if (extractResult.code !== 200 && extractResult.code !== 0) {
          throw new Error(extractResult.msg || '提取品牌列表失败')
        }
        
        if (!extractResult.data.brands || extractResult.data.brands.length === 0) {
          throw new Error('未能从文件中提取到品牌数据，请确保Excel包含"品牌"列')
        }
        
        brandList = extractResult.data.brands
        showMessage(`品牌列表提取成功，共 ${brandList.length} 个品牌`, 'success')
      }
      
      if (brandList.length === 0) {
        showMessage('没有品牌需要筛查', 'warning')
      } else {
        const brandData = taskProgress.value.brand
        brandData.total = brandList.length
        brandData.current = 0
        brandData.completed = 0
        
        showMessage(`开始品牌商标筛查，共 ${brandList.length} 个品牌...`, 'info')
        
        // 模拟进度动画
        brandProgressTimer = setInterval(() => {
          if (brandData.current < brandList.length * 0.95) {
            brandData.current = Math.min(brandData.current + 20, brandList.length * 0.95)
          }
        }, 1000)
        
        const brandResult = await markApi.brandCheck(brandList)
        if (brandProgressTimer) clearInterval(brandProgressTimer)
        
        if (!trademarkLoading.value) return
        
        if (brandResult.code === 200 || brandResult.code === 0) {
          // 完成，显示100%
          brandData.current = brandData.total
          brandData.completed = brandResult.data.filtered
          
          // 将品牌筛查结果追加到展示数据中
          const brandItems = brandResult.data.data.map((item: any) => ({
            name: item.brand || '',
            status: item.status || '未注册',
            class: '',
            owner: '',
            expireDate: '',
            similarity: 0,
            isBrand: true // 标记为品牌数据
          }))
          
          trademarkData.value = [...trademarkData.value, ...brandItems]
          
          showMessage(`品牌筛查完成，共查询 ${brandData.total} 个品牌，筛查出 ${brandData.completed} 个未注册品牌`, 'success')
        } else {
          throw new Error(brandResult.msg || '品牌筛查失败')
        }
      }
    }
    
    if (trademarkLoading.value) {
      queryStatus.value = 'done'
      emit('updateData', trademarkData.value)
      
      let summaryMsg = '筛查完成'
      if (needProductCheck) summaryMsg += `，产品：${taskProgress.value.product.completed}/${taskProgress.value.product.total}`
      if (needBrandCheck && brandList.length > 0) summaryMsg += `，品牌：${taskProgress.value.brand.completed}/${taskProgress.value.brand.total}`
      showMessage(summaryMsg, 'success')
    }
  } catch (error: any) {
    const hasProductData = taskProgress.value.product.total > 0
    
    // 优化错误信息 - 只显示友好提示
    let msg = error.message || ''
    if (msg.includes('网络') || msg.includes('network')) {
      queryStatus.value = 'networkError'
      errorMessage.value = '网络不可用，请检查你的网络或代理设置'
    } else if (msg.includes('超时') || msg.includes('timeout')) {
      queryStatus.value = 'error'
      errorMessage.value = '数据库维护中，请稍后重试'
    } else if (msg.includes('403') || msg.includes('风控')) {
      queryStatus.value = 'error'
      errorMessage.value = '网站风控限制，请稍后重试'
    } else {
      queryStatus.value = 'error'
      errorMessage.value = '数据库维护中，请稍后重试'
    }
    
    // 仅在第1步失败时清空数据
    if (!hasProductData) {
      trademarkData.value = []
      emit('updateData', [])
    } else {
      emit('updateData', trademarkData.value)
    }
    showMessage(errorMessage.value, 'error')
  } finally {
    // 清除定时器
    if (brandProgressTimer) {
      clearInterval(brandProgressTimer)
      brandProgressTimer = null
    }
    trademarkLoading.value = false
    currentStep.value = 0
    totalSteps.value = 0
  }
}

function stopTrademarkQuery() {
  // 清除进度动画定时器
  if (brandProgressTimer) {
    clearInterval(brandProgressTimer)
    brandProgressTimer = null
  }
  trademarkLoading.value = false
  queryStatus.value = 'cancel'
  currentStep.value = 0
  totalSteps.value = 0
  showMessage('已停止筛查', 'info')
}

async function exportTrademarkData() {
  if (!trademarkData.value.length) {
    showMessage('没有数据可供导出', 'warning')
    return
  }
  
  exportLoading.value = true
  
  let html = `<table>
    <tr><th>商标名称</th><th>状态</th><th>类别</th><th>权利人</th><th>到期日期</th><th>相似度</th></tr>`
  
  trademarkData.value.forEach(item => {
    html += `<tr>
      <td>${item.name || ''}</td>
      <td>${item.status || ''}</td>
      <td>${item.class || ''}</td>
      <td>${item.owner || ''}</td>
      <td>${item.expireDate || ''}</td>
      <td>${item.similarity ? item.similarity + '%' : '-'}</td>
    </tr>`
  })
  html += '</table>'
  
  const blob = new Blob([html], { type: 'application/vnd.ms-excel' })
  const fileName = `商标筛查结果_${new Date().toISOString().slice(0, 10)}.xls`
  
  const username = getUsernameFromToken()
  const success = await handlePlatformFileExport('amazon', blob, fileName, username)
  
  if (success) {
    showMessage('Excel文件导出成功！', 'success')
  }
  exportLoading.value = false
}

function toggleQueryType(type: string) {
  const index = queryTypes.value.indexOf(type)
  if (index > -1) {
    queryTypes.value.splice(index, 1)
  } else {
    queryTypes.value.push(type)
  }
}

function viewTrademarkExample() {
  showMessage('商标列表应包含一列商标名称', 'info')
}

function downloadTrademarkTemplate() {
  const html = '<table><tr><th>商标名称</th></tr><tr><td>SONY</td></tr><tr><td>NIKE</td></tr><tr><td>MyBrand</td></tr></table>'
  const blob = new Blob([html], { type: 'application/vnd.ms-excel' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = '商标列表模板.xls'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
}

function resetToIdle() {
  queryStatus.value = 'idle'
  trademarkData.value = []
  trademarkFileName.value = ''
  trademarkFile.value = null
  taskProgress.value.product.total = 0
  taskProgress.value.product.current = 0
  taskProgress.value.product.completed = 0
  taskProgress.value.brand.total = 0
  taskProgress.value.brand.current = 0
  taskProgress.value.brand.completed = 0
  taskProgress.value.platform.total = 0
  taskProgress.value.platform.current = 0
  taskProgress.value.platform.completed = 0
}

defineExpose({
  trademarkLoading,
  trademarkProgress,
  trademarkData,
  queryStatus,
  statusConfig,
  taskProgress,
  errorMessage,
  resetToIdle,
  stopTrademarkQuery,
  startTrademarkQuery
})
</script>

<template>
  <div class="trademark-panel">
    <div class="steps-flow">
      <!-- 1. 导入签署精灵账品批格 -->
      <div class="flow-item">
        <div class="step-index">1</div>
        <div class="step-card">
          <div class="step-header"><div class="title">导入Excel表格</div></div>
          <div class="desc">产品筛查：需导入卖家精灵选品表格，并勾选"导出主图"；品牌筛查：Excel需包含"品牌"列</div>
          <div class="dropzone" @click="openTrademarkUpload">
            <div class="dz-icon">📤</div>
            <div class="dz-text">点击或将文件拖拽到这里上传</div>
            <div class="dz-sub">支持 .xls .xlsx</div>
          </div>
          <input ref="trademarkUpload" style="display:none" type="file" accept=".xls,.xlsx" @change="handleTrademarkUpload" :disabled="trademarkLoading" />
          
          <div v-if="trademarkFileName" class="file-chip">
            <span class="dot"></span>
            <span class="name">{{ trademarkFileName }}</span>
          </div>
        </div>
      </div>
      
      <!-- 2. 选择亚马逊商标地区 -->
      <div class="flow-item">
        <div class="step-index">2</div>
        <div class="step-card">
          <div class="step-header"><div class="title">选择亚马逊商家账号</div></div>
          <div class="desc">请确保账号地区与专利地区一致，不一致可能导致结果不准确或失败。</div>
          
          <el-scrollbar :class="['account-list', { 'scroll-limit': accountOptions.length > 3 }]">
            <div>
              <div
                v-for="acc in accountOptions"
                :key="acc.id"
                :class="['acct-item', 'disabled', { selected: selectedAccount === acc.id }]"
              >
                <span class="acct-row">
                  <span :class="['status-dot', acc.status === 1 ? 'on' : 'off']"></span>
                  <img class="avatar" src="/image/user.png" alt="avatar" />
                  <span class="acct-text">{{ acc.name || acc.username }}</span>
                  <span v-if="selectedAccount === acc.id" class="acct-check">✔️</span>
                </span>
              </div>
            </div>
          </el-scrollbar>
          
          <div class="step-actions btn-row">
            <el-button size="small" class="w50" disabled>添加账号</el-button>
            <el-button size="small" class="w50 btn-blue" disabled>账号管理</el-button>
          </div>
        </div>
      </div>
      
      <!-- 3. 选择产品地理区域 -->
      <div class="flow-item">
        <div class="step-index">3</div>
        <div class="step-card">
          <div class="step-header"><div class="title">选择产品品牌地区</div></div>
          <div class="desc">暂时仅支持美国品牌商标筛查，后续将开放更多地区，敬请期待。</div>
          <el-select v-model="region" placeholder="选择地区" size="small" style="width: 100%" disabled>
            <el-option v-for="opt in regionOptions" :key="opt.value" :label="opt.label" :value="opt.value">
              <span style="margin-right:6px">{{ opt.flag }}</span>{{ opt.label }}
            </el-option>
          </el-select>
        </div>
      </div>
      
      <!-- 4. 选择需查询的（可多选） -->
      <div class="flow-item">
        <div class="step-index">4</div>
        <div class="step-card">
          <div class="step-header"><div class="title">选择需查询的（可多选）</div></div>
          <div class="desc">默认查询违规产品，可多选</div>
          
          <div class="query-options">
            <div :class="['query-card', { active: queryTypes.includes('product') }]" @click="toggleQueryType('product')">
              <div class="query-check">
                <div class="check-icon" v-if="queryTypes.includes('product')">✓</div>
              </div>
              <div class="query-content">
                <div class="query-title">产品商标筛查</div>
                <div class="query-desc">筛查未注册商标或TM标的商品</div>
              </div>
            </div>
            
            <div :class="['query-card', { active: queryTypes.includes('brand') }]" @click="toggleQueryType('brand')">
              <div class="query-check">
                <div class="check-icon" v-if="queryTypes.includes('brand')">✓</div>
              </div>
              <div class="query-content">
                <div class="query-title">品牌商标筛查</div>
                <div class="query-desc">筛查未注册商标的品牌</div>
              </div>
            </div>
            
            <div :class="['query-card', 'query-disabled', { active: queryTypes.includes('platform') }]">
              <div class="query-check">
                <div class="check-icon" v-if="queryTypes.includes('platform')">✓</div>
              </div>
              <div class="query-content">
                <div class="query-title">跟卖许可筛查</div>
                <div class="query-desc">筛查亚马逊许可跟卖的商品</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部开始查询按钮 -->
    <div class="bottom-action">
      <div class="action-header">
        <span class="step-indicator">{{ trademarkLoading ? currentStep : 1 }}/4</span>
        <el-button v-if="!trademarkLoading" class="start-btn" type="primary" :disabled="!trademarkFileName || queryTypes.length === 0" @click="startTrademarkQuery">
          开始筛查
        </el-button>
        <el-button v-else class="start-btn stop-btn" @click="stopTrademarkQuery">
          停止筛查
        </el-button>
      </div>
    </div>

    <TrialExpiredDialog v-model="showTrialExpiredDialog" :expired-type="trialExpiredType" />
  </div>
</template>

<style scoped>
.trademark-panel { 
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.steps-flow { 
  position: relative; 
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.steps-flow::-webkit-scrollbar {
  display: none;
}
.steps-flow:before { content: ''; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: rgba(229, 231, 235, 0.6); }
.flow-item { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 0; }
.flow-item .step-index { position: static; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; background: #1677FF; color: #fff; font-size: 14px; font-weight: 600; margin-top: 2px; }
.step-card { border: none; border-radius: 0; padding: 0; background: transparent; }
.step-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.title { font-size: 14px; font-weight: 600; color: #303133; text-align: left; }
.desc { font-size: 12px; color: #909399; margin-bottom: 10px; text-align: left; line-height: 1.5; }
.links { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.link { color: #909399; cursor: pointer; font-size: 12px; }

.file-chip { 
  display: flex; 
  align-items: center; 
  gap: 6px; 
  padding: 6px 8px; 
  background: #f5f7fa; 
  border-radius: 4px; 
  font-size: 12px; 
  color: #606266; 
  margin-top: 6px;
  min-width: 0;
}
.file-chip .dot { 
  width: 6px; 
  height: 6px; 
  background: #409EFF; 
  border-radius: 50%; 
  flex-shrink: 0;
}
.file-chip .name { 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.dropzone { 
  border: 1px dashed #c0c4cc; 
  border-radius: 8px; 
  padding: 20px 16px; 
  text-align: center; 
  cursor: pointer; 
  background: #fafafa;
  transition: all 0.2s ease;
}
.dropzone:hover { background: #f6fbff; border-color: #409EFF; }
.dz-icon { font-size: 20px; margin-bottom: 6px; color: #909399; }
.dz-text { color: #303133; font-size: 13px; margin-bottom: 2px; }
.dz-sub { color: #909399; font-size: 12px; }

.query-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.query-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 12px;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.query-card:hover {
  border-color: #1677FF;
  background: #f7fbff;
}
.query-card.active {
  border-color: #1677FF;
  background: #f0f9ff;
}
.query-card.query-disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
.query-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  transition: all 0.2s ease;
}
.query-card.active .query-check {
  border-color: #1677FF;
  background: transparent;
}
.check-icon {
  color: #1677FF;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
}
.query-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  min-width: 0;
}
.query-title {
  font-size: 13px;
  font-weight: 600;
  color: #303133;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.query-desc {
  font-size: 11px;
  color: #909399;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.step-actions { margin-top: 8px; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.w50 { width: 100%; }

.bottom-action {
  flex-shrink: 0;
  padding: 16px 0 0 0;
  border-top: 2px solid #e5e7eb;
}
.action-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.step-indicator {
  font-size: 15px;
  color: #303133;
  font-weight: 600;
  min-width: 36px;
  text-align: left;
}
.start-btn {
  flex: 1;
  height: 32px;
  padding: 0px 16px;
  background: #1677FF;
  border-color: #1677FF;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
}
.start-btn:disabled {
  background: #d9d9d9;
  border-color: #d9d9d9;
  color: #ffffff;
  cursor: not-allowed;
}
.stop-btn {
  background: #f56c6c;
  border-color: #f56c6c;
}
.stop-btn:hover {
  background: #f78989;
  border-color: #f78989;
}

.btn-blue { background: #1677FF; border-color: #1677FF; color: #fff; }
.btn-blue:disabled { background: #a6c8ff; border-color: #a6c8ff; color: #fff; }

.account-list { 
  height: auto; 
  background: #fff; 
  border: 1px solid #ebeef5; 
  border-radius: 4px; 
  margin-bottom: 8px;
  padding: 4px;
}
.scroll-limit { max-height: 140px; }
.avatar { width: 18px; height: 18px; border-radius: 50%; }
.acct-row { 
  display: grid; 
  grid-template-columns: 6px 18px 1fr auto; 
  align-items: center; 
  gap: 6px; 
  width: 100%; 
}
.acct-text { 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
  min-width: 0; 
  font-size: 12px; 
  color: #303133;
}
.status-dot { 
  width: 6px; 
  height: 6px; 
  border-radius: 50%; 
  display: inline-block; 
}
.status-dot.on { background: #22c55e; }
.status-dot.off { background: #f87171; }
.acct-item { 
  padding: 6px 8px; 
  border-radius: 6px; 
  margin-bottom: 4px; 
}
.acct-item:last-child {
  margin-bottom: 0;
}
.acct-item.selected { 
  background: #eef5ff; 
  box-shadow: inset 0 0 0 1px #d6e4ff; 
}
.acct-item.disabled { 
  cursor: not-allowed; 
  opacity: 0.6; 
}
.acct-check { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  width: 16px; 
  height: 16px; 
  border-radius: 50%; 
  background: transparent; 
  color: #111; 
  font-size: 12px; 
}
.account-list :deep(.el-scrollbar__view) {
  padding: 0;
}
.account-list::-webkit-scrollbar { width: 0; height: 0; }

.trademark-panel :deep(.el-select),
.trademark-panel :deep(.el-input__wrapper) {
  width: 100%;
}
.trademark-panel :deep(.el-select .el-input__wrapper) {
  border-radius: 6px;
}
.trademark-panel :deep(.el-button) {
  border-radius: 6px;
}
</style>

