<template>
  <div class="feasibility-indicator">
    <div class="summary-bar">
      <el-tag :type="feasible ? 'success' : 'danger'" size="large" effect="dark">
        {{ feasible ? '\u2713 \u65b9\u6848\u53ef\u884c' : '\u2717 \u65b9\u6848\u4e0d\u53ef\u884c' }}
      </el-tag>
      <span class="pass-rate">{{ passed }}/{{ total }} \u9879\u901a\u8fc7</span>
      <el-progress :percentage="Math.round((passed / total) * 100)" :status="feasible ? 'success' : 'exception'" :stroke-width="10" style="flex:1; max-width: 300px;" />
    </div>
    <div v-if="results.length" class="check-list">
      <div v-for="item in results" :key="item.name" class="check-item" :class="{ fail: !item.passed }">
        <span class="status-icon">{{ item.passed ? '\u2713' : '\u2717' }}</span>
        <span class="check-name">{{ item.name }}</span>
        <span class="check-msg">{{ item.message }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  results: Array<{ name: string; passed: boolean; message: string }>
  feasible: boolean
  passed: number
  total: number
}>()
</script>

<style scoped>
.feasibility-indicator { padding: 12px; }
.summary-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.pass-rate { font-weight: 600; color: #606266; white-space: nowrap; }
.check-list { display: flex; flex-direction: column; gap: 6px; }
.check-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 4px; background: #f0f9eb; }
.check-item.fail { background: #fef0f0; }
.status-icon { font-weight: bold; width: 20px; text-align: center; }
.check-item:not(.fail) .status-icon { color: #67c23a; }
.check-item.fail .status-icon { color: #f56c6c; }
.check-name { font-weight: 600; min-width: 180px; color: #303133; }
.check-msg { color: #606266; font-size: 13px; }
</style>
