<!--
@description: 购买页计费方式、地域和可用区联动配置。
@source: king-design-rag-server/template/buy/BasicConfig.vue
-->
<script setup lang="ts">
import { ref, watch } from 'vue';
import { Card } from '@king-design/vue';
import { AZ, BillTypes, Region } from '@ksyun-internal/versatile';

const billType = ref(1);
const regionCode = ref('cn-beijing-6');
const azCode = ref('cn-beijing-6a');
const packages = ref([
  {
    refBillTypeList: [
      { billTypeId: 1, billTypeName: '包年包月' },
      { billTypeId: 5, billTypeName: '按时计费' },
    ],
    refRegionList: [
      {
        regionCode: 'cn-beijing-6',
        regionName: '华北 1（北京）',
        areaCode: 'china',
        areaName: '中国大陆',
        azList: [
          { azCode: 'cn-beijing-6a', azName: '可用区 A' },
          { azCode: 'cn-beijing-6b', azName: '可用区 B' },
        ],
      },
    ],
  },
]);

watch(regionCode, () => {
  const region = packages.value
    .flatMap((item) => item.refRegionList)
    .find((item) => item.regionCode === regionCode.value);
  if (!region?.azList.some((item) => item.azCode === azCode.value)) {
    azCode.value = region?.azList[0]?.azCode ?? '';
  }
});
</script>

<template>
  <Card title="基础配置">
    <div class="config-content">
      <BillTypes v-model="billType" :packages="packages" />
      <Region v-model="regionCode" :packages="packages" />
      <AZ
        v-model="azCode"
        :region-code="regionCode"
        :packages="packages"
      />
    </div>
  </Card>
</template>

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