<template>
  <div class="instance-create-container">
    <div class="header">
      <h1>算力中心</h1>
      <h2>聚焦高效算力服务，为数字产业、智能应用提供强支撑</h2>
    </div>

    <div class="instance-create-body">
      <!-- 筛选区域（保持不变） -->
      <a-card class="card select-server">
        <div class="list-filter">
          <div class="filter-item"> <span class="filter-label">计费方式:</span>
            <div class="filter-content"> <a-radio-group v-model:value="billingType" button-style="solid"
                @change="handleBillingTypeChange"> <a-radio-button v-for="type in billingTypeOptions" :key="type.value"
                  :value="type.value"> {{ type.label }} </a-radio-button> </a-radio-group> </div>
          </div> <!-- 选择地区 -->
          <div class="filter-item"> <span class="filter-label">选择地区:</span>
            <div class="filter-content"> <a-radio-group v-model:value="selectedRegion" button-style="solid"
                @change="handleRegionChange"> <a-radio-button v-for="region in regions" :key="region.value"
                  :value="region.value"> {{ region.label }} <a-tag v-if="region.tag" :color="region.tag.color"
                    class="region-tag">{{ region.tag.text }}</a-tag> </a-radio-button> </a-radio-group> </div>
          </div> <!-- 专区选择 -->
          <div class="filter-item" v-if="showZones"> <span class="filter-label">选择专区:</span>
            <div class="filter-content"> <a-radio-group v-model:value="selectedZone" button-style="solid"
                @change="handleZoneChange"> <a-radio-button v-for="zone in availableZones" :key="zone.value"
                  :value="zone.value"> {{ zone.label }} </a-radio-button> </a-radio-group> </div>
          </div> <!-- GPU型号 -->
          <div class="filter-item"> <span class="filter-label">GPU型号:</span>
            <div class="filter-content"> <a-checkbox-group v-model:value="selectedGpuModels"
                @change="handleGpuModelChange"> <a-checkbox value="all"
                  :disabled="selectedGpuModels.length > 0 && selectedGpuModels[0] !== 'all'">全部</a-checkbox> <a-checkbox
                  v-for="model in availableGpuModels" :key="model.value" :value="model.value"
                  :disabled="model.available === 0"> {{ model.label }} <span class="note"> ({{ model.available }}/{{
                    model.total }})</span> </a-checkbox> </a-checkbox-group> </div>
          </div> <!-- GPU数量 -->
          <div class="filter-item"> <span class="filter-label">GPU数量:</span>
            <div class="filter-content"> <a-select :size="'large'" default-value="1" style="width: 200px"
                @change="handleGpuCountChange"> <a-select-option v-for="count in gpuCountOptions" :key="count"
                  :value="count"> {{ count }} </a-select-option> </a-select> </div>
          </div>
        </div>
      </a-card>

      <!-- 机器列表 -->
      <a-card class="card machine-list" >
        <div class="image-card-container">
          <div v-for="record in paginatedMachineList" :key="record.id" class="image-card"
            :class="{ selected: selectedMachineId === record.id }" @click="handleSelectMachine(record.id)">
            <!-- 顶部 -->
            <div class="image-card-header">
              <div class="gpu-title">
                {{ record.gpuModel }} {{ record.gpuMemory }}
              </div>
              <div class="gpu-availability">
                空闲 / 总量
                <strong style="font-size: 18px;">{{ record.freeGpu }}</strong> / {{ record.totalGpu }}
              </div>
            </div>

            <!-- 中部信息 -->
            <div class="image-card-info">
              <div class="info-item">
                <span class="info-item-name">CPU</span>
                <span class="info-item-account">{{ record.cpuCores }} 核</span>
              </div>
              <div class="info-item">
                <span class="info-item-name">内存</span>
                <span class="info-item-account">{{ record.memory }} GB</span>
              </div>
              <div class="info-item">
                <span class="info-item-name">显存</span>
                <span class="info-item-account">{{ record.gpuMemory }}</span>
              </div>
              <div class="info-item">
                <span class="info-item-name">系统盘</span>
                <span class="info-item-account">30 GB</span>
              </div>
            </div>

            <!-- 底部价格 -->
            <div class="image-card-footer">
              <div class="price">
                <span class="price-num">{{ getPrice(record) }}</span>
                <span class="price-unit">元/卡/小时</span>
              </div>
              <a-button type="primary" class="buy-btn" :disabled="record.freeGpu === 0"
                @click.stop="handleRentMachine(record.id)">
                立即购买
              </a-button>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
          <a-pagination v-model:current="currentPage" v-model:pageSize="pageSize" :total="filteredMachineList.length"
            show-size-changer show-quick-jumper />
        </div>
      </a-card>
    </div>
  </div>
</template>


<script setup lang="ts">
import { ref, computed, reactive, watch } from 'vue'
import { message } from 'ant-design-vue'
import type { TableColumnsType } from 'ant-design-vue'
import { useRouter } from 'vue-router'
const router = useRouter();
// 类型定义
interface Machine {
  id: string
  machineName: string
  gpuModel: string
  gpuMemory: string
  freeGpu: number
  totalGpu: number
  cpuCores: number
  memory: number
  cpuModel: string
  dataDisk: number
  expandableDisk: number
  driver: string
  cuda: string
  basePrice: number
  originalPrice?: number
  region: string
  zone: string
  availableGpuCount: number
}

interface GpuModelOption {
  value: string
  label: string
  available: number
  total: number
  regions: string[]
}

interface RegionOption {
  value: string
  label: string
  tag?: { color: string; text: string }
}

interface ZoneOption {
  value: string
  label: string
  regions: string[]
}

interface Coupon {
  id: string
  name: string
  amount: number
  type: string
}

// 响应式数据
const billingType = ref('weekly')
const selectedRegion = ref('beijingDC2')
const selectedZone = ref('')
const selectedGpuModels = ref<string[]>(['RTX 5090'])
const gpuCount = ref(1)
const selectedMachineId = ref('')
const needExpand = ref(false)
const expandSize = ref(100)
const imageType = ref('platformImage')
const selectedImage = ref<string[]>([])
const selectedCoupon = ref('')
const tableLoading = ref(false)
const creating = ref(false)

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)

// 所有机器数据
const allMachineList = ref<Machine[]>([
  {
    id: '5fb545beac',
    machineName: '336机',
    gpuModel: 'vGPU-48GB',
    gpuMemory: '48 GB',
    freeGpu: 1,
    totalGpu: 10,
    cpuCores: 20,
    memory: 90,
    cpuModel: 'Xeon(R) Platinum 8470Q',
    dataDisk: 50,
    expandableDisk: 110,
    driver: '580.76.05',
    cuda: '≤ 13.0',
    basePrice: 2.98,
    originalPrice: 3.14,
    region: 'beijingDC2',
    zone: 'beijingB',
    availableGpuCount: 10
  },
  {
    id: '1b0d49b68a',
    machineName: '494机',
    gpuModel: 'RTX 5090',
    gpuMemory: '32GB',
    freeGpu: 6,
    totalGpu: 8,
    cpuCores: 25,
    memory: 90,
    cpuModel: 'Xeon(R) Platinum 8470Q',
    dataDisk: 50,
    expandableDisk: 7500,
    driver: '580.76.05',
    cuda: '13.0',
    basePrice: 437.00,
    originalPrice: 460.00,
    region: 'beijingDC2',
    zone: 'beijingDC3',
    availableGpuCount: 8
  },
  {
    id: '63af4ab7db',
    machineName: '518机',
    gpuModel: 'RTX 5090',
    gpuMemory: '32GB',
    freeGpu: 6,
    totalGpu: 8,
    cpuCores: 25,
    memory: 90,
    cpuModel: 'Xeon(R) Platinum 8470Q',
    dataDisk: 50,
    expandableDisk: 7105,
    driver: '580.76.05',
    cuda: '13.0',
    basePrice: 437.00,
    originalPrice: 460.00,
    region: 'beijingDC2',
    zone: 'beijingDC4',
    availableGpuCount: 8
  },
  {
    id: 'ff5d489b4f',
    machineName: '495机',
    gpuModel: 'RTX 5090',
    gpuMemory: '32GB',
    freeGpu: 6,
    totalGpu: 8,
    cpuCores: 25,
    memory: 90,
    cpuModel: 'Xeon(R) Platinum 8470Q',
    dataDisk: 50,
    expandableDisk: 6700,
    driver: '580.76.05',
    cuda: '13.0',
    basePrice: 437.00,
    originalPrice: 460.00,
    region: 'beijingDC2',
    zone: 'beijingDC3',
    availableGpuCount: 8
  },
  {
    id: 'a1b2c3d4e5',
    machineName: '600机',
    gpuModel: 'RTX PRO 6000',
    gpuMemory: '48GB',
    freeGpu: 4,
    totalGpu: 8,
    cpuCores: 32,
    memory: 128,
    cpuModel: 'Xeon(R) Platinum 8470Q',
    dataDisk: 100,
    expandableDisk: 8000,
    driver: '580.76.05',
    cuda: '13.0',
    basePrice: 589.00,
    region: 'westDC3',
    zone: 'beijingDC4',
    availableGpuCount: 8
  },
  {
    id: 'f6g7h8i9j0',
    machineName: '601机',
    gpuModel: 'vGPU-48GB',
    gpuMemory: '48GB',
    freeGpu: 8,
    totalGpu: 12,
    cpuCores: 48,
    memory: 192,
    cpuModel: 'Xeon(R) Platinum 8470Q',
    dataDisk: 150,
    expandableDisk: 10000,
    driver: '580.76.05',
    cuda: '13.0',
    basePrice: 689.00,
    region: 'chongqingDC1',
    zone: 'neimengDC2',
    availableGpuCount: 12
  },
  {
    id: 'k1l2m3n4o5',
    machineName: '602机',
    gpuModel: 'RTX 4090',
    gpuMemory: '24GB',
    freeGpu: 3,
    totalGpu: 8,
    cpuCores: 20,
    memory: 80,
    cpuModel: 'Xeon(R) Platinum 8470Q',
    dataDisk: 50,
    expandableDisk: 5000,
    driver: '580.76.05',
    cuda: '13.0',
    basePrice: 389.00,
    originalPrice: 410.00,
    region: 'beijingDC1',
    zone: 'shanghaiDC1',
    availableGpuCount: 8
  }
])

// GPU型号配置
const gpuModelConfig = ref<GpuModelOption[]>([
  { value: 'RTX 5090', label: 'RTX 5090', available: 685, total: 3280, regions: ['beijingDC2', 'beijingDC1', 'chongqingDC1'] },
  { value: 'RTX PRO 6000', label: 'RTX PRO 6000', available: 0, total: 8, regions: ['westDC3'] },
  { value: 'vGPU-48GB', label: 'vGPU-48GB', available: 31, total: 250, regions: ['chongqingDC1', 'neimengDC3'] },
  { value: 'vGPU-48GB-425W', label: 'vGPU-48GB-425W', available: 58, total: 160, regions: ['neimengDC3'] },
  { value: 'RTX 5090 D', label: 'RTX 5090 D', available: 1, total: 11, regions: ['beijingDC2'] },
  { value: 'RTX 4090', label: 'RTX 4090', available: 3, total: 1000, regions: ['beijingDC1', 'foshanDC1'] },
  { value: 'CPU', label: 'CPU', available: 0, total: 44, regions: ['beijingDC2', 'beijingDC1'] }
])

// 配置数据
const billingTypeOptions = ref([
  { value: 'payg', label: '按量计费' },
  { value: 'daily', label: '包日' },
  { value: 'weekly', label: '包周' },
  { value: 'monthly', label: '包月' },
  { value: 'year', label: '包年' }
])

const regions = ref<RegionOption[]>([
  { value: 'beijingDC2', label: '北京B区' },
  { value: 'westDC3', label: '西北B区' },
  { value: 'chongqingDC1', label: '重庆A区' },
  { value: 'neimengDC3', label: '内蒙B区' },
  { value: 'beijingDC1', label: '北京A区' },
  { value: 'foshanDC1', label: '佛山区' }
])

const zones = ref<ZoneOption[]>([
  { value: 'beijingB', label: '北京B区', regions: ['beijingDC2'] },
  { value: 'beijingDC4', label: 'L20专区', regions: ['beijingDC2'] },
  { value: 'beijingDC3', label: 'V100专区', regions: ['beijingDC2'] },
  { value: 'neimengDC2', label: 'A800专区', regions: ['neimengDC3'] },
  { value: 'shanghaiDC1', label: '摩尔线程专区', regions: ['beijingDC1'] },
  { value: 'guangdongDC1', label: '华为昇腾专区', regions: ['foshanDC1'] }
])

const gpuCountOptions = [1, 2, 3, 4, 5, 6, 7, 8, 10, 12]

// 优惠券数据
const availableCoupons = ref<Coupon[]>([
  { id: 'coupon1', name: '新用户优惠券', amount: 50, type: 'discount' },
  { id: 'coupon2', name: '周年庆优惠', amount: 100, type: 'discount' }
])

// 镜像选项
const imageOptions = ref([
  {
    value: 'pytorch',
    label: 'PyTorch',
    children: [
      {
        value: '1.12.0',
        label: '1.12.0',
        children: [
          {
            value: 'python3.8',
            label: 'Python 3.8',
            children: [
              { value: 'cuda11.6', label: 'CUDA 11.6' },
              { value: 'cuda11.7', label: 'CUDA 11.7' }
            ]
          }
        ]
      }
    ]
  }
])

// 表格列定义
const columns: TableColumnsType = [
  {
    title: '',
    key: 'action',
    width: 50
  },
  {
    title: '主机ID',
    dataIndex: 'id',
    key: 'id',
    width: 120
  },
  {
    title: '算力型号/显存',
    key: 'gpuModel',
    width: 150
  },
  {
    title: '空闲GPU',
    key: 'gpuInfo',
    width: 100,
    sorter: (a: Machine, b: Machine) => a.freeGpu - b.freeGpu
  },
  {
    title: '每GPU分配',
    key: 'cpuInfo',
    width: 120
  },
  {
    title: 'CPU型号',
    dataIndex: 'cpuModel',
    key: 'cpuModel',
    width: 180
  },
  {
    title: '硬盘',
    key: 'disk',
    width: 140,
    sorter: (a: Machine, b: Machine) => a.dataDisk - b.dataDisk
  },
  {
    title: '驱动/CUDA',
    key: 'driver',
    width: 140
  },
  {
    title: '价格(单卡)',
    key: 'price',
    width: 160
  }
]

// 计算属性
const cpuCores = computed(() => {
  const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
  return machine ? machine.cpuCores * gpuCount.value : 20 * gpuCount.value
})

const memory = computed(() => {
  const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
  return machine ? machine.memory * gpuCount.value : 90 * gpuCount.value
})

// 计费单位
const billingUnit = computed(() => {
  switch (billingType.value) {
    case 'payg': return '小时'
    case 'daily': return '天'
    case 'weekly': return '周'
    case 'monthly': return '月'
    default: return '周'
  }
})

// 可用的GPU型号（根据地区筛选）
const availableGpuModels = computed(() => {
  return gpuModelConfig.value.filter(model =>
    model.regions.includes(selectedRegion.value)
  )
})

// 选中的GPU型号标签
const selectedGpuModelLabel = computed(() => {
  if (selectedGpuModels.value.length === 0) return '未选择'
  const model = gpuModelConfig.value.find(m => m.value === selectedGpuModels.value[0])
  return model ? model.label : selectedGpuModels.value[0]
})

// 过滤后的机器列表
const filteredMachineList = computed(() => {
  let filtered = allMachineList.value.filter(machine => {
    // 按地区筛选
    if (machine.region !== selectedRegion.value) return false

    // 按专区筛选（如果有选择专区）
    if (selectedZone.value && machine.zone !== selectedZone.value) return false

    // 按GPU型号筛选
    if (selectedGpuModels.value.length > 0 && !selectedGpuModels.value.includes('all')) {
      if (!selectedGpuModels.value.includes(machine.gpuModel)) return false
    }

    // 按GPU数量筛选：机器的可用GPU数量要大于等于选择的GPU数量
    if (machine.availableGpuCount < gpuCount.value) return false

    // 确保有足够的空闲GPU
    if (machine.freeGpu < gpuCount.value) return false

    return true
  })

  return filtered
})

// 分页后的机器列表
const paginatedMachineList = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredMachineList.value.slice(start, end)
})

const showZones = computed(() => {
  return availableZones.value.length > 0
})

const availableZones = computed(() => {
  return zones.value.filter(zone => zone.regions.includes(selectedRegion.value))
})

const totalDiskSize = computed(() => {
  return needExpand.value ? 50 + expandSize.value : 50
})

const maxExpandSize = computed(() => {
  const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
  return machine ? machine.expandableDisk : 0
})

const totalPrice = computed(() => {
  const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
  if (!machine) return '0.00'

  let price = machine.basePrice * gpuCount.value

  // 硬盘扩容费用
  if (needExpand.value && expandSize.value > 0) {
    const diskPricePerGB = 0.1 // 假设每GB 0.1元/周
    price += diskPricePerGB * expandSize.value
  }

  // 优惠券折扣
  if (selectedCoupon.value) {
    const coupon = availableCoupons.value.find(c => c.id === selectedCoupon.value)
    if (coupon) {
      price = Math.max(0, price - coupon.amount)
    }
  }

  // 计费方式转换
  if (billingType.value === 'payg') price = price / (7 * 24)
  else if (billingType.value === 'daily') price = price / 7
  else if (billingType.value === 'monthly') price = price * 4

  return price.toFixed(2)
})

const originalTotalPrice = computed(() => {
  const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
  if (!machine || !machine.originalPrice) return ''

  let price = machine.originalPrice * gpuCount.value
  if (billingType.value === 'payg') price = price / (7 * 24)
  else if (billingType.value === 'daily') price = price / 7
  else if (billingType.value === 'monthly') price = price * 4

  return price.toFixed(2)
})

const canCreate = computed(() => {
  return selectedMachineId.value && selectedImage.value.length > 0
})

// 价格计算方法
const getPrice = (record: Machine) => {
  const basePrice = record.basePrice
  switch (billingType.value) {
    case 'payg': return (basePrice / (7 * 24)).toFixed(2)
    case 'daily': return (basePrice / 7).toFixed(2)
    case 'weekly': return basePrice.toFixed(2)
    case 'monthly': return (basePrice * 4).toFixed(2)
    default: return basePrice.toFixed(2)
  }
}

const getOriginalPrice = (record: Machine) => {
  if (!record.originalPrice) return ''
  const originalPrice = record.originalPrice
  switch (billingType.value) {
    case 'payg': return (originalPrice / (7 * 24)).toFixed(2)
    case 'daily': return (originalPrice / 7).toFixed(2)
    case 'weekly': return originalPrice.toFixed(2)
    case 'monthly': return (originalPrice * 4).toFixed(2)
    default: return originalPrice.toFixed(2)
  }
}

// 价格明细计算
const gpuPrice = computed(() => {
  const machine = allMachineList.value.find(m => m.id === selectedMachineId.value)
  if (!machine) return '0.00'

  let price = machine.basePrice * gpuCount.value
  if (billingType.value === 'payg') price = price / (7 * 24)
  else if (billingType.value === 'daily') price = price / 7
  else if (billingType.value === 'monthly') price = price * 4

  return price.toFixed(2)
})

const diskPrice = computed(() => {
  if (!needExpand.value || expandSize.value <= 0) return '0.00'
  // 假设每GB硬盘费用为0.1元/周
  const pricePerGB = 0.1
  let price = pricePerGB * expandSize.value
  if (billingType.value === 'payg') price = price / (7 * 24)
  else if (billingType.value === 'daily') price = price / 7
  else if (billingType.value === 'monthly') price = price * 4

  return price.toFixed(2)
})

const couponDiscount = computed(() => {
  if (!selectedCoupon.value) return '0.00'
  const coupon = availableCoupons.value.find(c => c.id === selectedCoupon.value)
  if (!coupon) return '0.00'

  let discount = coupon.amount
  if (billingType.value === 'payg') discount = discount / (7 * 24)
  else if (billingType.value === 'daily') discount = discount / 7
  else if (billingType.value === 'monthly') discount = discount * 4

  return discount.toFixed(2)
})

const showPriceBreakdown = computed(() => {
  return diskPrice.value !== '0.00' || couponDiscount.value !== '0.00'
})

// 方法
const handleRowClick = (record: Machine) => {
  selectedMachineId.value = record.id
}

const handleSelectMachine = (id: string) => {
  selectedMachineId.value = id
}

const getRowClassName = (record: Machine) => {
  return selectedMachineId.value === record.id ? 'selected-row' : ''
}

// 一卡可租
const handleRentMachine = (id: string) => {
  router.push("/layout/create")

}

const handleBillingTypeChange = () => {
  console.log('计费方式改变:', billingType.value)
}

const handleRegionChange = () => {
  console.log('地区改变:', selectedRegion.value)
  if (availableGpuModels.value.length > 0) {
    selectedGpuModels.value = [availableGpuModels.value[0].value]
  } else {
    selectedGpuModels.value = []
  }
  selectedZone.value = ''
  selectedMachineId.value = ''
  currentPage.value = 1
}

const handleZoneChange = () => {
  console.log('专区改变:', selectedZone.value)
  selectedMachineId.value = ''
  currentPage.value = 1
}

const handleGpuModelChange = () => {
  console.log('GPU型号改变:', selectedGpuModels.value)
  selectedMachineId.value = ''
  currentPage.value = 1
}

const handleGpuCountChange = () => {
  console.log('GPU数量改变:', gpuCount.value)
  selectedMachineId.value = ''
  currentPage.value = 1
}

const handleImageTypeChange = () => {
  console.log('镜像类型改变:', imageType.value)
  selectedImage.value = []
}

// 分页处理方法
const handlePageChange = (page: number, pageSize?: number) => {
  currentPage.value = page
  if (pageSize) {
    pageSize.value = pageSize
  }
}

const handlePageSizeChange = (current: number, size: number) => {
  currentPage.value = 1
  pageSize.value = size
}

const isGpuCountDisabled = (count: number) => {
  const machine = filteredMachineList.value.find(m => m.id === selectedMachineId.value)
  return machine ? count > machine.availableGpuCount : false
}

const filter = (inputValue: string, path: any[]) => {
  return path.some(option =>
    option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
  )
}

const handleCreate = async () => {
  creating.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 2000))
    message.success('实例创建成功！')
  } catch (error) {
    message.error('创建失败，请重试')
  } finally {
    creating.value = false
  }
}

const handleCancel = () => {
  window.history.back()
}

// 监听选中的机器列表，自动选择第一个可用的机器
watch(filteredMachineList, (newList) => {
  if (newList.length > 0 && !selectedMachineId.value) {
    selectedMachineId.value = newList[0].id
  } else if (newList.length === 0) {
    selectedMachineId.value = ''
  }
  // 重置到第一页
  currentPage.value = 1
}, { immediate: true })

// 监听器
watch(needExpand, (newVal) => {
  if (!newVal) {
    expandSize.value = 100
  }
})

watch(selectedMachineId, (newId) => {
  if (newId && needExpand.value) {
    const machine = allMachineList.value.find(m => m.id === newId)
    if (machine && expandSize.value > machine.expandableDisk) {
      expandSize.value = machine.expandableDisk
    }
  }
})

// 初始化时设置默认的GPU型号
if (availableGpuModels.value.length > 0) {
  selectedGpuModels.value = [availableGpuModels.value[0].value]
}
</script>

<style scoped lang="scss">
/* 强制让容器参与文档流并允许增长 */
.instance-create-container {
  display: block;
  width: 100%;
  // max-width: 1200px; 
  margin: 0 auto;
  padding: 24px;
  /* background: #fff; */
  box-sizing: border-box;
  /* 关键：确保它能自然撑高 */
  min-height: fit-content;
  height: auto;
  background: url('@/assets/bgImg.png') no-repeat center / 100% 100%;
}

.header {
  width: 60%;
  margin: 0 auto;
  text-align: center;
  padding: 60px 0 20px 0;

  h1 {
    font-size: 50px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 20px;
    color: rgba(0, 0, 0, 1);
    vertical-align: top;
  }

  h2 {
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 60px;
    color: rgba(166, 166, 166, 1);
    vertical-align: top;
  }
}

.instance-create-body {
  max-width: 1200px;
  margin: 0 auto;
}

.breadcrumb {
  margin-bottom: 16px;
}

.autodl-tip {
  margin-bottom: 24px;
}

.card {
  margin-bottom: 24px;
}

.select-server {
  margin-bottom: 24px;
}

.machine-list {
  margin-bottom: 24px;
}

.list-filter {
  margin-bottom: 16px;
}

.filter-item {
  display: flex;
  margin-bottom: 24px;
  align-items: flex-start;
}

.filter-label {
  width: 80px;
  margin-right: 16px;
  font-weight: 500;
  flex-shrink: 0;
  line-height: 32px;

  color: rgba(128, 128, 128, 1);
}

.filter-content {
  flex: 1;
}

.region-tag {
  margin-left: 8px;
}

.machine-table {
  margin-top: 24px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.table-header .label {
  font-weight: 500;
  font-size: 16px;
}

.table-header .total-count {
  color: #666;
  font-size: 14px;
}

.machine-id-info .machine-id {
  font-weight: 500;
}

.machine-id-info .machine-name {
  color: #666;
  font-size: 12px;
  margin-top: 2px;
}

.gpu-info .gpu-name {
  font-weight: 500;
}

.gpu-info .gpu-memory {
  color: #666;
  font-size: 12px;
}

.gpu-availability .free-count {
  font-weight: bold;
  color: #52c41a;
}

.gpu-availability .separator {
  margin: 0 4px;
  color: #666;
}

.gpu-availability .total-count {
  color: #666;
}

.cpu-memory-info,
.disk-info,
.driver-info {
  font-size: 12px;
  line-height: 1.4;
}

.disk-info .expandable-note {
  color: #1890ff;
  font-size: 11px;
  margin-top: 2px;
}

.price-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.price-info .current-price {
  color: #f7412d;
  font-weight: 500;
  font-size: 14px;
}

.price-info .original-price {
  text-decoration: line-through;
  color: #999;
  font-size: 12px;
}

.price-info .billing-unit {
  color: #999;
  font-size: 12px;
  margin-top: 2px;
}

.price-info .rentable-tag {
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
  color: #52c41a;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  margin-top: 4px;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}

.pagination-container {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}

.data-disk-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.disk-base {
  display: flex;
  align-items: center;
  gap: 16px;
}

.free-disk {
  color: #52c41a;
  font-weight: 500;
}

.disk-expand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.expand-label {
  font-weight: 500;
}

.expand-note {
  color: #666;
  font-size: 12px;
}

.instance-spec .spec-content {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.spec-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}

.spec-label {
  color: #666;
  font-size: 12px;
}

.spec-value {
  font-weight: 500;
}

.image-type {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.config-link {
  font-size: 14px;
}

.image-tip {
  color: #666;
  font-size: 12px;
  margin-bottom: 12px;
}

.image-tag {
  margin-left: 8px;
}

.coupon-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.coupon-balance {
  color: #666;
  font-size: 12px;
}

.footer-actions {
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
  padding: 20px 0;
  border-top: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 40px;
  width: 100%;
}

.price-summary {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.price-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.total-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.price-display {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.total-price {
  font-size: 32px;
  font-weight: 700;
  color: #f7412d;
  line-height: 1;
}

.price-unit {
  font-size: 14px;
  color: #999;
  font-weight: 500;
}

.original-price-container {
  margin-top: 2px;
}

.original-total-price {
  text-decoration: line-through;
  color: #999;
  font-size: 14px;
  font-weight: 500;
}

.price-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 12px;
}

.breakdown-label {
  color: #666;
  white-space: nowrap;
}

.breakdown-value {
  color: #333;
  font-weight: 500;
  white-space: nowrap;
}

.breakdown-value.discount {
  color: #52c41a;
}

.action-buttons {
  display: flex;
  gap: 16px;
  align-items: center;
}

.cancel-btn {
  padding: 0 24px;
  height: 48px;
  font-weight: 500;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
}

.cancel-btn:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.create-btn {
  padding: 0 32px;
  height: 48px;
  font-weight: 600;
  border-radius: 8px;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  border: none;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
  transition: all 0.3s ease;
}

.create-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
}

.create-btn:disabled {
  background: #f5f5f5;
  color: #d9d9d9;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

.selected-row {
  background-color: #f0f7ff !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .instance-create-container {
    width: 100%;
    padding: 16px;
  }

  .footer-actions {
    flex-direction: column;
    gap: 20px;
    padding: 16px 0;
  }

  .price-summary {
    width: 100%;
    justify-content: space-between;
  }

  .price-breakdown {
    display: none;
  }

  .action-buttons {
    width: 100%;
  }

  .cancel-btn,
  .create-btn {
    flex: 1;
  }

  .total-price {
    font-size: 28px;
  }

  .filter-item {
    flex-direction: column;
    gap: 12px;
  }

  .filter-label {
    width: 100%;
    margin-right: 0;
  }
}

:deep(.ant-radio-button-wrapper) {
  margin-right: 8px;
}

:deep(.ant-table-thead > tr > th) {
  background-color: #fafafa;
  font-weight: 500;
}

:deep(.ant-table-row) {
  cursor: pointer;
}

:deep(.ant-table-row:hover) {
  background-color: #f5f5f5;
}

:deep(.ant-pagination) {
  font-size: 14px;
}

:deep(.ant-pagination-total-text) {
  margin-right: 16px;
}

.machine-card-container.two-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 两列布局 */
  gap: 16px;
  margin-top: 24px;
}

/* 新增的卡片式布局样式 */
.machine-card-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.machine-card {
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: white;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  height: 100%;
  /* 确保卡片高度一致 */
}

.machine-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.selected-card {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.card-header {
  padding: 16px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 8px 8px 0 0;
}

.location-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.location-info .separator {
  color: #ccc;
}

.id-code {
  font-size: 12px;
  color: #999;
}

.available-info {
  font-size: 12px;
  color: #999;
}

.card-body {
  padding: 20px;
  flex: 1;
  /* 让card-body填满剩余空间 */
  display: flex;
  flex-direction: column;
}

.gpu-spec {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.gpu-model {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.gpu-memory {
  font-size: 18px;
  color: #333;
  font-weight: 500;
}

.availability {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 20px;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 内部也使用两列 */
  gap: 16px;
  margin-top: 16px;
  flex: 1;
  /* 让规格网格填满空间 */
}

.spec-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.spec-title {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.spec-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spec-label {
  font-size: 12px;
  color: #999;
}

.spec-value {
  font-size: 14px;
  color: #333;
  word-break: break-all;
}

.price-column {
  grid-column: span 2;
  /* 价格信息占据两列的宽度 */
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.price-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.current-price {
  font-size: 18px;
  font-weight: 500;
  color: #f7412d;
  display: flex;
  align-items: center;
  gap: 4px;
}

.original-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

.discount-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #fff5e6;
  border: 1px solid #ffe4b5;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.discount-icon {
  font-size: 12px;
}

.discount-text {
  color: #f7412d;
  font-weight: 500;
}

.member-note {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.rent-button {
  width: 120px;
  height: 36px;
  font-size: 14px;
  border-radius: 6px;
  margin-top: 8px;
}

.image-card-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.image-card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid #eee;
  cursor: pointer;
  transition: all 0.2s;
}

.image-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.image-card.selected {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.15);
}

/* 顶部 */
.image-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gpu-title {
  font-size: 18px;
  font-weight: 600;
}

.gpu-availability {
  font-size: 13px;
  color: #999;
}

/* 中部信息 */
.image-card-info {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 12px;
}

.info-item {
  display: flex;

  .info-item-name{
    width: 60px;
  }

  .info-item-account{
    padding-left: 10px;
    color: #999;
  }
}

/* 底部 */
.image-card-footer {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eee;
  padding-top: 15px;
}

.price {
  color: #f5222d;
}

.price-num {
  font-size: 22px;
  font-weight: bold;
}

.price-unit {
  font-size: 12px;
  margin-left: 4px;
  color: #999;
}

.buy-btn {
  width: 100px;
  height: 36px;
  border-radius: 6px;
}

/* 响应式 */
@media (max-width: 1200px) {
  .image-card-container {
    grid-template-columns: repeat(2, 1fr);
  }
}



/* 响应式设计 - 小屏幕适配 */
@media (max-width: 768px) {
  .image-card-container {
    grid-template-columns: 1fr;
  }

  .specs-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .price-column {
    grid-column: span 2;
  }

  .card-header {
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
  }

  .location-info {
    flex-direction: column;
    gap: 4px;
  }

  .available-info {
    font-size: 10px;
  }
}
</style>