<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from 'vue';
import useStore from '@/stores';
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { UserPrivil } from '@/model/base-enum';
import { getErrorTranslate, traduction } from '@/utils/language';
import { getKvmData, setKvmService } from './services/kvm.services';
import { PopoverState, KVMData } from '@/model/Service/KVM-interface';
import { BaseValidators } from '@/validators/base-validators';
import {
  uskeyboardTable,
  JS_KEY_A,
  JS_KEY_Z,
  JS_KEY_0,
  JS_KEY_9,
  JS_KEY_SEMI,
  JS_KEY_QUOTO,
  JS_KEY_BR1,
  JS_KEY_QUOT,
  JS_KEY_FF_SEMI,
  JS_KEY_FF_PLUS,
  JS_KEY_FF_MIN,
  JS_KEY_0P,
  JS_KEY_DIVP,
  JS_KEY_OR_1,
} from './utils/keysCode';
import {
  replaceKeys,
  compareKvmConfig,
  defaultPort1,
  defaultPort2,
  lockTypeCustom,
  lockTypeWindow,
} from './utils/kvmHelpers';
import { showFailedMessage, showSuccessMessage } from '@/utils/composition';
import { useRouter } from 'vue-router';
import { loading } from '@/utils/composition';
import ErrorIcon from '@/components/ErrorIcon/ErrorIcon.vue';
import ClearableIcon from '@/components/ClearableIcon/ClearableIcon.vue';
import { getMessageId, deepClone } from '@/utils/utils';

const store = useStore();
const router = useRouter();

// 系统锁定状态
const isSystemLock = computed(() => {
  return store.state.glob.systemLocked;
});

const isConfigureUser = checkPrivil(UserPrivil.userConfig);
const isOemSecurityMgmtUser = checkPrivil(UserPrivil.securityConfig);
const isOemKvmUser = checkPrivil(UserPrivil.remoteControl);

// 常规配置权限
const isBaseConfig = checkPrivil(UserPrivil.baseConfig);

const kvmData: KVMData = reactive({
  autoCloseLocalDisplay: false,
  encryptionConfigurable: false,
  encryptionEnabled: false,
  graphicalConsole: [
    {
      systemId: 1,
      port: null,
      enabled: null,
      activatedSessionsType: null,
      persistentUSBConnectionEnabled: null,
      autoOSLockEnabled: null,
      autoOSLockType: null,
      autoOSLockKey: [''],
      disableKeyboardDuringBiosStartup: null,
      maximumNumberOfSessions: null,
      numberOfActiveSessions: null,
    },
  ],
  localKvmEnabled: false,
  sessionTimeoutMinutes: null,
  visibleJavaKvm: false,
});

const formRef = ref();
let queryParams: object = {};

// 保存初始值
let oldKvmData: any;

// 保存按钮禁用
let saveBtnState = ref(false);
const encryptionShow = ref(false);

// 控制是否显示tips
const popoverVisible = reactive<PopoverState>({});

function init(data: any) {
  kvmData.autoCloseLocalDisplay = data.AutoCloseLocalDisplay;
  kvmData.encryptionConfigurable = data.EncryptionConfigurable;
  kvmData.encryptionEnabled = data.EncryptionEnabled;
  kvmData.graphicalConsole = data.GraphicalConsole?.map((item: any) => {
    return {
      systemId: item.SystemId || 1,
      port: item.Port || '',
      enabled: item.Enabled,
      activatedSessionsType: item.ActivatedSessionsType || null,
      persistentUSBConnectionEnabled: item.PersistentUSBConnectionEnabled,
      autoOSLockEnabled: item.AutoOSLockEnabled,
      autoOSLockType: item.AutoOSLockType || lockTypeCustom,
      autoOSLockKey: item.AutoOSLockKey || [],
      disableKeyboardDuringBiosStartup: item.DisableKeyboardDuringBiosStartup,
      maximumNumberOfSessions: item.MaximumNumberOfSessions,
      numberOfActiveSessions: item.NumberOfActiveSessions,
    };
  });
  kvmData.localKvmEnabled = data.LocalKvmEnabled;
  kvmData.sessionTimeoutMinutes = data.SessionTimeoutMinutes;
  kvmData.visibleJavaKvm = data.VisibleJavaKvm;

  if (kvmData.encryptionConfigurable === true) {
    encryptionShow.value = true;
  } else {
    encryptionShow.value = false;
  }

  // 复制初始数据用于比较
  oldKvmData = deepClone(kvmData);
  computedState();
}

const autoOSLockTypeList = [
  {
    label: traduction('SERVICE_WBS_CRE_CUSTOM'),
    id: lockTypeCustom,
  },
  {
    label: traduction('SERVICE_WBS_CRE_WINDOWS'),
    id: lockTypeWindow,
  },
];

const isCustomShow = (value: string | null) => {
  return value === lockTypeCustom;
};

// 重置端口
function resetPort(index: number) {
  kvmData.graphicalConsole[index].port = index === 0 ? defaultPort1 : defaultPort2;
  computedState();
}

// 清空快捷键输入框
function clearNumberOfActiveSessions(index: number) {
  kvmData.graphicalConsole[index].autoOSLockKey = ['', '', '', ''];
  computedState();
}

// 校验规则
const kvmRules = {
  port: [
    BaseValidators.Required({ message: traduction('VALIDTOR_RANGE') }),
    BaseValidators.Number({ message: traduction('VALIDTOR_RANGE') }),
    BaseValidators.Integer({ message: traduction('VALIDTOR_RANGE') }),
    BaseValidators.Range({ range: [1, 65535] }),
  ],
  sessionTimeoutMinutes: [
    BaseValidators.Required({ message: traduction('SERVICE_VNC_TIMEOUT_TIP') }),
    BaseValidators.Number({ message: traduction('SERVICE_VNC_TIMEOUT_TIP') }),
    BaseValidators.Integer({ message: traduction('SERVICE_VNC_TIMEOUT_TIP') }),
    BaseValidators.Range({ range: [0, 480] }),
  ],
};

// 快捷键输入
function setDefineKey(index: number, e: any, number: number) {
  let keysym;
  const keysLocation = e.location || e.keyLocation;
  // 意大利键盘模式下，按下右边Alt键，组合键输入框内应显示为"AltGraph"
  if (
    typeof e.key !== 'undefined' &&
    e.key !== 'MozPrintableKey' &&
    e.key !== 'Alt' &&
    keysLocation !== 2
  ) {
    keysym = e.key;
  } else if (
    (e.key !== 'MozPrintableKey' && e.key === 'Alt' && keysLocation === 2) ||
    e.key === 'AltGraph'
  ) {
    keysym = 'AltGraph';
  } else {
    keysym = getKeysym(e);
  }
  if (keysym) {
    kvmData.graphicalConsole[index].autoOSLockKey[number] = keysym;
  }
  computedState();
}

function keyCode(keysCode: any) {
  return (
    (keysCode >= JS_KEY_A && keysCode <= JS_KEY_Z) ||
    (keysCode >= JS_KEY_0 && keysCode <= JS_KEY_9) ||
    (keysCode >= JS_KEY_SEMI && keysCode <= JS_KEY_QUOTO) ||
    (keysCode >= JS_KEY_BR1 && keysCode <= JS_KEY_QUOT) ||
    keysCode === JS_KEY_FF_SEMI ||
    keysCode === JS_KEY_FF_PLUS ||
    keysCode === JS_KEY_FF_MIN
  );
}

// 获取按键
function getKeysym(e: any): string | number {
  const keysCode = e.keyCode || e.which || e.charCode;
  for (const key of uskeyboardTable) {
    if (key[0] === keysCode) {
      if (keyCode(keysCode)) {
        return e.shiftKey ? key[4] : key[3];
      } else if ((keysCode >= JS_KEY_0P && keysCode <= JS_KEY_DIVP) || keysCode === JS_KEY_OR_1) {
        return key[3];
      } else {
        return key[2];
      }
    }
  }
  return 'Unknow';
}

// 保存按钮的状态,数据是否修改
function computedState() {
  queryParams = {};
  const compareRes = compareKvmConfig(kvmData, oldKvmData);
  if (compareRes) {
    queryParams = compareRes;
  }

  // 单独检查系统自动锁定键是否有效
  let isVaildAutolockKey = autoLockValid(kvmData);

  let hasError = true;
  if (formRef.value) {
    formRef.value
      .validate((result: boolean) => {
        hasError = result;
      })
      .then(() => {
        saveBtnState.value = !!(hasError && !!compareRes && isVaildAutolockKey);
      });
  }
}

// 自定义快捷键校验
function autoLockValid(data: any) {
  let isValidAutoLockKey = false;

  if (data.graphicalConsole) {
    isValidAutoLockKey = data.graphicalConsole.every((item: any) => {
      if (
        item.autoOSLockEnabled &&
        item.autoOSLockType === lockTypeCustom &&
        item.autoOSLockKey?.every((val: any) => !val)
      ) {
        return false;
      }
      return true;
    });
  }

  return isValidAutoLockKey;
}

function isShowAutoLockError(autoOSLockKey: any) {
  let hasAutoLockKey = autoOSLockKey?.some((item: any) => !!item);
  return !hasAutoLockKey ? traduction('SERVICE_SHORTCUT_IS_NULL') : '';
}

// 保存
function submitBtn() {
  loading(true);
  saveBtnState.value = false;
  setKvmService(replaceKeys(queryParams))
    .then(res => {
      if (res.data.error) {
        const errorId = res.data.error;
        const errorMsg = getErrorTranslate(errorId[0].code as string);
        showFailedMessage(errorMsg);
      } else {
        init(res.data);
        showSuccessMessage();
      }
      loading(false);
    })
    .catch(error => {
      loading(false);
      const errorId = getMessageId(error.data);
      const errorMsg = getErrorTranslate(errorId[0].code as string);
      showFailedMessage(errorMsg);
    });
}

// 查看KVM会话
function jumpToOnline() {
  router.push('/navigate/user/online-users');
}

onMounted(() => {
  loading(true);
  getKvmData()
    .then(res => {
      init(res.data);
      loading(false);
    })
    .catch(error => {
      loading(false);
    });
});
</script>

<template>
  <div id="kvmView" class="kvm-container">
    <el-form
      id="kvmForm"
      ref="formRef"
      :model="kvmData"
      label-width="auto"
      label-position="left"
      :hide-required-asterisk="false"
      :validate-on-rule-change="false"
      :disabled="isSystemLock || !(isOemSecurityMgmtUser || isOemKvmUser || isBaseConfig)"
    >
      <div v-if="kvmData.graphicalConsole.length === 2">
        <p class="host-subtitle">{{ $t('HOST_SETTINGS') }}</p>
        <div class="inline-section">
          <div
            v-for="(item, index) in kvmData.graphicalConsole"
            :key="item.systemId"
            class="setup-content"
          >
            <p class="host-name">{{ $t('SERVICE_KVM_HOST') + item.systemId }}</p>
            <el-form-item
              :label="$t('SERVICE_KVM_ABLE_LABEL')"
              class="switch-value-item"
              size="default"
              :prop="['graphicalConsole', index, 'Enabled']"
            >
              <el-switch
                :id="`kvmEnable${index}`"
                v-model="item.enabled"
                :disabled="!isOemSecurityMgmtUser"
                @change="computedState"
              />
            </el-form-item>
            <el-form-item
              :rules="kvmRules.port"
              :label="$t('SERVICE_PORT')"
              :prop="['graphicalConsole', index, 'port']"
              size="default"
            >
              <el-tooltip
                v-model:visible="popoverVisible[`Port${index}`]"
                class="box-item"
                placement="top"
                :popper-class="`kvmPortInputTip${index}`"
                trigger="focus"
              >
                <template #content>
                  <span :id="`kvmPortInputTip${index}`">{{ $t('VALIDTOR_RANGE') }}</span>
                </template>
                <el-input
                  v-model.number="item.port"
                  v-addId.input="`kvmPort${index}`"
                  v-clearable
                  text
                  clearable
                  :disabled="!isOemSecurityMgmtUser"
                  @input="computedState"
                  @focus="popoverVisible[`Port${index}`] = true"
                  @blur="popoverVisible[`Port${index}`] = false"
                >
                  <template #suffix>
                    <ErrorIcon />
                    <ClearableIcon />
                  </template>
                </el-input>
              </el-tooltip>
              <el-button
                v-if="isOemSecurityMgmtUser && !isSystemLock"
                :id="`resetPort${index}`"
                text
                @click="resetPort(index)"
              >
                {{ $t('SERVICE_DEFAULT_VALUE') }}
              </el-button>
            </el-form-item>
            <!-- BIOS启动时KVM禁用热键 -->
            <el-form-item
              :label="$t('SERVICE_KVM_DISABLE_LABEL')"
              class="switch-value-item"
              size="default"
              :prop="['graphicalConsole', index, 'disableKeyboardDuringBiosStartup']"
            >
              <el-switch
                :id="`kvmHotEnable${index}`"
                v-model="item.disableKeyboardDuringBiosStartup"
                :disabled="!isOemKvmUser"
                @change="computedState"
              />
            </el-form-item>
            <!-- 虚拟键鼠持续连接 -->
            <el-form-item
              :label="$t('SERVICE_KVM_INVTED_KEYBOARD')"
              class="switch-value-item"
              size="default"
              :prop="['graphicalConsole', index, 'persistentUSBConnectionEnabled']"
            >
              <el-switch
                :id="`persistentUSB${index}`"
                v-model="item.persistentUSBConnectionEnabled"
                :disabled="!isOemKvmUser"
                @change="computedState"
              />
            </el-form-item>
            <!-- 系统自动锁定 -->
            <el-form-item class="auto-lock-item" :label="$t('SERVICE_OS_AUTO_LOCK')" size="default">
              <el-switch
                :id="`autoOSLockType${index}`"
                v-model="item.autoOSLockEnabled"
                :disabled="!isOemKvmUser"
                @change="computedState"
              />
              <el-form
                v-show="item.autoOSLockEnabled"
                label-width="auto"
                label-position="left"
                class="auto-lock"
                :disabled="isSystemLock || !isOemKvmUser"
              >
                <!-- 系统自动锁定方式 -->
                <el-form-item
                  :label="$t('SERVICE_LOCK_MODE')"
                  class="switch-value-item"
                  size="default"
                >
                  <el-radio-group v-model="item.autoOSLockType" @change="computedState">
                    <el-radio
                      v-for="itemType in autoOSLockTypeList"
                      :key="itemType.id"
                      v-addId.radio="itemType.id"
                      :value="itemType.id"
                    >
                      {{ itemType.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <!-- 自定义快捷键 -->
                <el-form-item
                  v-if="isCustomShow(item.autoOSLockType)"
                  :label="$t('SERVICE_SHORTCUT_KEY')"
                  prop="autoOSLockKey"
                  class="auto-os-lock-key"
                  :error="isShowAutoLockError(item.autoOSLockKey)"
                >
                  <el-tooltip :content="$t('SERVICE_SHORTCUT_KEY_TIP')" placement="top">
                    <div class="tooltip-box">
                      <el-input
                        v-model="item.autoOSLockKey[0]"
                        v-addId.input="`lockKeyId${index}1`"
                        class="lock-key"
                        readonly
                        @keydown.stop="setDefineKey(index, $event, 0)"
                      ></el-input>
                      <span>+</span>
                      <el-input
                        v-model="item.autoOSLockKey[1]"
                        v-addId.input="`lockKeyId${index}2`"
                        class="lock-key"
                        readonly
                        @keydown.stop="setDefineKey(index, $event, 1)"
                      ></el-input>
                      <span>+</span>
                      <el-input
                        v-model="item.autoOSLockKey[2]"
                        v-addId.input="`lockKeyId${index}3`"
                        class="lock-key"
                        readonly
                        @keydown.stop="setDefineKey(index, $event, 2)"
                      ></el-input>
                      <span>+</span>
                      <el-input
                        v-model="item.autoOSLockKey[3]"
                        v-addId.input="`lockKeyId${index}4`"
                        class="lock-key"
                        readonly
                        @keydown.stop="setDefineKey(index, $event, 3)"
                      ></el-input>
                    </div>
                  </el-tooltip>
                  <el-button
                    v-if="isOemKvmUser && !isSystemLock"
                    id="clearKeyId"
                    text
                    @click="clearNumberOfActiveSessions(index)"
                  >
                    {{ $t('COMMON_CLEAR') }}
                  </el-button>
                </el-form-item>
              </el-form>
            </el-form-item>
            <!-- 最大会话 -->
            <el-form-item
              :label="$t('SERVICE_VNC_MAX_SESSION')"
              class="switch-value-item"
              size="default"
            >
              <span id="maxSession">{{ item.maximumNumberOfSessions }}</span>
            </el-form-item>
            <!-- 活跃会话 -->
            <el-form-item
              :label="$t('SERVICE_ACTIVE_SESSIONS')"
              class="switch-value-item"
              size="default"
            >
              <span id="kvmActtive">{{ item.numberOfActiveSessions }}</span>
              <el-button
                id="checkKvmSession"
                :disabled="item.numberOfActiveSessions === 0 || !isConfigureUser"
                text
                @click="jumpToOnline"
              >
                {{ $t('ALARM_DETAILS') }}
              </el-button>
            </el-form-item>
          </div>
        </div>
      </div>
      <p v-if="kvmData.graphicalConsole.length === 2" class="host-subtitle">
        {{ $t('SERVICE_KVM_SETTING') }}
      </p>
      <!-- kvm使能 -->
      <el-form-item
        v-if="kvmData.graphicalConsole.length !== 2"
        :label="$t('SERVICE_KVM_ABLE_LABEL')"
        class="switch-value-item"
        size="default"
      >
        <el-switch
          id="kvmEnable"
          v-model="kvmData.graphicalConsole[0].enabled"
          :disabled="!isOemSecurityMgmtUser"
          @change="computedState"
        />
      </el-form-item>
      <!-- kvm热键使能 -->
      <el-form-item
        v-if="kvmData.graphicalConsole.length !== 2"
        :label="$t('SERVICE_KVM_DISABLE_LABEL')"
        class="switch-value-item"
        size="default"
      >
        <el-switch
          id="kvmHotEnable"
          v-model="kvmData.graphicalConsole[0].disableKeyboardDuringBiosStartup"
          :disabled="!isOemKvmUser"
          @change="computedState"
        />
      </el-form-item>
      <!-- 端口 -->
      <el-form-item
        v-if="kvmData.graphicalConsole.length !== 2"
        :label="$t('SERVICE_PORT')"
        :rules="kvmRules.port"
        :prop="['graphicalConsole', '0', 'port']"
        size="default"
      >
        <el-tooltip
          v-model:visible="popoverVisible.port"
          class="box-item"
          placement="top"
          popper-class="kvmPortInputTip"
          trigger="focus"
        >
          <template #content>
            <span id="kvmPortInputTip">{{ $t('VALIDTOR_RANGE') }}</span>
          </template>
          <el-input
            v-model.number="kvmData.graphicalConsole[0].port"
            v-addId.input="'kvmPort'"
            v-clearable
            text
            clearable
            :disabled="!isOemSecurityMgmtUser"
            @input="computedState"
            @focus="popoverVisible.port = true"
            @blur="popoverVisible.port = false"
          >
            <template #suffix>
              <ErrorIcon />
              <ClearableIcon />
            </template>
          </el-input>
        </el-tooltip>
        <el-button
          v-if="isOemSecurityMgmtUser && !isSystemLock"
          id="resetPort"
          text
          @click="resetPort(0)"
        >
          {{ $t('SERVICE_DEFAULT_VALUE') }}
        </el-button>
      </el-form-item>
      <!-- 超时时长 -->
      <el-form-item
        :label="$t('SERVICE_TIME_OUT_MINUTES')"
        :rules="kvmRules.sessionTimeoutMinutes"
        prop="sessionTimeoutMinutes"
        size="default"
      >
        <el-tooltip
          v-model:visible="popoverVisible.sessionTimeoutMinutes"
          class="box-item"
          placement="top"
          trigger="focus"
        >
          <template #content>
            <span id="kvmTimeoutInputTip">{{ $t('SERVICE_VNC_TIMEOUT_TIP') }}</span>
          </template>
          <el-input
            v-model.number="kvmData.sessionTimeoutMinutes"
            v-addId.input="'timeoutKvm'"
            v-clearable
            clearable
            text
            :disabled="!isBaseConfig"
            @input="computedState"
            @focus="popoverVisible.sessionTimeoutMinutes = true"
            @blur="popoverVisible.sessionTimeoutMinutes = false"
          >
            <template #suffix>
              <ErrorIcon />
              <ClearableIcon />
            </template>
          </el-input>
        </el-tooltip>
      </el-form-item>
      <!-- 通信加密 -->
      <el-form-item
        v-if="encryptionShow"
        prop="encryptionEnabled"
        :label="$t('SERVICE_ENCRYPTION')"
        class="switch-value-item"
        size="default"
      >
        <el-switch
          id="kvmEncryption"
          v-model="kvmData.encryptionEnabled"
          :disabled="!isOemKvmUser"
          @change="computedState"
        />
      </el-form-item>
      <!-- 本地kvm -->
      <el-form-item
        prop="localKvm"
        :label="$t('SERVICE_LOCAL_KVM')"
        class="switch-value-item"
        size="default"
      >
        <el-switch
          id="kvmLocal"
          v-model="kvmData.localKvmEnabled"
          :disabled="!isOemKvmUser"
          @change="computedState"
        />
      </el-form-item>
      <!-- 远程kvm连接时自动关闭本地kvm -->
      <el-form-item
        prop="autoCloseLocalDisplay"
        :label="$t('SERVICE_AUTO_DISABLE_KVM')"
        class="switch-value-item"
        size="default"
      >
        <el-switch
          id="kvmLocalAutoDisable"
          v-model="kvmData.autoCloseLocalDisplay"
          :disabled="!isOemKvmUser"
          @change="computedState"
        />
      </el-form-item>
      <!-- 虚拟键鼠持续连接 -->
      <el-form-item
        v-if="kvmData.graphicalConsole.length !== 2"
        :label="$t('SERVICE_KVM_INVTED_KEYBOARD')"
        class="switch-value-item"
        size="default"
      >
        <el-switch
          id="persistentUSB"
          v-model="kvmData.graphicalConsole[0].persistentUSBConnectionEnabled"
          :disabled="!isOemKvmUser"
          @change="computedState"
        />
      </el-form-item>
      <!-- 系统自动锁定 -->
      <el-form-item
        v-if="kvmData.graphicalConsole.length !== 2"
        class="auto-lock-item"
        :label="$t('SERVICE_OS_AUTO_LOCK')"
        size="default"
      >
        <el-switch
          id="autoOSLockType"
          v-model="kvmData.graphicalConsole[0].autoOSLockEnabled"
          :disabled="!isOemKvmUser"
          @change="computedState"
        />
        <el-form
          v-show="kvmData.graphicalConsole[0].autoOSLockEnabled"
          label-width="auto"
          label-position="left"
          class="auto-lock"
          :disabled="isSystemLock || !isOemKvmUser"
        >
          <!-- 系统自动锁定方式 -->
          <el-form-item :label="$t('SERVICE_LOCK_MODE')" class="switch-value-item" size="default">
            <el-radio-group
              v-model="kvmData.graphicalConsole[0].autoOSLockType"
              @change="computedState"
            >
              <el-radio
                v-for="item in autoOSLockTypeList"
                :key="item.id"
                v-addId.radio="item.id"
                :value="item.id"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 自定义快捷键 -->
          <el-form-item
            v-if="isCustomShow(kvmData.graphicalConsole[0].autoOSLockType)"
            :label="$t('SERVICE_SHORTCUT_KEY')"
            prop="autoOSLockKey"
            class="auto-os-lock-key"
            :error="isShowAutoLockError(kvmData.graphicalConsole[0].autoOSLockKey)"
          >
            <el-tooltip :content="$t('SERVICE_SHORTCUT_KEY_TIP')" placement="top">
              <div class="tooltip-box">
                <el-input
                  v-model="kvmData.graphicalConsole[0].autoOSLockKey[0]"
                  v-addId.input="'lockKeyId1'"
                  class="lock-key"
                  readonly
                  @keydown.stop="setDefineKey(0, $event, 0)"
                ></el-input>
                <span>+</span>
                <el-input
                  v-model="kvmData.graphicalConsole[0].autoOSLockKey[1]"
                  v-addId.input="'lockKeyId2'"
                  class="lock-key"
                  readonly
                  @keydown.stop="setDefineKey(0, $event, 1)"
                ></el-input>
                <span>+</span>
                <el-input
                  v-model="kvmData.graphicalConsole[0].autoOSLockKey[2]"
                  v-addId.input="'lockKeyId3'"
                  class="lock-key"
                  readonly
                  @keydown.stop="setDefineKey(0, $event, 2)"
                ></el-input>
                <span>+</span>
                <el-input
                  v-model="kvmData.graphicalConsole[0].autoOSLockKey[3]"
                  v-addId.input="'lockKeyId4'"
                  class="lock-key"
                  readonly
                  @keydown.stop="setDefineKey(0, $event, 3)"
                ></el-input>
              </div>
            </el-tooltip>
            <el-button
              v-if="isOemKvmUser && !isSystemLock"
              id="clearKeyId"
              text
              @click="clearNumberOfActiveSessions(0)"
            >
              {{ $t('COMMON_CLEAR') }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-form-item>
      <!-- 最大会话数 -->
      <el-form-item
        v-if="kvmData.graphicalConsole.length !== 2"
        :label="$t('SERVICE_VNC_MAX_SESSION')"
        class="switch-value-item"
        size="default"
      >
        <span id="maxSession">{{ kvmData.graphicalConsole[0].maximumNumberOfSessions }}</span>
      </el-form-item>
      <!-- 活跃会话数 -->
      <el-form-item
        v-if="kvmData.graphicalConsole.length !== 2"
        :label="$t('SERVICE_ACTIVE_SESSIONS')"
        class="switch-value-item"
        size="default"
      >
        <span id="kvmActtive">{{ kvmData.graphicalConsole[0].numberOfActiveSessions }}</span>
        <el-button
          id="checkKvmSession"
          :disabled="kvmData.graphicalConsole[0].numberOfActiveSessions === 0 || !isConfigureUser"
          text
          @click="jumpToOnline"
        >
          {{ $t('ALARM_DETAILS') }}
        </el-button>
      </el-form-item>
      <!-- kvm保存 -->
      <el-form-item label="">
        <el-button
          v-if="isOemSecurityMgmtUser || isOemKvmUser || isBaseConfig"
          id="kvmButton"
          :disabled="!saveBtnState"
          type="primary"
          @click="submitBtn"
        >
          {{ $t('COMMON_SAVE') }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.kvm-container {
  background-color: var(--o-bg-color-base);
  border-radius: 4px;
  padding: 24px;
  height: auto !important;
  margin-right: 24px;

  .host-subtitle {
    font-size: 16px;
    color: #000000;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 16px;
  }

  .inline-section {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 24px;

    .setup-content {
      flex: 1;
      width: 50%;
      min-width: 700px;
      padding: 16px;
      border-radius: 4px;
      background: #f4f6fa;

      .host-name {
        font-size: 14px;
        color: #000000;
        font-weight: 500;
        line-height: 22px;
        margin-bottom: 16px;
      }
    }
  }

  :deep(.el-form-item) {
    &:nth-last-child(1) {
      margin: 0;
    }

    &.el-form-item {
      margin-bottom: var(--o-form-item-gap);

      &:nth-last-child(1) {
        margin-bottom: 0;
      }
    }

    .el-input {
      max-width: 320px;
    }

    .el-button--text {
      min-width: auto;
      margin: 4px;
      font-weight: 600;
    }
  }

  :deep(.switch-value-item) {
    height: 16px;

    .el-form-item__label {
      padding-top: 0;
      padding-bottom: 0;
    }

    .el-radio {
      height: auto;
    }
  }

  :deep(.special-item) {
    .el-form-item__label {
      padding-top: 0;
      padding-bottom: 0;
    }

    .el-radio {
      height: auto;
    }
  }

  :deep(.auto-os-lock-key) {
    .el-form-item__label {
      padding-top: 8px;
      padding-bottom: 8px;
    }
  }

  :deep(.auto-lock-item) {
    .el-form-item__content {
      display: inline-block;

      .auto-lock {
        border: 1px solid #c3cedf;
        border-radius: 4px;
      }

      .el-form-item__error {
        position: static;
      }
    }
  }

  .tooltip-box {
    display: inline-block;
  }

  .auto-lock {
    background-color: var(--o-bg-color-light);
    padding: 24px;
    margin-top: 8px;
    border-radius: 2px;
  }

  .lock-key {
    width: 56px;
    margin-bottom: 4px;

    :deep(.el-input__wrapper) {
      padding-left: 8px;
    }

    :deep(.el-input__inner) {
      padding-right: 8px;
    }
  }
}
</style>
