bfg-common 1.5.548 → 1.5.550

package/components/common/vm/actions/common/customizeHardware/virtualHardware/VirtualHardware.vue

@@ -1,728 +1,694 @@
-<template>
-  <common-vm-actions-common-customize-hardware-virtual-hardware-new
-    v-if="isNewView"
-    v-model:cpu-invalid="cpuInvalid"
-    v-model:memory-invalid="memoryInvalid"
-    v-model:video-card-invalid="videoCardInvalid"
-    :nodes="props.nodes"
-    :files="props.files"
-    :is-edit="props.isEdit"
-    :storage="props.storage"
-    :project="props.project"
-    :max-cpus="props.maxCpus"
-    :max-memory="props.maxMemory"
-    :cpu-models="props.cpuModels"
-    :datastore="props.datastore"
-    :is-datastore-loading="props.isDatastoreLoading"
-    :networks-type="networksType"
-    :networks-table="props.networksTable"
-    :dropdown-items="dropdownItems"
-    :hard-disks-type="hardDisksType"
-    :networks-index="networksIndex"
-    :hard-disks-index="hardDisksIndex"
-    :pci-devices-type="pciDevicesType"
-    :is-show-file-modal="isShowFileModal"
-    :pci-devices-index="pciDevicesIndex"
-    :cd-dvd-drives-type="cdDvdDrivesType"
-    :cd-dvd-drives-index="cdDvdDrivesIndex"
-    :error-validation-fields="errorValidationFields"
-    :get-datastore-table-func="getDatastoreTableFunc"
-    :cpu="cpu"
-    :state="state"
-    :memory="memory"
-    :networks="networksLocal"
-    :hard-disks="hardDisksLocal"
-    :video-card="videoCard"
-    :pci-devices="pciDevicesLocal"
-    :cd-dvd-drives="cdDvdDrivesLocal"
-    :usb-controller="usbController"
-    :guest-machine-type="guestMachineType"
-    :passthrough-devices="passthroughDevices"
-    :mediated-devices="mediatedDevices"
-    :vm-cpu-help-text-second="vmCpuHelpTextSecond"
-    :compute-resource="props.computeResource"
-    :compatibility-info="props.compatibilityInfo"
-    @add-device="onAddDevice"
-    @get-storage="emits('get-storage', $event)"
-    @remove-network="onRemoveNetwork"
-    @hide-file-modal="isShowFileModal = false"
-    @remove-hard-disk="onRemoveHardDisk(...$event)"
-    @remove-pci-device="onRemovePciDevice"
-    @get-networks-table="emits('get-networks-table', $event)"
-    @add-exist-hard-disk="onAddExistHardDisk"
-    @roll-back-hard-disk="onRollBackHardDisk"
-    @set-invalid-network="onSetInvalidNetwork(...$event)"
-    @remove-cd-dvd-drive="onRemoveCdDvdDrive(...$event)"
-    @show-datastore-child="emits('show-datastore-child', $event)"
-    @get-folders-or-files="emits('get-folders-or-files', $event)"
-    @send-data-cpu-method="onSendDataCpuMethod"
-    @set-invalid-hard-disk="onSetInvalidHardDisk(...$event)"
-    @remove-error-by-title="emits('remove-error-by-title', $event)"
-    @roll-back-cd-dvd-drive="onRollBackCdDvdDrive"
-    @set-invalid-pci-device="onSetInvalidPciDevice(...$event)"
-    @get-active-device-child="emits('get-active-device-child', $event)"
-    @send-data-memory-method="onSendDataMemoryMethod"
-    @send-data-video-card-method="onSendDataVideoCardMethod"
-    @send-data-new-network-method="sendDataNewNetworkMethod(...$event)"
-    @send-data-pci-devices-method="onSendDataPciDevicesMethod(...$event)"
-    @send-data-new-hard-disk-method="onSendDataNewHardDiskMethod(...$event)"
-    @send-data-new-cd-dvd-drive-method="sendDataNewCdDvdDriveMethod(...$event)"
-    @send-data-new-usb-controller-method="onSendDataNewUsbControllerMethod"
-  />
-  <common-vm-actions-common-customize-hardware-virtual-hardware-old
-    v-else
-    v-model:cpu-invalid="cpuInvalid"
-    v-model:memory-invalid="memoryInvalid"
-    v-model:video-card-invalid="videoCardInvalid"
-    :nodes="props.nodes"
-    :files="props.files"
-    :is-edit="props.isEdit"
-    :storage="props.storage"
-    :project="props.project"
-    :max-cpus="props.maxCpus"
-    :max-memory="props.maxMemory"
-    :cpu-models="props.cpuModels"
-    :datastore="props.datastore"
-    :is-datastore-loading="props.isDatastoreLoading"
-    :networks-type="networksType"
-    :networks-table="props.networksTable"
-    :dropdown-items="dropdownItems"
-    :hard-disks-type="hardDisksType"
-    :networks-index="networksIndex"
-    :hard-disks-index="hardDisksIndex"
-    :pci-devices-type="pciDevicesType"
-    :is-show-file-modal="isShowFileModal"
-    :pci-devices-index="pciDevicesIndex"
-    :cd-dvd-drives-type="cdDvdDrivesType"
-    :cd-dvd-drives-index="cdDvdDrivesIndex"
-    :error-validation-fields="errorValidationFields"
-    :get-datastore-table-func="getDatastoreTableFunc"
-    :cpu="cpu"
-    :state="state"
-    :memory="memory"
-    :networks="networksLocal"
-    :hard-disks="hardDisksLocal"
-    :video-card="videoCard"
-    :pci-devices="pciDevicesLocal"
-    :cd-dvd-drives="cdDvdDrivesLocal"
-    :usb-controller="usbController"
-    :guest-machine-type="guestMachineType"
-    :passthrough-devices="passthroughDevices"
-    :mediated-devices="mediatedDevices"
-    :vm-cpu-help-text-second="vmCpuHelpTextSecond"
-    :compute-resource="props.computeResource"
-    @add-device="onAddDevice"
-    @get-storage="emits('get-storage', $event)"
-    @remove-network="onRemoveNetwork"
-    @hide-file-modal="isShowFileModal = false"
-    @remove-hard-disk="onRemoveHardDisk(...$event)"
-    @remove-pci-device="onRemovePciDevice"
-    @get-networks-table="emits('get-networks-table', $event)"
-    @add-exist-hard-disk="onAddExistHardDisk"
-    @roll-back-hard-disk="onRollBackHardDisk"
-    @set-invalid-network="onSetInvalidNetwork(...$event)"
-    @remove-cd-dvd-drive="onRemoveCdDvdDrive(...$event)"
-    @show-datastore-child="emits('show-datastore-child', $event)"
-    @get-folders-or-files="emits('get-folders-or-files', $event)"
-    @send-data-cpu-method="onSendDataCpuMethod"
-    @set-invalid-hard-disk="onSetInvalidHardDisk(...$event)"
-    @remove-error-by-title="emits('remove-error-by-title', $event)"
-    @roll-back-cd-dvd-drive="onRollBackCdDvdDrive"
-    @set-invalid-pci-device="onSetInvalidPciDevice(...$event)"
-    @get-active-device-child="emits('get-active-device-child', $event)"
-    @send-data-memory-method="onSendDataMemoryMethod"
-    @send-data-video-card-method="onSendDataVideoCardMethod"
-    @send-data-new-network-method="sendDataNewNetworkMethod(...$event)"
-    @send-data-pci-devices-method="onSendDataPciDevicesMethod(...$event)"
-    @send-data-new-hard-disk-method="onSendDataNewHardDiskMethod(...$event)"
-    @send-data-new-cd-dvd-drive-method="sendDataNewCdDvdDriveMethod(...$event)"
-    @send-data-new-usb-controller-method="onSendDataNewUsbControllerMethod"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
-import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
-import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
-import type { UI_I_FolderOrFileTreePayload } from '~/lib/models/store/storage/interfaces'
-import type { UI_I_FileTreeNode } from '~/components/lib/models/interfaces'
-import type {
-  UI_I_SendDataCpu,
-  UI_I_SendDataMemory,
-  UI_I_SendDataNewHardDisk,
-  UI_I_SendDataNewNetwork,
-  UI_I_SendDataVideoCard,
-  UI_I_InvalidKeys,
-  UI_I_SendDataVirtualHardware,
-  UI_I_SendDataNewCdDvdDrive,
-  // UI_I_HardDisk,
-  UI_I_SendDataNewPciDevice,
-} from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
-import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
-import type {
-  UI_T_HardDiskType,
-  UI_T_NetworkType,
-  UI_T_CdDvdType,
-} from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/types'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import type {
-  UI_I_DropdownTreeItem,
-  UI_I_DropdownTreeItemChild,
-} from '~/components/atoms/dropdown/tree/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  API_UI_I_VmEditCpu,
-  API_UI_I_VmEditMemory,
-  UI_I_MediatedDevice,
-  UI_I_PciDevice,
-} from '~/lib/models/store/vm/interfaces'
-import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
-import { dropdownItemsFunc } from './lib/config/dropdownItems'
-
-const props = withDefaults(
-  defineProps<{
-    storage: UI_I_DatastoreTableItem | null
-    cpuModels: UI_I_OptionItem[]
-    maxCpus: number
-    maxMemory: number
-    isEdit: boolean
-    isClone: boolean
-    errorValidationFields: UI_I_ErrorValidationField<string>[]
-    nodes: UI_I_FileTreeNode[]
-    files: UI_I_FileTreeNode[]
-    networksTable: UI_I_NetworkTableItem[]
-    getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
-    datastore: UI_I_DatastoreTableItem[]
-    isDatastoreLoading: boolean
-    project: UI_T_Project
-    state?: string | number
-    cpu?: API_UI_I_VmEditCpu
-    memory?: API_UI_I_VmEditMemory
-    vmCpuHelpTextSecond?: string
-    hardDisks?: UI_I_SendDataNewHardDisk[] | null
-    cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
-    networks?: UI_I_SendDataNewNetwork[] | null
-    videoCard?: UI_I_SendDataVideoCard
-    usbController?: string
-    pciDevices?: UI_I_SendDataNewPciDevice[]
-    passthroughDevices?: UI_I_PciDevice[]
-    mediatedDevices?: UI_I_MediatedDevice[]
-    guestMachineType?: UI_I_OptionItem | null
-    computeResource?: UI_I_TreeNode | null
-    compatibilityInfo?: string
-  }>(),
-  {
-    state: undefined,
-    cpu: undefined,
-    memory: undefined,
-    vmCpuHelpTextSecond: undefined,
-    hardDisks: undefined,
-    cdDvdDrives: undefined,
-    networks: undefined,
-    videoCard: undefined,
-    usbController: undefined,
-    pciDevices: undefined,
-    passthroughDevices: undefined,
-    mediatedDevices: undefined,
-    guestMachineType: undefined,
-    computeResource: undefined,
-    compatibilityInfo: undefined,
-  }
-)
-const emits = defineEmits<{
-  (event: 'send-data', value: UI_I_SendDataVirtualHardware): void
-  (event: 'invalid', value: string[]): void
-  (event: 'get-storage', value: UI_I_TablePayload): void
-  (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
-  (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
-  (event: 'show-datastore-child', value: UI_I_FileTreeNode): void
-  (event: 'remove-error-by-title', value: string): void
-  (event: 'get-networks-table', value: UI_I_TablePayload): void
-  (event: 'get-pci-devices'): void
-}>()
-
-const { $store, $binary }: any = useNuxtApp()
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const dropdownItems = computed<UI_I_DropdownTreeItem[]>(() =>
-  dropdownItemsFunc(
-    localization.value,
-    props.state,
-    props.passthroughDevices,
-    props.mediatedDevices
-  )
-)
-
-const hardDisksIndex = ref<number[]>([0])
-const hardDisksType = ref<UI_T_HardDiskType[]>(['new'])
-const hardDisksLocal = ref<UI_I_SendDataNewHardDisk[]>([
-  {
-    create: true,
-    size: 90,
-    source: '',
-    boot_order: -1,
-  },
-])
-watch(
-  () => props.hardDisks,
-  (newValue) => {
-    if ((!props.isEdit && !props.isClone) || !newValue) return
-
-    const count = newValue?.length || 0
-    hardDisksIndex.value = [...Array(count).keys()]
-    hardDisksLocal.value = newValue
-    if (props.isEdit) {
-      hardDisksType.value = Array(count).fill('edit')
-    } else if (props.isClone) {
-      hardDisksType.value = Array(count).fill('clone')
-      hardDisksLocal.value = newValue.map((hardDisk) => {
-        hardDisk.create = true
-        return hardDisk
-      })
-    }
-  },
-  { immediate: true }
-)
-
-const addHardDisk = (
-  create = true,
-  size = 90,
-  source = '',
-  type: UI_T_HardDiskType = 'new',
-  provisioned_type?: number // При добавлении существующей
-): void => {
-  const newIndex = (hardDisksIndex.value.at(-1) ?? -1) + 1
-  hardDisksIndex.value.push(newIndex)
-  hardDisksType.value.push(type)
-
-  let provisionType = 'thick'
-  if (provisioned_type === 1) provisionType = 'thin'
-
-  hardDisksLocal.value.push({
-    create,
-    size,
-    source,
-    attach: true,
-    boot_order: 0, // Убираем галочку
-    provision_type: provisionType,
-  })
-  sendData()
-}
-const onAddExistHardDisk = (file: UI_I_FileTreeNode): void => {
-  addHardDisk(
-    false,
-    $binary.bToGb(file.size),
-    file.path,
-    'exist',
-    file.provisioned_type
-  )
-}
-const onRemoveHardDisk = (
-  index: number,
-  hardDisk: UI_I_SendDataNewHardDisk
-): void => {
-  const removeIndex = hardDisksIndex.value.indexOf(index)
-
-  if (!hardDisk.create && !hardDisk.attach) {
-    hardDisksType.value = hardDisksType.value.map((item, key) => {
-      if (key === removeIndex) return 'removed'
-      return item
-    })
-    sendData()
-    return
-  }
-
-  hardDisksIndex.value = hardDisksIndex.value.filter((item) => item !== index)
-  hardDisksType.value = hardDisksType.value.filter(
-    (_item, key) => key !== removeIndex
-  )
-
-  hardDisksLocal.value = hardDisksLocal.value.filter(
-    (_hardDisk, key: number) => {
-      return removeIndex !== key
-    }
-  )
-
-  delete newHardDiskInvalidKeys.value[index]
-  delete sendDataNewHardDisk.value[index]
-  sendData()
-}
-const onRollBackHardDisk = (index: number): void => {
-  const removeIndex = hardDisksIndex.value.indexOf(index)
-  hardDisksType.value = hardDisksType.value.map((item, key) => {
-    if (key === removeIndex) return 'edit'
-    return item
-  })
-}
-
-const defaultNetwork = {
-  network: '',
-  net_bridge: '',
-  mac: '',
-  target: '',
-  model: '',
-  boot_order: -1,
-}
-const networksLocal = ref<UI_I_SendDataNewNetwork[]>([
-  useDeepCopy(defaultNetwork),
-])
-const networksType = ref<UI_T_NetworkType[]>(['new'])
-const networksIndex = ref<number[]>([0])
-watch(
-  () => props.networks,
-  (newValue) => {
-    if (!props.isEdit && !props.isClone) return
-    if (!newValue) {
-      networksLocal.value = []
-      networksType.value = []
-      networksIndex.value = []
-      return
-    }
-
-    // networksLocal.value = newValue
-    // networksType.value = Array(newValue.length).fill('edit')
-    const count = newValue?.length || 0
-    networksIndex.value = [...Array(count).keys()]
-    networksLocal.value = newValue
-    if (props.isEdit) {
-      networksType.value = Array(count).fill('edit')
-    } else if (props.isClone) {
-      networksType.value = Array(count).fill('clone')
-    }
-  },
-  { immediate: true }
-)
-const addNetwork = (): void => {
-  const index = (networksIndex.value.at(-1) ?? -1) + 1
-  networksIndex.value.push(index)
-  networksType.value.push('new')
-
-  networksLocal.value.push({
-    ...useDeepCopy(defaultNetwork),
-    boot_order: 0, // Убираем галочку
-  })
-}
-const onRemoveNetwork = (index: number): void => {
-  const removeIndex = networksIndex.value.indexOf(index)
-  networksIndex.value = networksIndex.value.filter((item) => item !== index)
-  networksType.value = networksType.value.filter(
-    (_item, key) => key !== removeIndex
-  )
-  networksLocal.value = networksLocal.value.filter(
-    (_network, key: number) => removeIndex !== key
-  )
-
-  delete newNetworkInvalidKeys.value[index]
-  delete sendDataNewNetwork.value[index]
-  sendData()
-}
-
-const defaultCdDvdDriver: UI_I_SendDataNewCdDvdDrive = {
-  create: false,
-  attach: false,
-  source: '',
-  bus: '',
-  device_type: 'cdrom',
-  boot_order: -1,
-}
-const cdDvdDrivesLocal = ref<UI_I_SendDataNewCdDvdDrive[]>([
-  useDeepCopy(defaultCdDvdDriver),
-])
-const cdDvdDrivesIndex = ref<number[]>([0])
-const cdDvdDrivesType = ref<UI_T_CdDvdType[]>(['new'])
-watch(
-  () => props.cdDvdDrives,
-  (newValue) => {
-    if ((!props.isEdit && !props.isClone) || !newValue) return
-
-    // cdDvdDrivesLocal.value = newValue
-    // cdDvdDrivesType.value = Array(newValue.length).fill('edit')
-    const count = newValue?.length || 0
-    cdDvdDrivesIndex.value = [...Array(count).keys()]
-    cdDvdDrivesLocal.value = newValue
-    if (props.isEdit) {
-      cdDvdDrivesType.value = Array(count).fill('edit')
-    } else if (props.isClone) {
-      cdDvdDrivesType.value = Array(count).fill('new')
-    }
-  },
-  { immediate: true }
-)
-const addCdDvdDrive = (): void => {
-  const value = (cdDvdDrivesIndex.value.at(-1) ?? -1) + 1
-  cdDvdDrivesIndex.value.push(value)
-  cdDvdDrivesType.value.push('new')
-  cdDvdDrivesLocal.value.push({
-    ...useDeepCopy(defaultCdDvdDriver),
-    attach: true,
-    boot_order: 0, // Убираем галочку
-  })
-}
-const onRemoveCdDvdDrive = (
-  index: number,
-  cdDvdDrive: UI_I_SendDataNewCdDvdDrive
-): void => {
-  const removeIndex = cdDvdDrivesIndex.value.indexOf(index)
-
-  // if (!cdDvdDrive.create && !cdDvdDrive.attach) {
-  if (cdDvdDrivesType.value[index] === 'edit' && !cdDvdDrive.attach) {
-    cdDvdDrivesType.value = cdDvdDrivesType.value.map((item, key) => {
-      if (key === removeIndex) return 'removed'
-      return item
-    })
-    sendData()
-    return
-  }
-
-  cdDvdDrivesIndex.value = cdDvdDrivesIndex.value.filter(
-    (cdDvdDrive) => cdDvdDrive !== index
-  )
-  cdDvdDrivesType.value = cdDvdDrivesType.value.filter(
-    (_item, key) => key !== index
-  )
-  cdDvdDrivesLocal.value = cdDvdDrivesLocal.value.filter(
-    (_cdDvdDrive, key: number) => removeIndex !== key
-  )
-
-  delete sendDataNewCdDvdDrive.value[index]
-  sendData()
-}
-const onRollBackCdDvdDrive = (index: number): void => {
-  const removeIndex = cdDvdDrivesIndex.value.indexOf(index)
-  cdDvdDrivesType.value = cdDvdDrivesType.value.map((item, key) => {
-    if (key === removeIndex) return 'edit'
-    return item
-  })
-}
-
-const defaultPciDevice: UI_I_SendDataNewPciDevice = {
-  address: '',
-  vendor_name: '',
-  class_name: '',
-  device_name: '',
-}
-const pciDevicesIndex = ref<number[]>([0])
-const pciDevicesType = ref<('new' | 'edit' | 'removed')[]>(['new'])
-const pciDevicesLocal = ref<UI_I_SendDataNewPciDevice[]>([])
-watch(
-  () => props.pciDevices,
-  (newValue) => {
-    if ((!props.isEdit && !props.isClone) || !newValue) return
-
-    const count = newValue?.length || 0
-    pciDevicesIndex.value = [...Array(count).keys()]
-    pciDevicesLocal.value = newValue || []
-    if (props.isEdit) {
-      pciDevicesType.value = Array(count).fill('edit')
-    } else if (props.isClone) {
-      pciDevicesType.value = Array(count).fill('new')
-    }
-  },
-  { immediate: true }
-)
-
-const addPciDevice = (): void => {
-  const newIndex = (pciDevicesIndex.value.at(-1) ?? -1) + 1
-  pciDevicesIndex.value.push(newIndex)
-  pciDevicesType.value.push('new')
-
-  pciDevicesLocal.value.push(useDeepCopy(defaultPciDevice))
-}
-const onRemovePciDevice = (index: number): void => {
-  const removeIndex = pciDevicesIndex.value.indexOf(index)
-  pciDevicesIndex.value = pciDevicesIndex.value.filter((item) => item !== index)
-  pciDevicesType.value = pciDevicesType.value.filter(
-    (_item, key) => key !== removeIndex
-  )
-
-  pciDevicesLocal.value = pciDevicesLocal.value.filter(
-    (_pciDevice, key: number) => {
-      return removeIndex !== key
-    }
-  )
-
-  delete newPciDeviceInvalidKeys.value[index]
-  delete sendDataNewPciDevices.value[index]
-  sendData()
-}
-
-const isShowFileModal = ref<boolean>(false)
-const onAddDevice = (item: UI_I_DropdownTreeItemChild): void => {
-  switch (item.value) {
-    case 1:
-      addHardDisk()
-      break
-    case 2:
-      isShowFileModal.value = true
-      break
-    case 5:
-      addCdDvdDrive()
-      break
-    case 10:
-      addPciDevice()
-      break
-    case 14:
-      addNetwork()
-      break
-  }
-}
-
-const cpuInvalid = ref<boolean>(false)
-const sendDataCpu = ref<UI_I_SendDataCpu | null>(null)
-const onSendDataCpuMethod = (data: UI_I_SendDataCpu): void => {
-  sendDataCpu.value = data
-  sendData()
-}
-const sendDataMemory = ref<UI_I_SendDataMemory | null>(null)
-const onSendDataMemoryMethod = (data: UI_I_SendDataMemory): void => {
-  sendDataMemory.value = data
-  sendData()
-}
-const sendDataNewHardDisk = ref<UI_I_SendDataNewHardDisk[]>([])
-const onSendDataNewHardDiskMethod = (
-  data: UI_I_SendDataNewHardDisk,
-  index: number
-): void => {
-  sendDataNewHardDisk.value[index] = data
-  sendData()
-}
-const sendDataNewNetwork = ref<UI_I_SendDataNewNetwork[]>([])
-const sendDataNewNetworkMethod = (
-  data: UI_I_SendDataNewNetwork,
-  index: number
-): void => {
-  sendDataNewNetwork.value[index] = data
-  sendData()
-}
-const sendDataNewCdDvdDrive = ref<UI_I_SendDataNewCdDvdDrive[]>([])
-const sendDataNewCdDvdDriveMethod = (
-  data: UI_I_SendDataNewCdDvdDrive,
-  index: number
-): void => {
-  sendDataNewCdDvdDrive.value[index] = data
-  sendData()
-}
-const sendDataNewUsbController = ref<string | null>(null)
-const onSendDataNewUsbControllerMethod = (data: string): void => {
-  sendDataNewUsbController.value = data
-  sendData()
-}
-const sendDataNewPciDevices = ref<UI_I_SendDataNewPciDevice[]>([])
-const onSendDataPciDevicesMethod = (
-  data: UI_I_SendDataNewPciDevice,
-  index: number
-): void => {
-  sendDataNewPciDevices.value[index] = data
-  sendData()
-}
-const sendDataVideoCard = ref<UI_I_SendDataVideoCard | null>(null)
-const onSendDataVideoCardMethod = (data: UI_I_SendDataVideoCard): void => {
-  sendDataVideoCard.value = data
-  sendData()
-}
-
-const sendData = (): void => {
-  const cpu = sendDataCpu.value
-  const memory = sendDataMemory.value
-  const hardDisks = sendDataNewHardDisk.value.flat(2)
-  const networks = sendDataNewNetwork.value.flat(2)
-  const cdDvdDrives = sendDataNewCdDvdDrive.value.flat(2)
-  const pciDevices = sendDataNewPciDevices.value.flat()
-  const usbController = sendDataNewUsbController.value
-  const videoCard = sendDataVideoCard.value
-
-  const sendData: UI_I_SendDataVirtualHardware = {
-    cpu,
-    memory,
-    usbController,
-    pciDevices,
-    networks,
-    hardDisks,
-    cdDvdDrives,
-    videoCard,
-  }
-  emits('send-data', sendData)
-}
-
-const onSetInvalidHardDisk = (invalid: boolean, index: number): void => {
-  newHardDiskInvalidKeys.value[index] = invalid
-}
-
-const onSetInvalidNetwork = (invalid: boolean, key: number): void => {
-  newNetworkInvalidKeys.value[key] = invalid
-}
-
-const onSetInvalidPciDevice = (invalid: boolean, key: number): void => {
-  newPciDeviceInvalidKeys.value[key] = invalid
-}
-
-const memoryInvalid = ref<boolean>(false)
-const videoCardInvalid = ref<boolean>(false)
-const newHardDiskInvalidKeys = ref<UI_I_InvalidKeys>({})
-const newNetworkInvalidKeys = ref<UI_I_InvalidKeys>({})
-const newPciDeviceInvalidKeys = ref<UI_I_InvalidKeys>({})
-
-watch(
-  [
-    cpuInvalid,
-    memoryInvalid,
-    newHardDiskInvalidKeys,
-    newNetworkInvalidKeys,
-    newPciDeviceInvalidKeys,
-    videoCardInvalid,
-  ],
-  () => {
-    const cpu = cpuInvalid.value ? localization.value.common.cpu : ''
-    const memory = memoryInvalid.value ? localization.value.common.memory : ''
-    const videoCard = videoCardInvalid.value
-      ? localization.value.common.videoCard
-      : ''
-    let newHardDisk = ''
-    Object.keys(newHardDiskInvalidKeys.value).forEach((key) => {
-      if (!newHardDiskInvalidKeys.value[+key]) {
-        return
-      }
-
-      newHardDisk +=
-        (newHardDisk ? ', ' : '') +
-        localization.value.common.newHardDisk +
-        ' ' +
-        (+key + 1)
-    })
-    let newNetwork = ''
-    Object.keys(newNetworkInvalidKeys.value).forEach((key) => {
-      if (!newNetworkInvalidKeys.value[+key]) {
-        return
-      }
-
-      newNetwork +=
-        (newNetwork ? ', ' : '') +
-        localization.value.common.newNetwork +
-        ' ' +
-        (+key + 1)
-    })
-    // let pciDevice = ''
-    // Object.keys(newPciDeviceInvalidKeys.value).forEach((key) => {
-    //   if (!newPciDeviceInvalidKeys.value[+key]) {
-    //     return
-    //   }
-    //
-    //   pciDevice +=
-    //     (pciDevice ? ', ' : '') +
-    //     localization.value.common.pciDevice +
-    //     ' ' +
-    //     (+key + 1)
-    // })
-
-    emits('invalid', [cpu, memory, newHardDisk, newNetwork, videoCard])
-  },
-  { deep: true }
-)
-
-emits('get-pci-devices')
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <common-vm-actions-common-customize-hardware-virtual-hardware-new
+    v-if="isNewView"
+    v-model="model"
+    v-model:cpu-invalid="cpuInvalid"
+    v-model:memory-invalid="memoryInvalid"
+    v-model:video-card-invalid="videoCardInvalid"
+    :nodes="props.nodes"
+    :files="props.files"
+    :is-edit="props.isEdit"
+    :storage="props.storage"
+    :project="props.project"
+    :max-memory="props.maxMemory"
+    :cpu-models="props.cpuModels"
+    :datastore="props.datastore"
+    :is-datastore-loading="props.isDatastoreLoading"
+    :networks-type="networksType"
+    :networks-table="props.networksTable"
+    :dropdown-items="dropdownItems"
+    :hard-disks-type="hardDisksType"
+    :networks-index="networksIndex"
+    :hard-disks-index="hardDisksIndex"
+    :pci-devices-type="pciDevicesType"
+    :is-show-file-modal="isShowFileModal"
+    :pci-devices-index="pciDevicesIndex"
+    :cd-dvd-drives-type="cdDvdDrivesType"
+    :cd-dvd-drives-index="cdDvdDrivesIndex"
+    :error-validation-fields="errorValidationFields"
+    :get-datastore-table-func="getDatastoreTableFunc"
+    :state="state"
+    :networks="networksLocal"
+    :hard-disks="hardDisksLocal"
+    :video-card="videoCard"
+    :pci-devices="pciDevicesLocal"
+    :cd-dvd-drives="cdDvdDrivesLocal"
+    :guest-machine-type="guestMachineType"
+    :passthrough-devices="passthroughDevices"
+    :mediated-devices="mediatedDevices"
+    :vm-cpu-help-text-second="vmCpuHelpTextSecond"
+    :compute-resource="props.computeResource"
+    :compatibility-info="props.compatibilityInfo"
+    @add-device="onAddDevice"
+    @get-storage="emits('get-storage', $event)"
+    @remove-network="onRemoveNetwork"
+    @hide-file-modal="isShowFileModal = false"
+    @remove-hard-disk="onRemoveHardDisk(...$event)"
+    @remove-pci-device="onRemovePciDevice"
+    @get-networks-table="emits('get-networks-table', $event)"
+    @add-exist-hard-disk="onAddExistHardDisk"
+    @roll-back-hard-disk="onRollBackHardDisk"
+    @set-invalid-network="onSetInvalidNetwork(...$event)"
+    @remove-cd-dvd-drive="onRemoveCdDvdDrive(...$event)"
+    @show-datastore-child="emits('show-datastore-child', $event)"
+    @get-folders-or-files="emits('get-folders-or-files', $event)"
+    @set-invalid-hard-disk="onSetInvalidHardDisk(...$event)"
+    @remove-error-by-title="emits('remove-error-by-title', $event)"
+    @roll-back-cd-dvd-drive="onRollBackCdDvdDrive"
+    @set-invalid-pci-device="onSetInvalidPciDevice(...$event)"
+    @get-active-device-child="emits('get-active-device-child', $event)"
+    @send-data-new-network-method="sendDataNewNetworkMethod(...$event)"
+    @send-data-pci-devices-method="onSendDataPciDevicesMethod(...$event)"
+    @send-data-new-hard-disk-method="onSendDataNewHardDiskMethod(...$event)"
+    @send-data-new-cd-dvd-drive-method="sendDataNewCdDvdDriveMethod(...$event)"
+  />
+  <common-vm-actions-common-customize-hardware-virtual-hardware-old
+    v-else
+    v-model="model"
+    v-model:cpu-invalid="cpuInvalid"
+    v-model:memory-invalid="memoryInvalid"
+    v-model:video-card-invalid="videoCardInvalid"
+    :nodes="props.nodes"
+    :files="props.files"
+    :is-edit="props.isEdit"
+    :storage="props.storage"
+    :project="props.project"
+    :max-memory="props.maxMemory"
+    :cpu-models="props.cpuModels"
+    :datastore="props.datastore"
+    :is-datastore-loading="props.isDatastoreLoading"
+    :networks-type="networksType"
+    :networks-table="props.networksTable"
+    :dropdown-items="dropdownItems"
+    :hard-disks-type="hardDisksType"
+    :networks-index="networksIndex"
+    :hard-disks-index="hardDisksIndex"
+    :pci-devices-type="pciDevicesType"
+    :is-show-file-modal="isShowFileModal"
+    :pci-devices-index="pciDevicesIndex"
+    :cd-dvd-drives-type="cdDvdDrivesType"
+    :cd-dvd-drives-index="cdDvdDrivesIndex"
+    :error-validation-fields="errorValidationFields"
+    :get-datastore-table-func="getDatastoreTableFunc"
+    :state="state"
+    :networks="networksLocal"
+    :hard-disks="hardDisksLocal"
+    :video-card="videoCard"
+    :pci-devices="pciDevicesLocal"
+    :cd-dvd-drives="cdDvdDrivesLocal"
+    :guest-machine-type="guestMachineType"
+    :passthrough-devices="passthroughDevices"
+    :mediated-devices="mediatedDevices"
+    :vm-cpu-help-text-second="vmCpuHelpTextSecond"
+    :compute-resource="props.computeResource"
+    @add-device="onAddDevice"
+    @get-storage="emits('get-storage', $event)"
+    @remove-network="onRemoveNetwork"
+    @hide-file-modal="isShowFileModal = false"
+    @remove-hard-disk="onRemoveHardDisk(...$event)"
+    @remove-pci-device="onRemovePciDevice"
+    @get-networks-table="emits('get-networks-table', $event)"
+    @add-exist-hard-disk="onAddExistHardDisk"
+    @roll-back-hard-disk="onRollBackHardDisk"
+    @set-invalid-network="onSetInvalidNetwork(...$event)"
+    @remove-cd-dvd-drive="onRemoveCdDvdDrive(...$event)"
+    @show-datastore-child="emits('show-datastore-child', $event)"
+    @get-folders-or-files="emits('get-folders-or-files', $event)"
+    @set-invalid-hard-disk="onSetInvalidHardDisk(...$event)"
+    @remove-error-by-title="emits('remove-error-by-title', $event)"
+    @roll-back-cd-dvd-drive="onRollBackCdDvdDrive"
+    @set-invalid-pci-device="onSetInvalidPciDevice(...$event)"
+    @get-active-device-child="emits('get-active-device-child', $event)"
+    @send-data-new-network-method="sendDataNewNetworkMethod(...$event)"
+    @send-data-pci-devices-method="onSendDataPciDevicesMethod(...$event)"
+    @send-data-new-hard-disk-method="onSendDataNewHardDiskMethod(...$event)"
+    @send-data-new-cd-dvd-drive-method="sendDataNewCdDvdDriveMethod(...$event)"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
+import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
+import type { UI_I_FolderOrFileTreePayload } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_FileTreeNode } from '~/components/lib/models/interfaces'
+import type {
+  UI_I_SendDataNewHardDisk,
+  UI_I_SendDataNewNetwork,
+  UI_I_SendDataVideoCard,
+  UI_I_InvalidKeys,
+  UI_I_SendDataNewCdDvdDrive,
+  // UI_I_HardDisk,
+  UI_I_SendDataNewPciDevice,
+} from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
+import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+import type {
+  UI_T_HardDiskType,
+  UI_T_NetworkType,
+  UI_T_CdDvdType,
+} from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/types'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type {
+  UI_I_DropdownTreeItem,
+  UI_I_DropdownTreeItemChild,
+} from '~/components/atoms/dropdown/tree/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_MediatedDevice,
+  UI_I_PciDevice,
+} from '~/lib/models/store/vm/interfaces'
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+import type { UI_I_CreateVmData } from '~/components/common/vm/actions/common/lib/models/interfaces'
+import { dropdownItemsFunc } from './lib/config/dropdownItems'
+
+const model = defineModel<UI_I_CreateVmData>({ required: true })
+
+const props = withDefaults(
+  defineProps<{
+    storage: UI_I_DatastoreTableItem | null
+    cpuModels: UI_I_OptionItem[]
+    maxMemory: number
+    isEdit: boolean
+    isClone: boolean
+    errorValidationFields: UI_I_ErrorValidationField[]
+    nodes: UI_I_FileTreeNode[]
+    files: UI_I_FileTreeNode[]
+    networksTable: UI_I_NetworkTableItem[]
+    getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+    datastore: UI_I_DatastoreTableItem[]
+    isDatastoreLoading: boolean
+    project: UI_T_Project
+    state?: string | number
+    vmCpuHelpTextSecond?: string
+    hardDisks?: UI_I_SendDataNewHardDisk[] | null
+    cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
+    networks?: UI_I_SendDataNewNetwork[] | null
+    videoCard?: UI_I_SendDataVideoCard
+    pciDevices?: UI_I_SendDataNewPciDevice[]
+    passthroughDevices?: UI_I_PciDevice[]
+    mediatedDevices?: UI_I_MediatedDevice[]
+    guestMachineType?: UI_I_OptionItem | null
+    computeResource?: UI_I_TreeNode | null
+    compatibilityInfo?: string
+  }>(),
+  {
+    state: undefined,
+    vmCpuHelpTextSecond: undefined,
+    hardDisks: undefined,
+    cdDvdDrives: undefined,
+    networks: undefined,
+    videoCard: undefined,
+    pciDevices: undefined,
+    passthroughDevices: undefined,
+    mediatedDevices: undefined,
+    guestMachineType: undefined,
+    computeResource: undefined,
+    compatibilityInfo: undefined,
+  }
+)
+const emits = defineEmits<{
+  (event: 'invalid', value: string[]): void
+  (event: 'get-storage', value: UI_I_TablePayload): void
+  (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
+  (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
+  (event: 'show-datastore-child', value: UI_I_FileTreeNode): void
+  (event: 'remove-error-by-title', value: string): void
+  (event: 'get-networks-table', value: UI_I_TablePayload): void
+  (event: 'get-pci-devices'): void
+}>()
+
+const { $store, $binary }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const dropdownItems = computed<UI_I_DropdownTreeItem[]>(() =>
+  dropdownItemsFunc(
+    localization.value,
+    props.state,
+    props.passthroughDevices,
+    props.mediatedDevices
+  )
+)
+
+const hardDisksIndex = ref<number[]>([0])
+const hardDisksType = ref<UI_T_HardDiskType[]>(['new'])
+const hardDisksLocal = ref<UI_I_SendDataNewHardDisk[]>([
+  {
+    create: true,
+    size: 90,
+    source: '',
+    boot_order: -1,
+  },
+])
+watch(
+  () => props.hardDisks,
+  (newValue) => {
+    if ((!props.isEdit && !props.isClone) || !newValue) return
+
+    const count = newValue?.length || 0
+    hardDisksIndex.value = [...Array(count).keys()]
+    hardDisksLocal.value = newValue
+    if (props.isEdit) {
+      hardDisksType.value = Array(count).fill('edit')
+    } else if (props.isClone) {
+      hardDisksType.value = Array(count).fill('clone')
+      hardDisksLocal.value = newValue.map((hardDisk) => {
+        hardDisk.create = true
+        return hardDisk
+      })
+    }
+  },
+  { immediate: true }
+)
+
+const addHardDisk = (
+  create = true,
+  size = 90,
+  source = '',
+  type: UI_T_HardDiskType = 'new',
+  provisioned_type?: number // При добавлении существующей
+): void => {
+  const newIndex = (hardDisksIndex.value.at(-1) ?? -1) + 1
+  hardDisksIndex.value.push(newIndex)
+  hardDisksType.value.push(type)
+
+  let provisionType = 'thick'
+  if (provisioned_type === 1) provisionType = 'thin'
+
+  model.value.disk_devices = [
+    ...model.value.disk_devices.filter((disk) => disk.device_type !== 'cdrom'),
+    {
+      create,
+      size,
+      source,
+      attach: true,
+      boot_order: 0, // Убираем галочку
+      provision_type: provisionType,
+    },
+    ...model.value.disk_devices.filter((disk) => disk.device_type === 'cdrom'),
+  ]
+  hardDisksLocal.value.push({
+    create,
+    size,
+    source,
+    attach: true,
+    boot_order: 0, // Убираем галочку
+    provision_type: provisionType,
+  })
+}
+const onAddExistHardDisk = (file: UI_I_FileTreeNode): void => {
+  addHardDisk(
+    false,
+    $binary.bToGb(file.size),
+    file.path,
+    'exist',
+    file.provisioned_type
+  )
+}
+const onRemoveHardDisk = (
+  index: number,
+  hardDisk: UI_I_SendDataNewHardDisk
+): void => {
+  const removeIndex = hardDisksIndex.value.indexOf(index)
+
+  if (!hardDisk.create && !hardDisk.attach) {
+    hardDisksType.value = hardDisksType.value.map((item, key) => {
+      if (key === removeIndex) return 'removed'
+      return item
+    })
+    return
+  }
+
+  hardDisksIndex.value = hardDisksIndex.value.filter((item) => item !== index)
+  hardDisksType.value = hardDisksType.value.filter(
+    (_item, key) => key !== removeIndex
+  )
+
+  model.value.disk_devices = model.value.disk_devices.filter(
+    (_hardDisk, key: number) => {
+      return removeIndex !== key
+    }
+  )
+  hardDisksLocal.value = hardDisksLocal.value.filter(
+    (_hardDisk, key: number) => {
+      return removeIndex !== key
+    }
+  )
+
+  delete newHardDiskInvalidKeys.value[index]
+}
+const onRollBackHardDisk = (index: number): void => {
+  const removeIndex = hardDisksIndex.value.indexOf(index)
+  hardDisksType.value = hardDisksType.value.map((item, key) => {
+    if (key === removeIndex) return 'edit'
+    return item
+  })
+}
+
+const defaultNetwork = {
+  network: '',
+  net_bridge: '',
+  mac: '',
+  target: '',
+  model: '',
+  boot_order: -1,
+}
+const networksLocal = ref<UI_I_SendDataNewNetwork[]>([
+  useDeepCopy(defaultNetwork),
+])
+const networksType = ref<UI_T_NetworkType[]>(['new'])
+const networksIndex = ref<number[]>([0])
+watch(
+  () => props.networks,
+  (newValue) => {
+    if (!props.isEdit && !props.isClone) return
+    if (!newValue) {
+      networksLocal.value = []
+      networksType.value = []
+      networksIndex.value = []
+      return
+    }
+
+    // networksLocal.value = newValue
+    // networksType.value = Array(newValue.length).fill('edit')
+    const count = newValue?.length || 0
+    networksIndex.value = [...Array(count).keys()]
+    networksLocal.value = newValue
+    if (props.isEdit) {
+      networksType.value = Array(count).fill('edit')
+    } else if (props.isClone) {
+      networksType.value = Array(count).fill('clone')
+    }
+  },
+  { immediate: true }
+)
+const addNetwork = (): void => {
+  const index = (networksIndex.value.at(-1) ?? -1) + 1
+  networksIndex.value.push(index)
+  networksType.value.push('new')
+
+  model.value.network_devices.push({
+    ...useDeepCopy(defaultNetwork),
+    boot_order: 0, // Убираем галочку
+  })
+  networksLocal.value.push({
+    ...useDeepCopy(defaultNetwork),
+    boot_order: 0, // Убираем галочку
+  })
+}
+const onRemoveNetwork = (index: number): void => {
+  const removeIndex = networksIndex.value.indexOf(index)
+  networksIndex.value = networksIndex.value.filter((item) => item !== index)
+  networksType.value = networksType.value.filter(
+    (_item, key) => key !== removeIndex
+  )
+  model.value.network_devices = model.value.network_devices.filter(
+    (_network, key: number) => removeIndex !== key
+  )
+  networksLocal.value = networksLocal.value.filter(
+    (_network, key: number) => removeIndex !== key
+  )
+
+  delete newNetworkInvalidKeys.value[index]
+}
+
+const defaultCdDvdDriver: UI_I_SendDataNewCdDvdDrive = {
+  create: false,
+  attach: false,
+  source: '',
+  bus: '',
+  device_type: 'cdrom',
+  boot_order: -1,
+}
+const cdDvdDrivesLocal = ref<UI_I_SendDataNewCdDvdDrive[]>([
+  useDeepCopy(defaultCdDvdDriver),
+])
+const cdDvdDrivesIndex = ref<number[]>([0])
+const cdDvdDrivesType = ref<UI_T_CdDvdType[]>(['new'])
+watch(
+  () => props.cdDvdDrives,
+  (newValue) => {
+    if ((!props.isEdit && !props.isClone) || !newValue) return
+
+    // cdDvdDrivesLocal.value = newValue
+    // cdDvdDrivesType.value = Array(newValue.length).fill('edit')
+    const count = newValue?.length || 0
+    cdDvdDrivesIndex.value = [...Array(count).keys()]
+    cdDvdDrivesLocal.value = newValue
+    if (props.isEdit) {
+      cdDvdDrivesType.value = Array(count).fill('edit')
+    } else if (props.isClone) {
+      cdDvdDrivesType.value = Array(count).fill('new')
+    }
+  },
+  { immediate: true }
+)
+const addCdDvdDrive = (): void => {
+  const value = (cdDvdDrivesIndex.value.at(-1) ?? -1) + 1
+  cdDvdDrivesIndex.value.push(value)
+  cdDvdDrivesType.value.push('new')
+  model.value.disk_devices.push({
+    ...useDeepCopy(defaultCdDvdDriver),
+    attach: true,
+    boot_order: 0, // Убираем галочку
+  })
+  cdDvdDrivesLocal.value.push({
+    ...useDeepCopy(defaultCdDvdDriver),
+    attach: true,
+    boot_order: 0, // Убираем галочку
+  })
+}
+const onRemoveCdDvdDrive = (
+  index: number,
+  cdDvdDrive: UI_I_SendDataNewCdDvdDrive
+): void => {
+  const removeIndex = cdDvdDrivesIndex.value.indexOf(index)
+
+  // if (!cdDvdDrive.create && !cdDvdDrive.attach) {
+  if (cdDvdDrivesType.value[index] === 'edit' && !cdDvdDrive.attach) {
+    cdDvdDrivesType.value = cdDvdDrivesType.value.map((item, key) => {
+      if (key === removeIndex) return 'removed'
+      return item
+    })
+    return
+  }
+
+  cdDvdDrivesIndex.value = cdDvdDrivesIndex.value.filter(
+    (cdDvdDrive) => cdDvdDrive !== index
+  )
+  cdDvdDrivesType.value = cdDvdDrivesType.value.filter(
+    (_item, key) => key !== index
+  )
+  model.value.disk_devices = model.value.disk_devices.filter(
+    (_cdDvdDrive, key: number) => removeIndex !== key
+  )
+  cdDvdDrivesLocal.value = cdDvdDrivesLocal.value.filter(
+    (_cdDvdDrive, key: number) => removeIndex !== key
+  )
+}
+const onRollBackCdDvdDrive = (index: number): void => {
+  const removeIndex = cdDvdDrivesIndex.value.indexOf(index)
+  cdDvdDrivesType.value = cdDvdDrivesType.value.map((item, key) => {
+    if (key === removeIndex) return 'edit'
+    return item
+  })
+}
+
+const defaultPciDevice: UI_I_SendDataNewPciDevice = {
+  address: '',
+  vendor_name: '',
+  class_name: '',
+  device_name: '',
+}
+const pciDevicesIndex = ref<number[]>([0])
+const pciDevicesType = ref<('new' | 'edit' | 'removed')[]>(['new'])
+const pciDevicesLocal = ref<UI_I_SendDataNewPciDevice[]>([])
+watch(
+  () => props.pciDevices,
+  (newValue) => {
+    if ((!props.isEdit && !props.isClone) || !newValue) return
+
+    const count = newValue?.length || 0
+    pciDevicesIndex.value = [...Array(count).keys()]
+    pciDevicesLocal.value = newValue || []
+    if (props.isEdit) {
+      pciDevicesType.value = Array(count).fill('edit')
+    } else if (props.isClone) {
+      pciDevicesType.value = Array(count).fill('new')
+    }
+  },
+  { immediate: true }
+)
+
+const addPciDevice = (): void => {
+  const newIndex = (pciDevicesIndex.value.at(-1) ?? -1) + 1
+  pciDevicesIndex.value.push(newIndex)
+  pciDevicesType.value.push('new')
+
+  pciDevicesLocal.value.push(useDeepCopy(defaultPciDevice))
+  model.value.passthrough_pci_devices.push(useDeepCopy(defaultPciDevice))
+}
+const onRemovePciDevice = (index: number): void => {
+  const removeIndex = pciDevicesIndex.value.indexOf(index)
+  pciDevicesIndex.value = pciDevicesIndex.value.filter((item) => item !== index)
+  pciDevicesType.value = pciDevicesType.value.filter(
+    (_item, key) => key !== removeIndex
+  )
+
+  model.value.passthrough_pci_devices = model.value.passthrough_pci_devices.filter(
+    (_pciDevice, key: number) => {
+      return removeIndex !== key
+    }
+  )
+  pciDevicesLocal.value = pciDevicesLocal.value.filter(
+    (_pciDevice, key: number) => {
+      return removeIndex !== key
+    }
+  )
+
+  delete newPciDeviceInvalidKeys.value[index]
+}
+
+const isShowFileModal = ref<boolean>(false)
+const onAddDevice = (item: UI_I_DropdownTreeItemChild): void => {
+  switch (item.value) {
+    case 1:
+      addHardDisk()
+      break
+    case 2:
+      isShowFileModal.value = true
+      break
+    case 5:
+      addCdDvdDrive()
+      break
+    case 10:
+      addPciDevice()
+      break
+    case 14:
+      addNetwork()
+      break
+  }
+}
+
+const cpuInvalid = ref<boolean>(false)
+const onSendDataNewHardDiskMethod = (
+  data: UI_I_SendDataNewHardDisk,
+  index: number
+): void => {
+  model.value.disk_devices[index] = {
+    ...data,
+    boot_order: model.value.disk_devices[index]?.boot_order || 0,
+  }
+}
+const sendDataNewNetworkMethod = (
+  data: UI_I_SendDataNewNetwork,
+  index: number
+): void => {
+  model.value.network_devices[index] = {
+    ...data,
+    boot_order: model.value.network_devices[index]?.boot_order || 0,
+  }
+}
+const sendDataNewCdDvdDriveMethod = (
+  data: UI_I_SendDataNewCdDvdDrive,
+  index: number
+): void => {
+  const cdromIndexStart = model.value.disk_devices.findIndex(
+    (disk) => disk.device_type === 'cdrom'
+  )
+  model.value.disk_devices[cdromIndexStart + index] = {
+    ...data,
+    boot_order:
+      model.value.disk_devices[cdromIndexStart + index]?.boot_order || 0,
+  }
+}
+const onSendDataPciDevicesMethod = (
+  data: UI_I_SendDataNewPciDevice,
+  index: number
+): void => {
+  model.value.passthrough_pci_devices[index] = {
+    ...data,
+  }
+}
+
+const onSetInvalidHardDisk = (invalid: boolean, index: number): void => {
+  newHardDiskInvalidKeys.value[index] = invalid
+}
+
+const onSetInvalidNetwork = (invalid: boolean, key: number): void => {
+  newNetworkInvalidKeys.value[key] = invalid
+}
+
+const onSetInvalidPciDevice = (invalid: boolean, key: number): void => {
+  newPciDeviceInvalidKeys.value[key] = invalid
+}
+
+const memoryInvalid = ref<boolean>(false)
+const videoCardInvalid = ref<boolean>(false)
+const newHardDiskInvalidKeys = ref<UI_I_InvalidKeys>({})
+const newNetworkInvalidKeys = ref<UI_I_InvalidKeys>({})
+const newPciDeviceInvalidKeys = ref<UI_I_InvalidKeys>({})
+
+watch(
+  [
+    cpuInvalid,
+    memoryInvalid,
+    newHardDiskInvalidKeys,
+    newNetworkInvalidKeys,
+    newPciDeviceInvalidKeys,
+    videoCardInvalid,
+  ],
+  () => {
+    const cpu = cpuInvalid.value ? localization.value.common.cpu : ''
+    const memory = memoryInvalid.value ? localization.value.common.memory : ''
+    const videoCard = videoCardInvalid.value
+      ? localization.value.common.videoCard
+      : ''
+    let newHardDisk = ''
+    Object.keys(newHardDiskInvalidKeys.value).forEach((key) => {
+      if (!newHardDiskInvalidKeys.value[+key]) {
+        return
+      }
+
+      newHardDisk +=
+        (newHardDisk ? ', ' : '') +
+        localization.value.common.newHardDisk +
+        ' ' +
+        (+key + 1)
+    })
+    let newNetwork = ''
+    Object.keys(newNetworkInvalidKeys.value).forEach((key) => {
+      if (!newNetworkInvalidKeys.value[+key]) {
+        return
+      }
+
+      newNetwork +=
+        (newNetwork ? ', ' : '') +
+        localization.value.common.newNetwork +
+        ' ' +
+        (+key + 1)
+    })
+    // let pciDevice = ''
+    // Object.keys(newPciDeviceInvalidKeys.value).forEach((key) => {
+    //   if (!newPciDeviceInvalidKeys.value[+key]) {
+    //     return
+    //   }
+    //
+    //   pciDevice +=
+    //     (pciDevice ? ', ' : '') +
+    //     localization.value.common.pciDevice +
+    //     ' ' +
+    //     (+key + 1)
+    // })
+
+    emits('invalid', [cpu, memory, newHardDisk, newNetwork, videoCard])
+  },
+  { deep: true }
+)
+
+emits('get-pci-devices')
+</script>
+
+<style scoped lang="scss"></style>