<!--
@description: 未安装 Versatile 时，使用 KPC 原生组件组合计费方式、地域和可用区。
@source-reference: @ksyun-internal/versatile BillTypes, Region, AZ
-->
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import {
  Button,
  ButtonGroup,
  Card,
  FormItem,
  Icon,
  Tab,
  Tabs,
  Tooltip,
} from '@king-design/vue';

interface BillTypeOption {
  billTypeId: number;
  billTypeName: string;
  description: string;
}

interface AzOption {
  azCode: string;
  azName: string;
}

interface RegionOption {
  regionCode: string;
  regionName: string;
  areaCode: string;
  areaName: string;
  azList: AzOption[];
}

const billTypes: BillTypeOption[] = [
  {
    billTypeId: 1,
    billTypeName: '包年包月',
    description: '适用于提前预估设备需求量的场景',
  },
  {
    billTypeId: 5,
    billTypeName: '按时计费',
    description: '适用于固定时间服务或临时扩展测试的场景',
  },
];

const regions: RegionOption[] = [
  {
    regionCode: 'cn-beijing-6',
    regionName: '华北 1（北京）',
    areaCode: 'china',
    areaName: '中国大陆',
    azList: [
      { azCode: 'cn-beijing-6a', azName: '可用区 A' },
      { azCode: 'cn-beijing-6b', azName: '可用区 B' },
    ],
  },
];

const billType = ref(1);
const areaCode = ref('china');
const regionCode = ref('cn-beijing-6');
const azCode = ref('cn-beijing-6a');

const areas = computed(() => {
  return Array.from(
    new Map(
      regions.map((region) => [
        region.areaCode,
        { areaCode: region.areaCode, areaName: region.areaName },
      ]),
    ).values(),
  );
});

const visibleRegions = computed(() => {
  return regions.filter((region) => region.areaCode === areaCode.value);
});

const visibleAzList = computed(() => {
  return (
    regions.find((region) => region.regionCode === regionCode.value)?.azList ??
    []
  );
});

watch(areaCode, () => {
  if (
    !visibleRegions.value.some(
      (region) => region.regionCode === regionCode.value,
    )
  ) {
    regionCode.value = visibleRegions.value[0]?.regionCode ?? '';
  }
});

watch(regionCode, () => {
  if (!visibleAzList.value.some((az) => az.azCode === azCode.value)) {
    azCode.value = visibleAzList.value[0]?.azCode ?? '';
  }
});
</script>

<template>
  <Card title="基础配置">
    <div class="config-content">
      <FormItem
        :value="billType"
        :rules="{ required: '必须选择计费方式' }"
      >
        <template #label>
          <span class="field-label">
            计费方式
            <Tooltip
              content="请选择适合业务用量的计费方式"
              theme="light"
              trigger="click"
              hoverable
            >
              <Icon class="k-icon-question" aria-label="计费方式说明" />
            </Tooltip>
          </span>
        </template>
        <ButtonGroup
          v-model="billType"
          class="billing-group"
          check-type="radio"
          separate
        >
          <Button
            v-for="item in billTypes"
            :key="item.billTypeId"
            :value="item.billTypeId"
          >
            <span class="billing-name">{{ item.billTypeName }}</span>
            <span class="billing-description">{{ item.description }}</span>
          </Button>
        </ButtonGroup>
      </FormItem>

      <FormItem :value="regionCode" :rules="{ required: true }">
        <template #label>
          <span class="field-label">
            地域
            <Tooltip
              content="金山云的物理地域所处的不同地理区域。不同地域之间完全隔离，以保证所提供服务的稳定性与容错性。"
              theme="light"
              trigger="click"
            >
              <Icon class="k-icon-question" aria-label="地域说明" />
            </Tooltip>
          </span>
        </template>

        <Tabs v-if="areas.length > 1" v-model="areaCode" class="area-tabs">
          <Tab
            v-for="area in areas"
            :key="area.areaCode"
            :value="area.areaCode"
          >
            {{ area.areaName }}
          </Tab>
        </Tabs>

        <ButtonGroup
          v-model="regionCode"
          class="option-group"
          check-type="radio"
          separate
        >
          <Button
            v-for="region in visibleRegions"
            :key="region.regionCode"
            :value="region.regionCode"
          >
            {{ region.regionName }}
          </Button>
        </ButtonGroup>
        <p class="region-tip">
          创建成功后<strong>不支持更改地域</strong>，不同地域之间内网不互通。建议选择靠近业务的地域，增加访问速度
        </p>
      </FormItem>

      <FormItem :value="azCode" :rules="{ required: true }">
        <template #label>
          <span class="field-label">
            可用区
            <Tooltip
              content="可用区是指在同一地域内，电力和网络互相独立的物理区域。"
              theme="light"
              trigger="click"
            >
              <Icon class="k-icon-question" aria-label="可用区说明" />
            </Tooltip>
          </span>
        </template>
        <ButtonGroup
          v-model="azCode"
          class="option-group"
          check-type="radio"
          separate
        >
          <Button
            v-for="az in visibleAzList"
            :key="az.azCode"
            :value="az.azCode"
          >
            {{ az.azName }}
          </Button>
        </ButtonGroup>
      </FormItem>
    </div>
  </Card>
</template>

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

.field-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.billing-group,
.option-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.billing-group :deep(.k-btn) {
  display: block;
  width: 192px;
  height: 74px;
  padding: 12px 16px;
  text-align: left;
  line-height: 18px;
}

.billing-name,
.billing-description {
  display: block;
}

.billing-name {
  color: #151b1e;
  font-weight: 500;
}

.billing-description {
  margin-top: 4px;
  color: #848f9a;
  white-space: normal;
}

.option-group :deep(.k-btn) {
  width: 157px;
}

.area-tabs {
  margin-bottom: 16px;
}

.region-tip {
  margin: 8px 0 0;
  color: #848f9a;
}

.region-tip strong {
  color: #ff9a05;
  font-weight: 400;
}

@media (max-width: 768px) {
  .config-content {
    margin-left: 0;
  }
}
</style>
