<template>
  <ConfigPageBase
    section="traffic"
    title="交通管制规则"
    description="路口策略、区域互斥、动态让行（TrafficRule）"
    :defaults="DEFAULT_TRAFFIC">
    <template #default="{ payload }">
      <el-tabs model-value="ix">
        <el-tab-pane name="ix" label="路口策略">
          <el-table :data="payload.intersections" size="small">
            <el-table-column label="ID" prop="id" width="100" />
            <el-table-column label="站点 IDs" prop="siteIds">
              <template #default="s">{{ s.row.siteIds.join(', ') }}</template>
            </el-table-column>
            <el-table-column label="模式" prop="mode" width="100" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane name="mz" label="区域互斥">
          <el-table :data="payload.mutex" size="small">
            <el-table-column label="ID" prop="id" width="100" />
            <el-table-column label="区域 IDs" prop="zoneIds">
              <template #default="s">{{ s.row.zoneIds.join(', ') }}</template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane name="yd" label="动态让行">
          <el-table :data="payload.yields" size="small">
            <el-table-column label="ID" prop="id" width="100" />
            <el-table-column label="From" prop="from" width="140" />
            <el-table-column label="To" prop="to" width="140" />
            <el-table-column label="条件" prop="condition" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </template>
  </ConfigPageBase>
</template>

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