<script lang="ts" setup>
import { computed, watch, reactive, ref, nextTick } from 'vue';
import { traduction } from '@/utils/language';
import { UploadFile } from 'element-plus/es/components/upload/src/upload';
import ErrorIcon from '@/components/ErrorIcon/ErrorIcon.vue';
import ClearableIcon from '@/components/ClearableIcon/ClearableIcon.vue';
import IpInput from '@/components/IpInput/IpInput.vue';
import MultiFileUpload from '@/components/FileUpload/multiFileUpload.vue';
import { deepEqual, showElMessage } from '@/utils/utils';
import {
  ipv4Rules,
  radioList,
  addressOriginList,
  getFormRules,
  calcValidRes,
  baseData,
} from './validator';
const SPECIALS_STR = '******';
const VALID_FILE_NAME = /^[0-9a-zA-Z ().&_-]*$/;
const emits = defineEmits(['btn-status', 'data-change']);
const props = defineProps({
  templateData: {
    type: Object,
    default: () => ({}),
  },
  taskStatus: {
    type: Boolean,
    default: () => false,
  },
  osType: {
    type: String,
    default: () => '',
  },
  isLastParams: {
    type: Boolean,
    default: () => false,
  },
});

function deepSet(obj1: string | object, key: string): void {
  let condition = typeof obj1[key] !== 'object';
  if (condition) {
    obj1[key] = true;
  }
  for (const k1 in obj1[key]) {
    if (Object.prototype.hasOwnProperty.call(obj1[key], k1)) {
      deepSet(obj1[key], k1);
    }
  }
}
const ruleFormRef = ref();
let oldData = JSON.parse(JSON.stringify(baseData));
let config = reactive(JSON.parse(JSON.stringify(baseData)));
let getPlaceholder = ref('');
function setPlaceHolder(key: string, p: any) {
  if (key === 'CDKey') {
    getPlaceholder.value = p[key] === SPECIALS_STR ? SPECIALS_STR : '';
    p[key] = '';
  }
}
watch(
  () => props.templateData,
  value => {
    let params = value;
    if (JSON.stringify(value) === '{}') {
      params = baseData.data;
    }
    for (let key in params) {
      if (Object.prototype.hasOwnProperty.call(config.data, key)) {
        setPlaceHolder(key, params);
        config.data[key] = params[key];
      }
    }
    if (props.isLastParams) {
      oldData = JSON.parse(JSON.stringify(config));
    }
    ruleFormRef.value?.validate((res: boolean)=> {
      if (res) {
        for (const k1 in validateResult) {
          if (Object.prototype.hasOwnProperty.call(validateResult, k1)) {
            deepSet(validateResult, k1);
          }
        }
      }
    });
    nextTick(() => {
      ipAddressV4RefObj.value?.validate();
      maskCodeV4RefObj.value?.validate();
      gatewayV4RefObj.value?.validate();
    });
  },
);
watch(
  () => props.osType,
  val => {
    if (val) {
      ruleFormRef.value.validateField('Partition.Size');
      validateResult.PartitionSize = formRules.PartitionSize.validator(
        formRules.PartitionSize,
        config.data.Partition.Size,
        () => {},
      );
    }
  },
);
// ip输入框的ref对象
const ipAddressV4RefObj = ref();
const maskCodeV4RefObj = ref();
const gatewayV4RefObj = ref();
function setEmitData(data: any) {
  let tmpData = JSON.parse(JSON.stringify(data));
  tmpData.BootType = tmpData.BootType ? 'UEFIBoot' : '';
  tmpData.PackageName = tmpData.PackageName ? tmpData.PackageName.split(',') : []; 
  tmpData.PatternName = tmpData.PatternName ? tmpData.PatternName.split(',') : [];
  tmpData.RemovePackageName = tmpData.RemovePackageName ? tmpData.RemovePackageName.split(',') : [];
  tmpData.RemovePatternName = tmpData.RemovePatternName ? tmpData.RemovePatternName.split(',') : [];
  let time = tmpData.UploadFiles.TimeoutSeconds;
  tmpData.UploadFiles.TimeoutSeconds = time !== '' ? Number(time) : '';
  tmpData.UploadFiles.DriverList = tmpData.UploadFiles.DriverList.map(
    (v: { name: string }) => v.name,
  );
  tmpData.UploadFiles.FirmwareList = tmpData.UploadFiles.FirmwareList.map(
    (v: { name: string }) => v.name,
  );
  tmpData.UploadFiles.AnswerFile = tmpData.UploadFiles.AnswerFile?.length
    ? tmpData.UploadFiles.AnswerFile.map((v: { name: string }) => v.name)[0]
    : '';
  tmpData.NetCfg = [
    {
      IPv4Addresses: [tmpData.IPv4Addresses],
      IPv6Addresses: [tmpData.IPv6Addresses],
      NameServers: tmpData.DNS ? [{
        DNS: tmpData.DNS,
      }] : [],
    },
  ];
  tmpData.Partition = [tmpData.Partition];
  tmpData.Packages = [
    {
      EnvironmentName: tmpData.EnvironmentName,
      PackageName: tmpData.PackageName,
      PatternName: tmpData.PatternName,
      CustomizedEnabled: tmpData.CustomizedEnabled,
      RemovePackageName: tmpData.RemovePackageName,
      RemovePatternName: tmpData.RemovePatternName,
    },
  ];
  delete tmpData.PackageName;
  delete tmpData.PatternName;
  delete tmpData.RemovePackageName;
  delete tmpData.RemovePatternName;
  delete tmpData.IPv4Addresses;
  delete tmpData.IPv6Addresses;
  delete tmpData.DNS;
  delete tmpData.CustomizedEnabled;
  delete tmpData.TimeoutSeconds;
  delete tmpData.EnvironmentName;
  return tmpData;
}
const btnStatus = computed(() => {
  let newData = JSON.parse(JSON.stringify(config.data));
  for (let key in newData.UploadFiles) {
    if (Array.isArray(newData.UploadFiles[key])) {
      newData.UploadFiles[key] = newData.UploadFiles[key].map((v: { name: string }) => ({
        name: v.name,
      }));
    }
  }
  let status = deepEqual(newData, oldData.data); // true 值未变更
  let validRes = calcValidRes(validateResult); // true 值都合法
  emits('btn-status', {
    status,
    validRes,
  });
  const data = setEmitData(config.data);
  emits('data-change', data);
  return !(!status && validRes);
});
const OSType = computed(() => {
  return props.osType;
});
const formRules = reactive(getFormRules(config.data, OSType));
// 表单校验结果
let validateResult = reactive({
  PartitionFileSystem: true,
  PartitionSize: true,
  IPv4Addresses: {},
  IPv6Addresses: {},
});
const popoverVisible = reactive({
  CDKey: false,
  HostName: false,
  PartitionName: false,
  PartitionFileSystem: false,
  PartitionSize: false,
  DNS: false,
  PackageName: false,
  PatternName: false,
  RemovePackageName: false,
  RemovePatternName: false,
  TimeoutSeconds: false,
  EnvironmentName: false,
});

// ipv4输入框记录校验结果
function ipv4Validate(key: string, value: boolean) {
  validateResult.IPv4Addresses[key] = value;
}
function focus(key: string) {
  popoverVisible[key] = true;
}

function blur(key: string) {
  popoverVisible[key] = false;
}

// 输入框 发生input 事件
function input(key: string, value: string) {
  // 分区Name与FileSystem关联校验
  if (['PartitionName', 'PartitionFileSystem', 'PartitionSize'].includes(key)) {
    let PartitionKey = key.split('Partition')[1];
    if (key === 'PartitionName') {
      validateResult.PartitionFileSystem = formRules.PartitionFileSystem.validator(
        formRules.PartitionFileSystem,
        config.data.Partition.FileSystem,
        () => {},
      );
      validateResult.PartitionSize = formRules.PartitionSize.validator(
        formRules.PartitionSize,
        config.data.Partition.Size,
        () => {},
      );
      ruleFormRef.value.validateField('Partition.FileSystem');
      ruleFormRef.value.validateField('Partition.Size');
    } else if (key === 'PartitionFileSystem') {
      validateResult.PartitionSize = formRules.PartitionSize.validator(
        formRules.PartitionSize,
        config.data.Partition.Size,
        () => {},
      );
      ruleFormRef.value.validateField('Partition.Size');
    }
    config.data.Partition[PartitionKey] = value;
    validateResult[key] = formRules[key].validator(
      formRules[key],
      config.data.Partition[PartitionKey],
      () => {},
    );
  } else {
    if (['TimeoutSeconds'].includes(key)) {
      validateResult[key] = formRules[key].validator(
        formRules[key],
        config.data.UploadFiles[key],
        () => {},
      );
      return;
    }
    config.data[key] = value;
    validateResult[key] = formRules[key].validator(formRules[key], config.data[key], () => {});
  }
}
function passiveValidate(refObj1: any, refObj2: any) {
  // 使另外两个输入框被动校验
  refObj1.value.validate();
  refObj2.value.validate();
}
function ipv4Input(key: string, value: string) {
  config.data.IPv4Addresses[key] = value;
  // 获取校验结果，用于设置保存按钮的状态
  validateResult.IPv4Addresses[key] = ipv4Rules(config.data.IPv4Addresses)[key].validator(
    null,
    value,
    () => {},
  );
  switch (key) {
    case 'Address': {
      passiveValidate(maskCodeV4RefObj, gatewayV4RefObj);
      break;
    }
    case 'SubnetMask': {
      passiveValidate(ipAddressV4RefObj, gatewayV4RefObj);
      break;
    }
    case 'Gateway': {
      passiveValidate(ipAddressV4RefObj, maskCodeV4RefObj);
      break;
    }
    default: {
      break;
    }
  }
}
function ipv6Input(key: string, value: string) {
  config.data.IPv6Addresses[key] = value;
  validateResult.IPv6Addresses[key] = formRules[key].validator(
    formRules[key],
    config.data.IPv6Addresses[key],
    () => {},
  );
}
const disabled = computed(() => {
  return props.taskStatus;
});
const baseConfig = {
  action: '',
  headers: {},
  id: 'fileUpload',
  method: 'POST',
  name: 'Content',
  isAutoUpload: true,
  accept: '.zip,.iso,.asc,.cms,.crl',
  multiple: true,
  limit: 20,
  onHttpRequest: (file: any) => {
    file.onSuccess();
  },
};
const driverConfig = reactive({
  ...baseConfig,
  tip: traduction('IBMA_SP_DRIVER_LIST_TIP'),
  onAddItem: (file: UploadFile, list: UploadFile[]): boolean => {
    const subfix = file.name.split('.').reverse()[0];
    const name = file.name.replace(`.${subfix}`, '');
    let mulFile = list.filter((v: {name: string}) => v.name === file.name);
    if (mulFile.length > 1) {
      let idx = list.lastIndexOf((x: { name: string }) => x.name === file.name);
      list.splice(idx, 1);
      showElMessage('error', traduction('ASSET_REPEAT'));
      return false;
    }
    if (baseConfig.accept.indexOf(subfix) < 0 || !VALID_FILE_NAME.test(name)) {
      let idx = list.findIndex((x: { name: string }) => x.name === file.name);
      list.splice(idx, 1);
      showElMessage('error', traduction('IBMA_SP_DRIVER_LIST_TIP'));
      return false;
    }
    config.data.UploadFiles.DriverList = list;
    return true;
  },
  onRemove(file, list) {
    config.data.UploadFiles.DriverList = list;
  },
});
const firmwareConfig = reactive({
  ...baseConfig,
  id: 'firmwareConfig',
  tip: traduction('IBMA_SP_FIRMWARE_LIST_TIP'),
  onAddItem: (file: UploadFile, list: UploadFile[]): boolean => {
    const subfix = file.name.split('.').reverse()[0];
    const name = file.name.replace(`.${subfix}`, '');
    let mulFile = list.filter((v: {name: string}) => v.name === file.name);
    if (mulFile.length > 1) {
      let idx = list.lastIndexOf((v: { name: string }) => v.name === file.name);
      list.splice(idx, 1);
      showElMessage('error', traduction('ASSET_REPEAT'));
      return false;
    }
    if (baseConfig.accept.indexOf(subfix) < 0 || !VALID_FILE_NAME.test(name)) {
      let idx = list.findIndex((x: { name: string }) => x.name === file.name);
      list.splice(idx, 1);
      showElMessage('error', traduction('IBMA_SP_DRIVER_LIST_TIP'));
      return false;
    }
    config.data.UploadFiles.FirmwareList = list;
    return true;
  },
  onRemove(file, list) {
    config.data.UploadFiles.FirmwareList = list;
  },
});
const answerConfig = reactive({
  ...baseConfig,
  id: 'answerConfig',
  tip: traduction('IBMA_SP_ANSWER_FILE_TIP'),
  accept: '.xml,.cfg',
  multiple: false,
  limit: 1,
  onAddItem: (file: UploadFile, list: UploadFile[]): boolean => {
    const subfix = file.name.split('.').reverse()[0];
    const name = file.name.replace(`.${subfix}`, '');
    msg.value = '';
    if ('.xml,.cfg'.indexOf(subfix) < 0) {
      msg.value = traduction('IBMA_SP_ANSWER_FILE_TIP');
      return false;
    }
    if (!VALID_FILE_NAME.test(name)) {
      msg.value = traduction('IBMA_SP_ANSWER_FILE_TIP');
      return false;
    }
    config.data.UploadFiles.AnswerFile = [{ name: file.name }];
    return true;
  },
  onRemove: () => {
    config.data.UploadFiles.AnswerFile = [];
  },
  onExceed: () => {},
});
</script>
<template>
  <el-form
    ref="ruleFormRef"
    :model="config.data"
    :rules="formRules"
    label-position="left"
    label-width="auto"
    :validate-on-rule-change="false"
  >
    <el-form-item :label="$t('SP_BIOS_BOOT_PATTERNS')">
      <el-checkbox
        v-model="config.data.BootType"
        v-addId.checkbox="'bootBootType'"
        :disabled="disabled"
        :label="$t('SP_BIOS_BOOT_UEFIBOOT')"
        size="large"
      ></el-checkbox>
    </el-form-item>
    <el-form-item :label="$t('SP_OS_SECRET_KEY')">
      <el-input
        v-model="config.data.CDKey"
        v-addId.input="'spOsSecretKey'"
        v-clearable
        clearable
        :disabled="disabled"
        type="password"
        class="input-class"
        autocomplete="new-password"
        :placeholder="getPlaceholder || $t('COMMON_INPUT_TEXT')"
        @focus="focus('CDKey')"
        @blur="blur('CDKey')"
        @input="input('CDKey', $event)"
      >
        <template #suffix>
          <ErrorIcon />
          <ClearableIcon />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item :label="$t('SP_GRUB_PASSWORD')" for="''">
      <el-switch
        id="Grub2PwdExist"
        v-model="config.data.Grub2PwdExist"
        :disabled="disabled"
      ></el-switch>
    </el-form-item>
    <el-form-item :label="$t('SP_HOST_NAME')" prop="HostName">
      <el-popover
        v-model:visible="popoverVisible.HostName"
        popper-class="wrap-popper"
        placement="right"
        :content="$t('SP_HOST_NAME_TIP')"
        trigger="focus"
      >
        <template #reference>
          <el-input
            v-model="config.data.HostName"
            v-addId.input="'HostName'"
            v-clearable
            clearable
            :disabled="disabled"
            type="text"
            class="input-class"
            :placeholder="$t('COMMON_INPUT_TEXT')"
            @focus="focus('HostName')"
            @blur="blur('HostName')"
            @input="input('HostName', $event)"
          >
            <template #suffix>
              <ErrorIcon />
              <ClearableIcon />
            </template>
          </el-input>
        </template>
      </el-popover>
    </el-form-item>
    <el-form-item :label="$t('SP_SYSTEM_MEDIA_TYPE')">
      <el-radio-group v-model="config.data.MediaType">
        <el-radio
          v-for="option in radioList"
          :id="option.id"
          :key="option.id"
          :disabled="disabled"
          :label="option.id"
        >
          {{ option.label }}
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <div class="config-item">
      <div class="block-title">{{ $t('SP_PARTITION_INFO') }}</div>
      <div class="block-cover">
        <div class="block-item">
          <el-form-item
            :label="$t('COMMON_NAME')"
            prop="Partition.Name"
            :rules="formRules.PartitionName"
            label-width="176px"
          >
            <el-popover
              v-model:visible="popoverVisible.PartitionName"
              popper-class="wrap-popper"
              placement="right"
              :content="$t('SP_PARTITION_NAME_TIP')"
              trigger="focus"
            >
              <template #reference>
                <el-input
                  v-model="config.data.Partition.Name"
                  v-addId.input="'PartitionName'"
                  v-clearable
                  clearable
                  type="text"
                  class="input-class"
                  :disabled="disabled"
                  :placeholder="$t('COMMON_INPUT_TEXT')"
                  @focus="focus('PartitionName')"
                  @blur="blur('PartitionName')"
                  @input="input('PartitionName', $event)"
                >
                  <template #suffix>
                    <ErrorIcon />
                    <ClearableIcon />
                  </template>
                </el-input>
              </template>
            </el-popover>
          </el-form-item>
        </div>
        <div class="block-item">
          <el-form-item
            :label="$t('SP_PARTITION_FILESYSTEM')"
            :rules="formRules.PartitionFileSystem"
            prop="Partition.FileSystem"
            label-width="176px"
          >
            <el-popover
              v-model:visible="popoverVisible.PartitionFileSystem"
              popper-class="wrap-popper"
              placement="right"
              :content="$t('SP_PARTITION_FILESYSTEM_TIP')"
              trigger="focus"
            >
              <template #reference>
                <el-input
                  v-model="config.data.Partition.FileSystem"
                  v-addId.input="'PartitionFileSystem'"
                  v-clearable
                  clearable
                  :disabled="disabled"
                  type="text"
                  class="input-class"
                  :placeholder="$t('COMMON_INPUT_TEXT')"
                  @focus="focus('PartitionFileSystem')"
                  @blur="blur('PartitionFileSystem')"
                  @input="input('PartitionFileSystem', $event)"
                >
                  <template #suffix>
                    <ErrorIcon />
                    <ClearableIcon />
                  </template>
                </el-input>
              </template>
            </el-popover>
          </el-form-item>
        </div>
        <div class="block-item">
          <el-form-item
            :label="$t('SP_PARTITION_SIZE')"
            :rules="formRules.PartitionSize"
            prop="Partition.Size"
            label-width="176px"
          >
            <el-popover
              v-model:visible="popoverVisible.PartitionSize"
              popper-class="wrap-popper"
              placement="right"
              :content="$t('SP_PARTITION_SIZE_TIP')"
              trigger="focus"
            >
              <template #reference>
                <el-input
                  v-model="config.data.Partition.Size"
                  v-addId.input="'PartitionSize'"
                  v-clearable
                  clearable
                  :disabled="disabled"
                  type="text"
                  class="input-class"
                  :placeholder="$t('COMMON_INPUT_TEXT')"
                  @focus="focus('PartitionSize')"
                  @blur="blur('PartitionSize')"
                  @input="input('PartitionSize', $event)"
                >
                  <template #suffix>
                    <ErrorIcon />
                    <ClearableIcon />
                  </template>
                </el-input>
              </template>
            </el-popover>
          </el-form-item>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="block-right">
        <el-form-item :label="$t('SP_CHECK_COMPATIBILITY')" for="''">
          <el-switch
            id="CheckCompatibility"
            v-model="config.data.CheckCompatibility"
            :disabled="disabled"
          ></el-switch>
        </el-form-item>
      </div>
      <el-form-item :label="$t('SP_CHECK_CHECKMEDIA')" for="''">
        <el-switch
          id="CheckMedia"
          v-model="config.data.CheckMedia"
          :disabled="disabled"
        ></el-switch>
      </el-form-item>
    </div>
    <div class="config-item">
      <div class="block-title">{{ $t('SP_IPV4_NETWORK_PORT') }}</div>
      <div class="block-cover">
        <div class="block-item">
          <!-- IP地址 -->
          <el-form-item :label="$t('IBMC_IPV4_ADDRESS')" label-width="176px">
            <IpInput
              ref="ipAddressV4RefObj"
              :id-str="'ipV4'"
              :disabled="disabled"
              :rule="ipv4Rules(config.data.IPv4Addresses).Address"
              :input-style="{ width: '240px' }"
              :value="config.data.IPv4Addresses.Address"
              @input="ipv4Input('Address', $event)"
              @validate="ipv4Validate('Address', $event)"
            />
          </el-form-item>
          <el-form-item :label="$t('SP_ADDRESS_ACQUISITION_MODE')" label-width="176px">
            <el-radio-group v-model="config.data.IPv4Addresses.AddressOrigin">
              <el-radio
                v-for="option in addressOriginList"
                :id="option.id"
                :key="option.id"
                :label="option.id"
                :disabled="disabled"
              >
                {{ option.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="block-item">
          <!-- 子网掩码 -->
          <el-form-item :label="$t('SP_SUBNET_MASK')" label-width="176px">
            <IpInput
              ref="maskCodeV4RefObj"
              :id-str="'ipMaskCode'"
              :rule="ipv4Rules(config.data.IPv4Addresses).SubnetMask"
              :input-style="{ width: '240px' }"
              :value="config.data.IPv4Addresses.SubnetMask"
              :disabled="disabled"
              @input="ipv4Input('SubnetMask', $event)"
              @validate="ipv4Validate('SubnetMask', $event)"
            />
          </el-form-item>
          <!-- 网关地址 -->
          <el-form-item :label="$t('SP_GATEWAY')" label-width="176px">
            <IpInput
              ref="gatewayV4RefObj"
              :id-str="'ipGateway'"
              :rule="ipv4Rules(config.data.IPv4Addresses).Gateway"
              :input-style="{ width: '240px' }"
              :value="config.data.IPv4Addresses.Gateway"
              :disabled="disabled"
              @input="ipv4Input('Gateway', $event)"
              @validate="ipv4Validate('Gateway', $event)"
            />
          </el-form-item>
        </div>
      </div>
    </div>
    <div class="config-item">
      <div class="block-title">{{ $t('SP_IPV6_NETWORK_PORT') }}</div>
      <div class="block-cover">
        <div class="block-item">
          <el-form-item
            :label="$t('SP_IPV6_ADDRESS')"
            prop="IPv6Addresses.Address"
            :rules="formRules.Address"
            label-width="176px"
          >
            <el-input
              v-model="config.data.IPv6Addresses.Address"
              v-addId.input="'ipAddressIdV6'"
              v-clearable
              clearable
              :disabled="disabled"
              class="input-class"
              @input="ipv6Input('Address', $event)"
            >
              <template #suffix>
                <ErrorIcon />
                <ClearableIcon />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('SP_ADDRESS_ACQUISITION_MODE')" label-width="176px">
            <el-radio-group v-model="config.data.IPv6Addresses.AddressOrigin">
              <el-radio
                v-for="option in addressOriginList"
                :id="option.id"
                :key="option.id"
                :label="option.id"
                :disabled="disabled"
              >
                {{ option.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="block-item">
          <!-- 前缀长度 -->
          <el-form-item
            prop="IPv6Addresses.PrefixLength"
            :rules="formRules.PrefixLength"
            :label="$t('SP_IPV6_PREFIXLENGTH')"
            label-width="176px"
          >
            <el-input
              v-model="config.data.IPv6Addresses.PrefixLength"
              v-addId.input="'maskCodeIdV6'"
              v-clearable
              clearable
              :disabled="disabled"
              class="input-class"
              type="number"
              @input="ipv6Input('PrefixLength', $event)"
            >
              <template #suffix>
                <ErrorIcon />
                <ClearableIcon />
              </template>
            </el-input>
          </el-form-item>
          <!-- IPv6网关 -->
          <el-form-item
            prop="IPv6Addresses.Gateway"
            :rules="formRules.Gateway"
            :label="$t('SP_GATEWAY')"
            label-width="176px"
          >
            <el-input
              v-model="config.data.IPv6Addresses.Gateway"
              v-addId.input="'gatewayIdV6'"
              v-clearable
              clearable
              :disabled="disabled"
              class="input-class"
              @input="ipv6Input('Gateway', $event)"
            >
              <template #suffix>
                <ErrorIcon />
                <ClearableIcon />
              </template>
            </el-input>
          </el-form-item>
        </div>
      </div>
    </div>
    <el-form-item :label="$t('IBMA_SP_DNS_ADDRESS')" prop="DNS">
      <el-popover
        v-model:visible="popoverVisible.DNS"
        popper-class="wrap-popper"
        placement="right"
        :content="$t('IBMA_SP_DNS_ADDRESS_TIP')"
        trigger="focus"
      >
        <template #reference>
          <el-input
            v-model="config.data.DNS"
            v-addId.input="'DNS'"
            v-clearable
            clearable
            :disabled="disabled"
            type="text"
            class="input-class"
            :placeholder="$t('COMMON_INPUT_TEXT')"
            @focus="focus('DNS')"
            @blur="blur('DNS')"
            @input="input('DNS', $event)"
          >
            <template #suffix>
              <ErrorIcon />
              <ClearableIcon />
            </template>
          </el-input>
        </template>
      </el-popover>
    </el-form-item>
    <div class="block-cover no-border">
      <div class="block-item">
        <el-form-item :label="$t('IBMA_SP_PKG_NAME')" prop="PackageName">
          <el-popover
            v-model:visible="popoverVisible.PackageName"
            popper-class="wrap-popper"
            placement="right"
            :content="$t('SP_NAME_TIP')"
            trigger="focus"
          >
            <template #reference>
              <el-input
                v-model="config.data.PackageName"
                v-addId.input="'PackageName'"
                v-clearable
                clearable
                :disabled="disabled"
                type="text"
                class="input-class"
                :placeholder="$t('COMMON_INPUT_TEXT')"
                @focus="focus('PackageName')"
                @blur="blur('PackageName')"
                @input="input('PackageName', $event)"
              >
                <template #suffix>
                  <ErrorIcon />
                  <ClearableIcon />
                </template>
              </el-input>
            </template>
          </el-popover>
        </el-form-item>
      </div>
      <div class="block-item">
        <el-form-item :label="$t('IBMA_SP_GROUP_NAME')" prop="PatternName">
          <el-popover
            v-model:visible="popoverVisible.PatternName"
            popper-class="wrap-popper"
            placement="right"
            :content="$t('SP_NAME_TIP')"
            trigger="focus"
          >
            <template #reference>
              <el-input
                v-model="config.data.PatternName"
                v-addId.input="'PatternName'"
                v-clearable
                clearable
                :disabled="disabled"
                type="text"
                class="input-class"
                :placeholder="$t('COMMON_INPUT_TEXT')"
                @focus="focus('PatternName')"
                @blur="blur('PatternName')"
                @input="input('PatternName', $event)"
              >
                <template #suffix>
                  <ErrorIcon />
                  <ClearableIcon />
                </template>
              </el-input>
            </template>
          </el-popover>
        </el-form-item>
      </div>
    </div>
    <el-form-item :label="$t('IBMA_SP_CUSTOM_SOFTWARE_PKG')" for="''">
      <el-switch
        id="CustomizedEnabled"
        v-model="config.data.CustomizedEnabled"
        :disabled="disabled"
      ></el-switch>
    </el-form-item>
    <div class="block-cover no-border">
      <div class="block-item">
        <el-form-item :label="$t('IBMA_SP_INSTALL_SOFTWARE_PKG')" prop="RemovePackageName">
          <el-popover
            v-model:visible="popoverVisible.RemovePackageName"
            popper-class="wrap-popper"
            placement="right"
            :content="$t('SP_NAME_TIP')"
            trigger="focus"
          >
            <template #reference>
              <el-input
                v-model="config.data.RemovePackageName"
                v-addId.input="'RemovePackageName'"
                v-clearable
                clearable
                :disabled="disabled"
                type="text"
                class="input-class"
                :placeholder="$t('COMMON_INPUT_TEXT')"
                @focus="focus('RemovePackageName')"
                @blur="blur('RemovePackageName')"
                @input="input('RemovePackageName', $event)"
              >
                <template #suffix>
                  <ErrorIcon />
                  <ClearableIcon />
                </template>
              </el-input>
            </template>
          </el-popover>
        </el-form-item>
      </div>
      <div class="block-item">
        <el-form-item :label="$t('IBMA_SP_INSTALL_COMPONENT_PKG')" prop="RemovePatternName">
          <el-popover
            v-model:visible="popoverVisible.RemovePatternName"
            popper-class="wrap-popper"
            placement="right"
            :content="$t('SP_NAME_TIP')"
            trigger="focus"
          >
            <template #reference>
              <el-input
                v-model="config.data.RemovePatternName"
                v-addId.input="'RemovePatternName'"
                v-clearable
                clearable
                :disabled="disabled"
                type="text"
                class="input-class"
                :placeholder="$t('COMMON_INPUT_TEXT')"
                @focus="focus('RemovePatternName')"
                @blur="blur('RemovePatternName')"
                @input="input('RemovePatternName', $event)"
              >
                <template #suffix>
                  <ErrorIcon />
                  <ClearableIcon />
                </template>
              </el-input>
            </template>
          </el-popover>
        </el-form-item>
      </div>
    </div>
    <el-form-item :label="$t('SP_TASK_ENV_NAME')" prop="EnvironmentName">
      <el-popover
        v-model:visible="popoverVisible.EnvironmentName"
        popper-class="wrap-popper"
        placement="right"
        :content="$t('ENV_NAME_TIP')"
        trigger="focus"
      >
        <template #reference>
          <el-input
            v-model="config.data.EnvironmentName"
            v-addId.input="'EnvironmentName'"
            v-clearable
            clearable
            :disabled="disabled"
            type="text"
            class="input-class"
            :placeholder="$t('COMMON_INPUT_TEXT')"
            @focus="focus('EnvironmentName')"
            @blur="blur('EnvironmentName')"
            @input="input('EnvironmentName', $event)"
          >
            <template #suffix>
              <ErrorIcon />
              <ClearableIcon />
            </template>
          </el-input>
        </template>
      </el-popover>
    </el-form-item>
    <el-form-item :label="$t('IBMA_SP_FIRST_BOOT_SCRIPT')" for="''">
      <el-switch
        id="FirstBootScript"
        v-model="config.data.FirstBootScript"
        :disabled="disabled"
      ></el-switch>
    </el-form-item>
    
    <el-form-item :label="$t('IBMA_SP_DRIVER_LIST')" class="upload">
      <MultiFileUpload
        :disabled="disabled"
        :data="driverConfig"
        :file-list="config.data.UploadFiles.DriverList"
      ></MultiFileUpload>
    </el-form-item>
    <el-form-item :label="$t('IBMA_SP_FIRMWARE_LIST')" class="upload">
      <MultiFileUpload
        :disabled="disabled"
        :data="firmwareConfig"
        :file-list="config.data.UploadFiles.FirmwareList"
      ></MultiFileUpload>
    </el-form-item>
    <el-form-item :label="$t('IBMA_SP_ANSWER_FILE')" class="upload">
      <MultiFileUpload
        :disabled="disabled"
        :data="answerConfig"
        :file-list="config.data.UploadFiles.AnswerFile"
      ></MultiFileUpload>
    </el-form-item>
    <el-form-item
      :label="$t('IBMA_SP_TIMEOUT')"
      :rules="formRules.TimeoutSeconds"
      prop="UploadFiles.TimeoutSeconds"
    >
      <el-popover
        v-model:visible="popoverVisible.TimeoutSeconds"
        popper-class="wrap-popper"
        placement="right"
        :content="$t('IBMA_SP_TIMEOUT_TIP')"
        trigger="focus"
      >
        <template #reference>
          <el-input
            v-model="config.data.UploadFiles.TimeoutSeconds"
            v-addId.input="'TimeoutSeconds'"
            v-clearable
            clearable
            :disabled="disabled"
            type="text"
            class="input-class timeout"
            :placeholder="$t('COMMON_INPUT_TEXT')"
            @focus="focus('TimeoutSeconds')"
            @blur="blur('TimeoutSeconds')"
            @input="input('TimeoutSeconds', $event)"
          >
            <template #suffix>
              <ErrorIcon />
              <ClearableIcon />
            </template>
          </el-input>
        </template>
      </el-popover>
      {{ $t('COMMON_SECONDS') }}
    </el-form-item>
  </el-form>
  <span class="hidden">{{ btnStatus }}</span>
</template>
<style lang="scss" scoped>
.config-item {
  margin-bottom: 24px;
}
:deep(.el-form-item__label-wrap) {
  align-items: center;
}

.upload {
  align-items: flex-start;
  :deep(.el-upload-list) {
    display: flex;
  }
  :deep(.el-upload-list__item) {
    margin-bottom: 5px !important;
    .el-upload-list__item-file-name {
      color: #4e5865;
    }

    margin-top: 8px;
    &:hover {
      .el-upload-list__item-file-name {
        color: #3291fe;
      }

      border-radius: 2px;
      background: #fdfeff;
    }
  }
}

.input-class {
  width: 240px;
  &.timeout {
    width: 91px;
    margin-right: 8px;
  }
}
.block-title {
  margin-bottom: 16px;
  font-weight: 500;
  color: var(--o-text-color-primary);
}
.block-cover {
  border-radius: 4px;
  border: 1px solid #c3cedf;
  padding: 32px 16px 16px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
  &.no-border {
    border: none;
    padding: 0;
  }
}
.block {
  display: flex;
  align-items: baseline;
  margin-bottom: 16px;
}
.block-right {
  margin-right: 260px;
}
.block-item {
  margin-bottom: 22px;
  margin-right: 32px;
}
.block-item:nth-of-type(odd) {
  padding-right: 16px;
}
.hidden {
  opacity: 0;
}
</style>
