<template>
  <ConfigPageBase
    section="scenario"
    title="业务场景模板化"
    description="SPS / Pack / 环线 / 点对点；DSL/低代码扩展（ScenarioTemplateConfig）"
    :defaults="DEFAULT_SCENARIO">
    <template #default="{ payload }">
      <el-row :gutter="12">
        <el-col v-for="t in payload.templates" :key="t.id" :span="6">
          <el-card shadow="hover" class="tpl-card">
            <div class="tpl-title">{{ t.name }}</div>
            <div class="tpl-meta">
              <el-tag size="small">{{ t.category }}</el-tag>
              <el-tag size="small" type="info">v{{ t.version }}</el-tag>
            </div>
            <pre class="tpl-baseline">{{ t.baselineJson || '{}' }}</pre>
          </el-card>
        </el-col>
      </el-row>
      <el-divider />
      <el-descriptions :column="2" border>
        <el-descriptions-item label="DSL 启用">{{ payload.dslPolicy.enabled ? '是' : '否' }}</el-descriptions-item>
        <el-descriptions-item label="Schema 版本">{{ payload.dslPolicy.schemaVersion }}</el-descriptions-item>
        <el-descriptions-item label="低代码">{{ payload.lowCode.enabled ? '启用' : '关闭' }}</el-descriptions-item>
        <el-descriptions-item label="编辑器">{{ payload.lowCode.editor }}</el-descriptions-item>
        <el-descriptions-item label="保留版本">{{ payload.versionPolicy.keepVersions }}</el-descriptions-item>
        <el-descriptions-item label="允许回滚">{{ payload.versionPolicy.allowRollback ? '是' : '否' }}</el-descriptions-item>
      </el-descriptions>
    </template>
  </ConfigPageBase>
</template>

<script setup lang="ts">
import ConfigPageBase from '@/components/ConfigPageBase.vue'
import { DEFAULT_SCENARIO } from '@/mock/data/configs'
</script>

<style scoped>
.tpl-card { margin-bottom: 12px; }
.tpl-title { font-weight: 600; margin-bottom: 6px; }
.tpl-meta { display: flex; gap: 6px; margin-bottom: 8px; }
.tpl-baseline { margin: 0; font-size: 11px; background: #f5f7fa; padding: 6px; border-radius: 4px; max-height: 80px; overflow: auto; }
</style>
