<template>
  <div class="container">
    <Breadcrumb :items="['规则管理', '列表/记录']" />
    <a-card class="general-card" title="规则设置">
      <template #extra>
        <a-radio-group v-model="state.module" type="button">
          <a-radio value="list">规则列表</a-radio>
          <a-radio value="record">匹配记录</a-radio>
          <a-radio value="stats">统计</a-radio>
        </a-radio-group>
      </template>
      <List v-if="state.module === 'list'" />
      <Record v-if="state.module === 'record'" />
      <Stats v-if="state.module === 'stats'" />
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import List from './list.vue';
import Record from './record.vue';
import Stats from './stats.vue';

const state = reactive<{
  module: 'list' | 'record' | 'stats';
}>({
  module: 'list'
});
</script>
