<template>
  <div class="l0-prescreen">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span class="title">L0 \u89e3\u6790\u9884\u7b5b\u9009</span>
          <el-tag type="info" size="small">\u4eff\u771f\u524d\u5feb\u901f\u6821\u9a8c</el-tag>
        </div>
      </template>
      <el-form :model="params" label-width="180px" class="param-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="\u5916\u5f84 (mm)"><el-input-number v-model="params.outer_diameter_mm" :min="10" :max="500" controls-position="right" /></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="\u5185\u5f84 (mm)"><el-input-number v-model="params.inner_diameter_mm" :min="5" :max="400" controls-position="right" /></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="\u6c14\u9699 (mm)"><el-input-number v-model="params.airgap_mm" :min="0.1" :max="10" :step="0.1" controls-position="right" /></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="\u78c1\u94a2\u539a\u5ea6 (mm)"><el-input-number v-model="params.magnet_thickness_mm" :min="1" :max="20" :step="0.5" controls-position="right" /></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="\u7535\u6d41\u5bc6\u5ea6 (A/mm\u00b2)"><el-input-number v-model="params.current_density_amm2" :min="1" :max="50" controls-position="right" /></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="\u69fd\u586b\u5145\u7387"><el-input-number v-model="params.slot_fill_factor" :min="0.1" :max="0.9" :step="0.05" controls-position="right" /></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="\u7ed5\u7ec4\u6e29\u5ea6 (\u00b0C)"><el-input-number v-model="params.winding_temp_c" :min="0" :max="250" controls-position="right" /></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="\u78c1\u94a2\u6e29\u5ea6 (\u00b0C)"><el-input-number v-model="params.magnet_temp_c" :min="0" :max="200" controls-position="right" /></el-form-item>
          </el-col>
        </el-row>
        <el-button type="primary" :loading="checking" @click="checkFeasibility">
          <el-icon><Search /></el-icon> \u5f00\u59cb\u9884\u7b5b\u9009
        </el-button>
      </el-form>
    </el-card>

    <el-card v-if="result" class="result-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>\u9884\u7b5b\u9009\u7ed3\u679c</span>
          <el-tag :type="result.feasible ? 'success' : 'danger'" size="large" effect="dark">
            {{ result.feasible ? '\u53ef\u884c' : '\u4e0d\u53ef\u884c' }}
          </el-tag>
        </div>
      </template>
      <FeasibilityIndicator
        :results="result.results"
        :feasible="result.feasible"
        :passed="result.passed_checks"
        :total="result.total_checks"
      />
      <el-divider v-if="result.risk_items?.length" content-position="left">\u98ce\u9669\u9879</el-divider>
      <el-alert v-for="(item, idx) in result.risk_items" :key="idx" :title="item" type="warning" :closable="false" show-icon style="margin-bottom: 8px;" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { searchApi } from '@/api/ai'
import FeasibilityIndicator from '@/components/ai/FeasibilityIndicator.vue'

const params = reactive({
  outer_diameter_mm: 100,
  inner_diameter_mm: 40,
  airgap_mm: 1.0,
  magnet_thickness_mm: 5,
  current_density_amm2: 8,
  slot_fill_factor: 0.5,
  winding_temp_c: 100,
  magnet_temp_c: 80,
})
const result = ref<any>(null)
const checking = ref(false)

const checkFeasibility = async () => {
  checking.value = true
  try {
    result.value = await searchApi.l0Check({ params: { ...params } })
  } catch (e: any) {
    ElMessage.error('\u68c0\u67e5\u5931\u8d25: ' + (e.message || e))
  } finally {
    checking.value = false
  }
}
</script>

<style scoped>
.l0-prescreen { padding: 20px; }
.card-header { display: flex; justify-content: space-between; align-items: center; }
.title { font-weight: 600; font-size: 16px; }
.param-form { margin-top: 10px; }
.result-card { margin-top: 20px; }
</style>
