<template>
  <div class="trial">
    <div class="trial-head">
      <strong>试算台</strong>
      <span class="sub">注入样例参数，查看候选库位与淘汰原因（发布前建议必过）</span>
      <div class="spacer" />
      <el-input v-model="materialCode" size="small" style="width: 100px" placeholder="物料" />
      <el-input v-model="lineId" size="small" style="width: 80px" placeholder="产线" />
      <el-button size="small" type="primary" @click="run">试算</el-button>
    </div>
    <div v-if="result" class="trial-body">
      <el-alert
        :type="result.ok ? 'success' : 'warning'"
        :closable="false"
        show-icon
        :title="result.ok ? `选中 ${result.pick?.sourceId} → ${result.pick?.targetId}` : result.error || '失败'"
      />
      <el-row :gutter="10" class="cols">
        <el-col :span="8">
          <div class="cap">源候选</div>
          <el-table :data="result.sourceCandidates" size="small" max-height="140">
            <el-table-column prop="storageId" label="库位" />
            <el-table-column prop="total" label="分" width="60" />
          </el-table>
        </el-col>
        <el-col :span="8">
          <div class="cap">宿候选</div>
          <el-table :data="result.targetCandidates" size="small" max-height="140">
            <el-table-column prop="storageId" label="库位" />
            <el-table-column prop="total" label="分" width="60" />
          </el-table>
        </el-col>
        <el-col :span="8">
          <div class="cap">降级</div>
          <pre>{{ JSON.stringify(result.degrade, null, 2) }}</pre>
        </el-col>
      </el-row>
    </div>
    <div v-else class="empty">配置完流水线后点「试算」，验证选位逻辑</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TrialResult } from '../types'

const props = defineProps<{
  runTrial: (payload: Record<string, unknown>) => TrialResult
}>()

const materialCode = ref('M001')
const lineId = ref('L1')
const result = ref<TrialResult | null>(null)

function run() {
  result.value = props.runTrial({ materialCode: materialCode.value, qty: 1, lineId: lineId.value })
}

defineExpose({ run })
</script>

<style scoped>
.trial {
  border-top: 1px solid var(--el-border-color);
  background: var(--el-bg-color);
  padding: 8px 12px;
  min-height: 48px;
  max-height: 260px;
  overflow: auto;
}
.trial-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sub {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
.spacer {
  flex: 1;
}
.trial-body {
  margin-top: 8px;
}
.cols {
  margin-top: 8px;
}
.cap {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}
pre {
  margin: 0;
  font-size: 11px;
  max-height: 140px;
  overflow: auto;
  background: var(--el-fill-color-light);
  padding: 6px;
  border-radius: 4px;
}
.empty {
  margin-top: 6px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
</style>
