<template>
  <div class="multi-algorithm-fusion">
    <div class="page-header">
      <div class="header-title">
        <i class="fas fa-brain"></i>
        <h2>多算法赋权分析与结果融合</h2>
      </div>
      <div class="header-actions">
        <el-button type="success" size="large" @click="startAnalysis" :loading="isAnalyzing">
          <i class="fas fa-play" v-if="!isAnalyzing"></i>
          {{ isAnalyzing ? '正在计算中...' : '开始综合分析' }}
        </el-button>
        <el-button size="large" @click="$emit('back-to-analysis')">返回设置</el-button>
      </div>
    </div>

    <!-- 分析前预估耗时与权重配置 -->
    <div class="config-section card-panel" v-if="!analysisComplete && !isAnalyzing">
      <h3 class="section-title"><i class="fas fa-sliders-h"></i> 算法权重配置</h3>
      <div class="algorithm-weights">
        <div class="weight-item">
          <span class="weight-label">包围盒体积算法 (V)</span>
          <el-slider v-model="weights.v" :min="0" :max="1" :step="0.1" show-input />
        </div>
        <div class="weight-item">
          <span class="weight-label">面片覆盖率算法 (A)</span>
          <el-slider v-model="weights.a" :min="0" :max="1" :step="0.1" show-input />
        </div>
        <div class="weight-item">
          <span class="weight-label">拓扑连接度算法 (T)</span>
          <el-slider v-model="weights.t" :min="0" :max="1" :step="0.1" show-input />
        </div>
      </div>
      <div class="estimate-panel">
        <div class="estimate-icon"><i class="fas fa-stopwatch"></i></div>
        <div class="estimate-info">
          <div class="estimate-text">预计分析耗时</div>
          <div class="estimate-value">{{ estimatedTime }} 秒</div>
          <div class="estimate-sub">基于当前模型面片数估算</div>
        </div>
      </div>
    </div>

    <!-- 分析中进度 -->
    <div class="progress-section card-panel" v-if="isAnalyzing">
      <h3 class="section-title"><i class="fas fa-spinner fa-spin"></i> 执行分析步骤</h3>
      <el-steps :active="currentStep" finish-status="success" align-center>
        <el-step title="准备模型" description="读取面片数据" />
        <el-step title="特征提取" description="基础属性提取" />
        <el-step title="多算法计算" description="分发至V/A/T算法" />
        <el-step title="融合决策" description="赋权打分" />
      </el-steps>
      <!-- 进度条 -->
      <div class="progress-bar-container">
        <el-progress :percentage="progressValue" :text-inside="true" :stroke-width="24" status="success" />
      </div>
      <div class="step-log">
        <div v-for="(log, idx) in activityLogs" :key="idx" class="log-line">
           <i class="fas fa-check-circle success"></i> <span class="time">[{{ log.time }}]</span> {{ log.msg }}
        </div>
      </div>
    </div>

    <!-- 分析结果与综合决策 -->
    <div class="result-section card-panel" v-if="analysisComplete">
      <div class="result-header">
        <h3 class="section-title"><i class="fas fa-chart-bar"></i> 综合打分决策结果</h3>
        <el-input 
            v-model="searchQuery" 
            placeholder="支持层级名称模糊检索" 
            style="width: 250px"
        >
          <template #prefix><i class="fas fa-search"></i></template>
        </el-input>
      </div>

      <div class="score-formula">
        打分公式：<code>Score = {{ weights.v }}*V + {{ weights.a }}*A + {{ weights.t }}*T</code>
      </div>

      <el-table :data="filteredResults" style="width: 100%" max-height="400">
        <el-table-column prop="hierarchyPath" label="层级/特征路径" min-width="200" show-overflow-tooltip />
        <el-table-column label="各算法得分 (V | A | T)" width="200">
          <template #default="scope">
            <span class="score-sub">{{ scope.row.scoreV.toFixed(2) }}</span> | 
            <span class="score-sub">{{ scope.row.scoreA.toFixed(2) }}</span> | 
            <span class="score-sub">{{ scope.row.scoreT.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="综合得分" width="120">
          <template #default="scope">
            <span class="final-score">{{ calculateFinalScore(scope.row).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="建议决策" width="150">
          <template #default="scope">
             <el-tag :type="getDecisionTagType(scope.row)" effect="dark">
                {{ getDecisionText(scope.row) }}
             </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="快速操作" width="120" fixed="right">
          <template #default="scope">
            <el-button type="primary" link size="small">预览特征</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="batch-action-bar">
         <el-button type="primary" size="large"><i class="fas fa-cogs"></i> 一键执行推荐清理</el-button>
         <el-button size="large"><i class="fas fa-download"></i> 导出结果报告</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const currentStep = ref(0)
const isAnalyzing = ref(false)
const analysisComplete = ref(false)
const progressValue = ref(0)
const estimatedTime = ref(45) // 预估时间45秒
const activityLogs = ref([])

const searchQuery = ref('')
const weights = ref({ v: 0.4, a: 0.4, t: 0.2 })

// 模拟分析结果
const mockResults = [
  { hierarchyPath: 'ASM_001/P_01_SCREW', scoreV: 0.1, scoreA: 0.05, scoreT: 0.15 },
  { hierarchyPath: 'ASM_001/COVER_SHELL', scoreV: 0.85, scoreA: 0.9, scoreT: 0.75 },
  { hierarchyPath: 'ASM_002/INNER_SUPPORT', scoreV: 0.45, scoreA: 0.5, scoreT: 0.6 },
  { hierarchyPath: 'ASM_002/BOLT_HEX_M8', scoreV: 0.05, scoreA: 0.02, scoreT: 0.1 },
  { hierarchyPath: 'ASM_ROOT/MAIN_AXIS', scoreV: 0.95, scoreA: 0.8, scoreT: 0.9 }
]

const calculateFinalScore = (row) => {
  return (row.scoreV * weights.value.v) + (row.scoreA * weights.value.a) + (row.scoreT * weights.value.t)
}

const getDecisionFromScore = (score) => {
  if (score < 0.2) return '安全删除'
  if (score < 0.6) return '建议确认'
  return '必须保留'
}

const getDecisionText = (row) => getDecisionFromScore(calculateFinalScore(row))
const getDecisionTagType = (row) => {
  const dec = getDecisionFromScore(calculateFinalScore(row))
  if (dec === '安全删除') return 'success'
  if (dec === '建议确认') return 'warning'
  return 'danger'
}

const filteredResults = computed(() => {
  let list = mockResults
  if (searchQuery.value) {
    const q = searchQuery.value.toLowerCase()
    list = list.filter(item => item.hierarchyPath.toLowerCase().includes(q))
  }
  return list.slice().sort((a,b) => calculateFinalScore(a) - calculateFinalScore(b))
})

const startAnalysis = () => {
  isAnalyzing.value = true
  analysisComplete.value = false
  currentStep.value = 0
  progressValue.value = 0
  activityLogs.value = []

  let stepInterval = setInterval(() => {
    progressValue.value += 10
    if (progressValue.value === 10) {
      currentStep.value = 0
      activityLogs.value.push({ time: new Date().toLocaleTimeString(), msg: '准备模型面片数据...' })
    } else if (progressValue.value === 40) {
      currentStep.value = 1
      activityLogs.value.push({ time: new Date().toLocaleTimeString(), msg: '体积、面积等基础特征提取...' })
    } else if (progressValue.value === 70) {
      currentStep.value = 2
      activityLogs.value.push({ time: new Date().toLocaleTimeString(), msg: '多算法并发计算(V/A/T)...' })
    } else if (progressValue.value === 90) {
      currentStep.value = 3
      activityLogs.value.push({ time: new Date().toLocaleTimeString(), msg: '基于权重公式融合决策...' })
    }

    if (progressValue.value >= 100) {
      clearInterval(stepInterval)
      activityLogs.value.push({ time: new Date().toLocaleTimeString(), msg: '分析完成！' })
      setTimeout(() => {
        isAnalyzing.value = false
        analysisComplete.value = true
      }, 500)
    }
  }, 300)
}
</script>

<style scoped>
.multi-algorithm-fusion {
  height: 100%;
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  overflow-y: auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.header-title h2 {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  margin: 0;
  background: linear-gradient(90deg, var(--color-primary), #4facfe);
  -webkit-background-clip: text;
  color: transparent;
}

.header-title i {
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
}

.card-panel {
  background: var(--color-bg-card);
  border-radius: var(--size-border-radius-lg);
  border: 1px solid var(--color-border-primary);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
}

.section-title {
  margin: 0 0 var(--spacing-lg) 0;
  font-size: var(--font-size-xl);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.section-title i { color: var(--color-primary); }

.algorithm-weights {
  margin-bottom: var(--spacing-xl);
}

.weight-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.weight-label {
  width: 200px;
  font-weight: 500;
}

.estimate-panel {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  background: rgba(var(--color-primary-rgb), 0.05);
  padding: var(--spacing-lg);
  border-radius: var(--size-border-radius);
  border: 1px dashed var(--color-primary);
}

.estimate-icon {
  font-size: 40px;
  color: var(--color-primary);
}

.estimate-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.estimate-value {
  font-size: 32px;
  font-weight: bold;
  color: var(--color-primary);
  margin-top: 4px;
}

.estimate-sub {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-top: 4px;
}

.progress-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.progress-bar-container {
  margin-top: var(--spacing-md);
}

.step-log {
  background: #1e1e1e;
  padding: var(--spacing-md);
  border-radius: var(--size-border-radius);
  min-height: 120px;
  font-family: monospace;
}

.log-line {
  margin-bottom: 6px;
  color: #a9b7c6;
}
.log-line i.success { color: var(--color-success); margin-right: 4px; }
.log-line .time { color: #6a8759; margin-right: 8px; }

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.score-formula {
  background: var(--color-white-rgb-05);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--size-border-radius);
  margin-bottom: var(--spacing-lg);
  display: inline-block;
  font-family: monospace;
  color: var(--color-text-secondary);
}

.score-formula code {
  color: var(--color-primary);
  font-weight: bold;
  margin-left: 8px;
}

.score-sub {
  color: var(--color-text-secondary);
  display: inline-block;
  width: 40px;
  text-align: center;
}

.final-score {
  font-weight: bold;
  font-size: 16px;
  color: var(--color-primary);
}

.batch-action-bar {
  margin-top: var(--spacing-xl);
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-end;
}

:deep(.el-table) {
  --el-table-bg-color: var(--color-bg-primary);
  --el-table-tr-bg-color: var(--color-bg-primary);
  --el-table-header-bg-color: var(--color-white-rgb-05);
  --el-table-border-color: var(--color-border-primary);
  --el-table-text-color: var(--color-text-primary);
  --el-table-header-text-color: var(--color-text-primary);
  --el-table-row-hover-bg-color: var(--color-white-rgb-05);
}
</style>
