<!--
@description: 购买页 VPC、子网和安全组配置区块。
@source: king-design-rag-server/template/buy/NetworkConfig.vue
-->
<script setup lang="ts">
import { ref, watch } from 'vue';
import {
  Button,
  Card,
  FormItem,
  Icon,
  Option,
  Select,
} from '@king-design/vue';

const vpcId = ref('vpc-001');
const subnetId = ref('subnet-001');
const securityGroupId = ref('sg-001');

watch(vpcId, () => {
  subnetId.value = '';
  securityGroupId.value = '';
});
</script>

<template>
  <Card title="网络配置">
    <div class="config-content">
      <FormItem label="VPC" :value="vpcId">
        <div class="field-row">
          <Select v-model="vpcId">
            <Option value="vpc-001">默认 VPC（10.0.0.0/16）</Option>
            <Option value="vpc-002">生产 VPC（172.16.0.0/12）</Option>
          </Select>
          <Button type="link">
            新建 VPC <Icon class="k-icon-share" />
          </Button>
        </div>
      </FormItem>

      <FormItem label="子网" :value="subnetId">
        <div class="field-row">
          <Select v-model="subnetId">
            <Option value="subnet-001">可用区 A 子网</Option>
            <Option value="subnet-002">可用区 B 子网</Option>
          </Select>
          <Button type="link">
            新建子网 <Icon class="k-icon-share" />
          </Button>
        </div>
      </FormItem>

      <FormItem label="安全组" :value="securityGroupId">
        <div class="field-row">
          <Select v-model="securityGroupId">
            <Option value="sg-001">默认安全组</Option>
            <Option value="sg-002">Web 安全组</Option>
          </Select>
          <Button type="link">新建安全组</Button>
        </div>
      </FormItem>
    </div>
  </Card>
</template>

<style scoped>
.config-content {
  margin-left: 60px;
}

.field-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-row :deep(.k-select) {
  width: 280px;
}
</style>
