<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import VirtualDialog from './VirtualDialog.vue';
import { IconCaretUp, IconSetting, IconCaretDown } from '@computing/opendesign-icons';
import { exportKvmStartupFile, sendHeartBeat } from '../../services/home.service';
import useStore from '@/stores';
import { downloadFileWithResponse } from '@/utils/common-service';
import { traduction } from '@/utils/language';
import { useRouter } from 'vue-router';
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { UserPrivil } from '@/model/base-enum';
import { getStoreData } from '@/utils/composition';
import { getKvmData } from '@/pages/Service/Kvm/services/kvm.services';
import { getVncData } from '@/pages/Service/Vnc/vnc.server';
import { Resolution, useHome, WebStyleType } from '../../hooks/useHome';
import { computed } from 'vue';
import { getGenericInfo } from '@/services/header/header.service';
const { getResolution, getWebStyle } = useHome();
const kvmSupported = computed(() => {
  return getStoreData('loct', 'kvmspt');
});
const vncSupported = computed(() => {
  return getStoreData('loct', 'vncspt');
});
const activatedSystemId = ref(0); // 激活的主机
const resolution = getResolution;
const webStyle = getWebStyle();
const props = defineProps({
  data: {
    type: String,
    required: true,
    default: '',
  },
});
const store = useStore();
const router = useRouter();
const hasRemoteControl = checkPrivil(UserPrivil.remoteControl);
let kvmCheckTimer = null as any;
enum VirtualBtnId {
  h5Only = 'h5Only',
  h5Only2 = 'h5Only2',
  h5Share = 'h5Share',
  h5Share2 = 'h5Share2',
  javaOnly = 'javaOnly',
  javaShare = 'javaShare',
  more = 'more'
}

const dialogVisible = ref(false);
const jvmVisible = ref(false);
const SystemIds: any = ref([]);
const tempSystemIds: any = ref();
const virtualOptions = reactive({
  html5: [
    {
      id: VirtualBtnId.h5Only,
      label: 'HOME_HTML5_KVM_ONLY',
      disabled: false,
      show: true,
    },
    {
      id: VirtualBtnId.h5Share,
      label: 'HOME_HTML5_KVM_SHARE',
      disabled: false,
      show: true,
    },
  ],
  html5Two: [
    {
      id: VirtualBtnId.h5Only2,
      label: 'HOME_HTML5_KVM_ONLY',
      disabled: false,
      show: true,
    },
    {
      id: VirtualBtnId.h5Share2,
      label: 'HOME_HTML5_KVM_SHARE',
      disabled: false,
      show: true,
    },
  ],
  java: [
    {
      id: VirtualBtnId.javaOnly,
      label: 'HOME_JAVA_KVM_ONLY',
      disabled: false,
      show: false
    },
    {
      id: VirtualBtnId.javaShare,
      label: 'HOME_JAVA_KVM_SHARE',
      disabled: false,
      show: false
    }
  ],
  more: {
    id: VirtualBtnId.more,
    label: 'REMOTE_MORE_INFO',
    disabled: false,
    show: true,
  },
});

function isPrivateDisabled() {
  return !hasRemoteControl || virtualOptions.html5[0].disabled;
}
function isSharedDisabled() {
  return !hasRemoteControl || virtualOptions.html5[1].disabled;
}
function isPrivateDisabledTwo() {
  return !hasRemoteControl || virtualOptions.html5Two[0].disabled;
}
function isSharedDisabledTwo() {
  return !hasRemoteControl || virtualOptions.html5Two[1].disabled;
}

function virtualClick(id: string, host?: number) {
  // 双主机的独占
  if (SystemIds.value.length !== 1) {
    if (id === VirtualBtnId.h5Only) {
      if (!isPrivateDisabled()) {
        if (host === 1 || host === 2) {
          openKVM('Exclusive', host);
        }
      }
    } else if (id === VirtualBtnId.h5Only2) {
      if (!isPrivateDisabledTwo()) {
        if (host === 1 || host === 2) {
          openKVM('Exclusive', host);
        }
      }
    }
  } else {
    // 单主机的独占
    if (id === VirtualBtnId.h5Only && !isPrivateDisabled()) {
      openKVM('Exclusive');
    }
  }
  // 双主机的共享
  if (SystemIds.value.length !== 1) {
    if (id === VirtualBtnId.h5Share) {
      if (!isSharedDisabled()) {
        if (host === 1 || host === 2) {
          openKVM('Shared', host);
        }
      }
    } else if (id === VirtualBtnId.h5Share2) {
      if (!isSharedDisabledTwo()) {
        if (host === 1 || host === 2) {
          openKVM('Shared', host);
        }
      }
    }
  } else {
    // 单主机的共享
    if (id === VirtualBtnId.h5Share && !isSharedDisabled()) {
      openKVM('Shared');
    }
  }
  if (id === VirtualBtnId.javaOnly) {
    downloadFile('Exclusive');
  }
  if (id === VirtualBtnId.javaShare) {
    downloadFile('Shared');
  }
  if (id === VirtualBtnId.more) {
    dialogVisible.value = true;
  }
  localStorage.removeItem('kvmConnected');
}

function openKVM(right: string, host?: number) {
  localStorage.setItem('H5ClientModel', right);
  // SystemIds为null的情况，后端sdk是老包，webui是新包
  const toURL = tempSystemIds.value === null || tempSystemIds.value.length === 1 ? '#/kvm_h5' : `#/kvm_h5?systemIds=${host}`;
  const resourceId = getStoreData('loct', 'rn');
  if (!resourceId) {
    return;
  }

  sendHeartBeat().then(
    res => {
      const win = window.open(toURL, '_blank');
      if (win) {
        win.opener = null;
      }
    },
    () => {},
  );
}

function downloadFile(right: string) {
  const params = {
    Language: store.state.loct.locale,
    Mode: right
  };
  exportKvmStartupFile(params).then(
    res => {
      const data = res.data;
      downloadFileWithResponse(data, 'kvm.jnlp');
    },
    error => {
      store.state.event.setEventState({
        type: 'alertMessage',
        value: {
          type: 'error',
          message: traduction('REMOTE_ERR_LINK_FAILED'),
        }
      });
    }
  );
}

function dialogClose(visible: boolean) {
  dialogVisible.value = visible;
}

function openKVMPage() {
  router.push({ path: '/navigate/service/kvm' });
}

onMounted(() => {
  continuedSearchKvmStatus();
  getGenericInfo().then((res: any) => {
    if (res) {
      SystemIds.value = res.SystemIds;
      tempSystemIds.value = res.tempSystemIds;
    }
  });
});

onUnmounted(() => {
  if (kvmCheckTimer) {
    clearInterval(kvmCheckTimer);
  }
  window.removeEventListener('storage', listenKvmConnected);
});

function continuedSearchKvmStatus() {
  searchKvmActiveStatus();

  // 查询kvm的会话状态，10秒查一次
  kvmCheckTimer = setInterval(() => {
    searchKvmActiveStatus();
  }, 10000);

  // 如果报401的错误，则停止查询kvm会话状态
  if (getStoreData('glob', 'isTimeOut')) {
    clearInterval(kvmCheckTimer);
  }
}

function listenKvmConnected() {
  if (localStorage.getItem('kvmConnected')) {
    searchKvmActiveStatus();
  }
}
window.addEventListener('storage', listenKvmConnected);

function searchKvmActiveStatus(): void {
  Promise.all([
    kvmSupported.value ? getKvmData() : Promise.resolve(null),
    vncSupported.value ? getVncData() : Promise.resolve(null),
  ]).then(resArr => {
    const kvmData = resArr[0].data;
    activatedSystemId.value = kvmData.ActivatedSystemId;
    const vncData = resArr[1] as any;
    const visibleJavaKvm = kvmData.VisibleJavaKvm;
    const activeStatus1 = kvmData?.GraphicalConsole[0]?.ActivatedSessionsType || vncData?.ActivatedSessionsType || [];
    const allDisabled1 = kvmData?.GraphicalConsole[0]?.MaximumNumberOfSessions === kvmData?.GraphicalConsole[0]?.NumberOfActiveSessions ||
      !kvmData?.GraphicalConsole[0]?.Enabled ||
      (vncData && vncData?.VNCSettings[0]?.MaximumNumberOfSessions === vncData?.VNCSettings[0]?.NumberOfActiveSessions);
    const activeStatus2 = kvmData?.GraphicalConsole[1]?.ActivatedSessionsType || vncData?.ActivatedSessionsType || [];
    const allDisabled2 = 
      kvmData?.GraphicalConsole[1]?.MaximumNumberOfSessions === kvmData?.GraphicalConsole[1]?.NumberOfActiveSessions ||
      !kvmData?.GraphicalConsole[1]?.Enabled ||
      (vncData && vncData?.VNCSettings[1]?.MaximumNumberOfSessions === vncData?.VNCSettings[1]?.NumberOfActiveSessions);
    // 主机1置灰逻辑
    if (allDisabled1 || activeStatus1.indexOf('Private') > -1) {
      // 置灰所有
      virtualOptions.html5[0].disabled = true;
      virtualOptions.html5[1].disabled = true;
      virtualOptions.java[0].disabled = true;
      virtualOptions.java[1].disabled = true;
    } else if (activeStatus1.indexOf('Shared') > -1) {
      // 置灰两个独占
      virtualOptions.html5[0].disabled = true;
      virtualOptions.html5[1].disabled = false;
      virtualOptions.java[0].disabled = true;
      virtualOptions.java[1].disabled = false;
    } else {
      virtualOptions.html5[0].disabled = false;
      virtualOptions.html5[1].disabled = false;
      virtualOptions.java[0].disabled = false;
      virtualOptions.java[1].disabled = false;
    }
    // 主机2置灰逻辑
    if (kvmData.GraphicalConsole.length === 2) {
      if (allDisabled2 || activeStatus2.indexOf('Private') > -1) {
        // 置灰所有
        virtualOptions.html5Two[0].disabled = true;
        virtualOptions.html5Two[1].disabled = true;
      } else if (activeStatus2.indexOf('Shared') > -1) {
        // 置灰两个独占
        virtualOptions.html5Two[0].disabled = true;
        virtualOptions.html5Two[1].disabled = false;
      } else {
        virtualOptions.html5Two[0].disabled = false;
        virtualOptions.html5Two[1].disabled = false;
      }
    }
    virtualOptions.java[0].show = visibleJavaKvm;
    virtualOptions.java[1].show = visibleJavaKvm;
    jvmVisible.value = visibleJavaKvm;
  });
}
</script>

<template>
  <template v-if="!webStyle || webStyle === WebStyleType.DEFAULT">
    <div id="homeVirtualController" class="virtual-console background" :class="kvmSupported ? '' : 'hide'">
      <span v-t="'HOME_VIRTUALCONSOLE_TITLE'" class="title"></span>
      <el-tooltip placement="top" :content="$t('HOME_FDM_ALARM_SETTING')" trigger-keys>
        <span id="virtualSet" class="set virtual-button" @click="openKVMPage">
          <el-icon :size="16"><IconSetting /></el-icon>
        </span>
      </el-tooltip>
      <span v-if="hasRemoteControl" class="more-info">
        <span class="virtual-text">{{ $t('KVM_NOT_START_INFO_1') }}</span>
        <span
          :id="virtualOptions.more.id"
          :disabled="virtualOptions.more.disabled"
          @click="virtualClick(virtualOptions.more.id)"
        >
          <a v-t="'KVM_NOT_START_INFO_2'"></a>
        </span>
      </span>
      <div class="virtual-content">
        <div class="console-box">
          <el-tooltip
            v-if="SystemIds.length === 2"
            :content="$t('HTML5_CONSOLE')"
            placement="top"
            trigger-keys>
            <p class="select-title">
              {{ $t('HTML5_CONSOLE') }}
            </p>
          </el-tooltip>
          <div v-if="SystemIds.length === 2 && activatedSystemId === 1" class="active-tag host1">
            {{ $t('HOME_KVM_HOST_ACTIVE') }}
          </div>
          <div id="html5Console" class="html virtual-item">
            <div class="console-img html5-img" :class="SystemIds.length === 2 && virtualOptions.java[0].show ? '' : 'margin'"></div>
            <el-divider class="console-divider" :class="SystemIds.length === 2 && virtualOptions.java[0].show ? 'mv-20' : 'mr-24'" direction="vertical"></el-divider>
            <el-tooltip
              v-if="SystemIds.length === 2"
              :content="$t('HOME_HOST_0')"
              placement="top"
              trigger-keys>
              <p class="console-host">{{ $t('HOME_HOST_0') }}</p>
            </el-tooltip>
            <div class="console-select">
              <el-tooltip
                v-if="SystemIds.length !== 2 || (SystemIds.length !== 2 && virtualOptions.java[0].show)"
                :content="$t('HTML5_CONSOLE')"
                placement="top"
                trigger-keys>
                <p class="select-title">
                  {{ $t('HTML5_CONSOLE') }}
                </p>
              </el-tooltip>
              <el-select
                v-addId.select="'html5Select'"
                :suffix-icon="IconCaretDown"
                :placeholder="$t('HOME_START_VIRMON_STATION')"
                :disabled="
                  !hasRemoteControl ||
                    (virtualOptions.html5[0].disabled && virtualOptions.html5[1].disabled)
                "
                class="default-select"
                @change="virtualClick($event, 1)"
              >
                <el-option
                  v-for="item in virtualOptions.html5"
                  :id="item.id"
                  :key="item.id"
                  :label="$t(item.label)"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div v-if="SystemIds.length === 2" class="console-box">
          <div v-if="activatedSystemId === 2" class="active-tag host2">
            {{ $t('HOME_KVM_HOST_ACTIVE') }}
          </div>
          <div id="html5Console2" class="html virtual-item">
            <div class="console-img html5-img" :class="SystemIds.length === 2 && virtualOptions.java[0].show ? '' : 'margin'"></div>
            <el-divider class="console-divider" :class="SystemIds.length === 2 && virtualOptions.java[0].show ? 'mv-20' : 'mr-24'" direction="vertical"></el-divider>
            <el-tooltip
              :content="$t('HOME_HOST_1')"
              placement="top"
              trigger-keys>
              <p class="console-host">{{ $t('HOME_HOST_1') }}</p>
            </el-tooltip>
            <div class="console-select">
              <el-select
                v-addId.select="'html5Select'"
                :suffix-icon="IconCaretDown"
                :placeholder="$t('HOME_START_VIRMON_STATION')"
                :disabled="
                  !hasRemoteControl ||
                    (virtualOptions.html5Two[0].disabled && virtualOptions.html5Two[1].disabled)
                "
                class="default-select"
                @change="virtualClick($event, 2)"
              >
                <el-option
                  v-for="item in virtualOptions.html5Two"
                  :id="item.id"
                  :key="item.id"
                  :label="$t(item.label)"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div v-if="virtualOptions.java[0].show" id="javaConsole" class="console-box">
          <el-tooltip
            v-if="SystemIds.length === 2"
            :content="$t('JAVA_CONSOLE')"
            placement="top"
            trigger-keys>
            <p class="select-title">
              {{ $t('JAVA_CONSOLE') }}
            </p>
          </el-tooltip>
          <div class="java virtual-item">
            <div class="console-img java-img" :class="SystemIds.length === 2 && virtualOptions.java[0].show ? '' : 'margin'"></div>
            <el-divider class="console-divider" :class="SystemIds.length === 2 && virtualOptions.java[0].show ? 'mv-20' : 'mr-24'" direction="vertical"></el-divider>
            <div class="console-select" :class="SystemIds.length === 2 ? 'ml-45' : ''">
              <el-tooltip
                v-if="SystemIds.length !== 2 || (SystemIds.length !== 2 && virtualOptions.java[0].show)"
                :content="$t('JAVA_CONSOLE')"
                placement="top"
                trigger-keys>
                <p class="select-title">
                  {{ $t('JAVA_CONSOLE') }}
                </p>
              </el-tooltip>
              <el-select
                v-addId.select="'javaSelect'"
                :suffix-icon="IconCaretDown"
                :placeholder="$t('HOME_START_VIRMON_STATION')"
                :disabled="
                  !hasRemoteControl ||
                    (virtualOptions.java[0].disabled && virtualOptions.java[1].disabled)
                "
                class="default-select"
                @change="virtualClick"
              >
                <el-option
                  v-for="item in virtualOptions.java"
                  v-show="item.show"
                  :id="item.id"
                  :key="item.id"
                  :label="$t(item.label)"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <template v-if="webStyle === WebStyleType.STANDARD">
    <div id="homeVirtualController" class="standard-mid-style virtual-console background">
      <span v-t="'HOME_VIRTUALCONSOLE_TITLE'" class="title"></span>
      <el-tooltip placement="top" :content="$t('HOME_FDM_ALARM_SETTING')" trigger-keys>
        <span id="virtualSet" class="set virtual-button" @click="openKVMPage">
          <el-icon :size="16"><IconSetting /></el-icon>
        </span>
      </el-tooltip>
      <span v-if="hasRemoteControl" class="more-info">
        <span class="virtual-text">{{ $t('KVM_NOT_START_INFO_1') }}</span>
        <span
          :id="virtualOptions.more.id"
          :disabled="virtualOptions.more.disabled"
          @click="virtualClick(virtualOptions.more.id)"
        >
          <a v-t="'KVM_NOT_START_INFO_2'"></a>
        </span>
      </span>
      <div class="virtual-content">
        <div class="console-box">
          <el-tooltip
            v-if="SystemIds.length === 2"
            :content="$t('HTML5_CONSOLE')"
            placement="top"
            trigger-keys>
            <p class="select-title">
              {{ $t('HTML5_CONSOLE') }}
            </p>
          </el-tooltip>
          <div v-if="SystemIds.length === 2 && activatedSystemId === 1" class="active-tag host1">
            {{ $t('HOME_KVM_HOST_ACTIVE') }}
          </div>
          <div id="html5ConsoleStandardSm" class="html virtual-item">
            <div class="console-img home-style-icon-HTML standard-icon-style"></div>
            <el-divider class="console-divider" direction="vertical"></el-divider>
            <el-tooltip
              v-if="SystemIds.length === 2"
              :content="$t('HOME_HOST_0')"
              placement="top"
              trigger-keys>
              <p class="console-host">{{ $t('HOME_HOST_0') }}</p>
            </el-tooltip>
            <div class="console-select">
              <el-tooltip
                v-if="SystemIds.length !== 2 || (SystemIds.length !== 2 && virtualOptions.java[0].show)"
                :content="$t('HTML5_CONSOLE')"
                placement="top"
                trigger-keys>
                <p class="select-title">
                  {{ $t('HTML5_CONSOLE') }}
                </p>
              </el-tooltip>
              <el-select
                v-addId.select="'html5Select'"
                :suffix-icon="IconCaretDown"
                :placeholder="$t('HOME_START_VIRMON_STATION')"
                class="standard-input"
                :disabled="
                  !hasRemoteControl ||
                    (virtualOptions.html5[0].disabled && virtualOptions.html5[1].disabled)
                "
                @change="virtualClick($event, 1)"
              >
                <el-option
                  v-for="item in virtualOptions.html5"
                  :id="item.id"
                  :key="item.id"
                  :label="$t(item.label)"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div v-if="SystemIds.length === 2" class="console-box">
          <div v-if="activatedSystemId === 2" class="active-tag host2">
            {{ $t('HOME_KVM_HOST_ACTIVE') }}
          </div>
          <div id="html5Console2" class="html virtual-item">
            <div class="console-img home-style-icon-HTML standard-icon-style"></div>
            <el-divider class="console-divider" direction="vertical"></el-divider>
            <el-tooltip
              :content="$t('HOME_HOST_1')"
              placement="top"
              trigger-keys>
              <p class="console-host">{{ $t('HOME_HOST_1') }}</p>
            </el-tooltip>
            <div class="console-select">
              <el-select
                v-addId.select="'html5Select'"
                :suffix-icon="IconCaretDown"
                :placeholder="$t('HOME_START_VIRMON_STATION')"
                class="standard-input"
                :disabled="
                  !hasRemoteControl ||
                    (virtualOptions.html5Two[0].disabled && virtualOptions.html5Two[1].disabled)
                "
                @change="virtualClick($event, 2)"
              >
                <el-option
                  v-for="item in virtualOptions.html5Two"
                  :id="item.id"
                  :key="item.id"
                  :label="$t(item.label)"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div v-if="virtualOptions.java[0].show" id="javaConsole" class="console-box">
          <el-tooltip
            v-if="SystemIds.length === 2"
            :content="$t('JAVA_CONSOLE')"
            placement="top"
            trigger-keys
          >
            <p class="select-title">
              {{ $t('JAVA_CONSOLE') }}
            </p>
          </el-tooltip>
          <div class="java virtual-item">
            <div class="console-img home-style-icon-Java standard-icon-style"></div>
            <el-divider class="console-divider" direction="vertical"></el-divider>
            <div class="console-select" :class="SystemIds.length === 2 ? 'ml-45' : ''">
              <el-tooltip
                v-if="SystemIds.length !== 2 || (SystemIds.length !== 2 && virtualOptions.java[0].show)"
                placement="top"
                :content="$t('JAVA_CONSOLE')"
                trigger-keys>
                <p class="select-title">
                  {{ $t('JAVA_CONSOLE') }}
                </p>
              </el-tooltip>
              <el-select
                v-addId.select="'javaSelect'"
                :suffix-icon="IconCaretDown"
                :placeholder="$t('HOME_START_VIRMON_STATION')"
                class="standard-input"
                :disabled="
                  !hasRemoteControl ||
                    (virtualOptions.java[0].disabled && virtualOptions.java[1].disabled)
                "
                @change="virtualClick"
              >
                <el-option
                  v-for="item in virtualOptions.java"
                  v-show="item.show"
                  :id="item.id"
                  :key="item.id"
                  :label="$t(item.label)"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <template v-if="webStyle === WebStyleType.IBMA">
    <template v-if="resolution === Resolution.SMALL">
      <div id="homeVirtualController" class="ibma-sm-style virtual-console background">
        <span v-t="'HOME_VIRTUALCONSOLE_TITLE'" class="title"></span>
        <el-tooltip placement="top" :content="$t('HOME_FDM_ALARM_SETTING')" trigger-keys>
          <span id="virtualSet" class="set virtual-button" @click="openKVMPage">
            <el-icon :size="16"><IconSetting /></el-icon>
          </span>
        </el-tooltip>
        <span v-if="hasRemoteControl" class="more-info">
          <span class="virtual-text">{{ $t('KVM_NOT_START_INFO_1') }}</span>
          <span
            :id="virtualOptions.more.id"
            :disabled="virtualOptions.more.disabled"
            @click="virtualClick(virtualOptions.more.id)"
          >
            <a v-t="'KVM_NOT_START_INFO_2'"></a>
          </span>
        </span>
        <div class="virtual-content">
          <div class="console-box">
            <el-tooltip
              v-if="SystemIds.length === 2"
              :content="$t('HTML5_CONSOLE')"
              placement="top"
              trigger-keys>
              <p class="select-title">
                {{ $t('HTML5_CONSOLE') }}
              </p>
            </el-tooltip>
            <div v-if="SystemIds.length === 2 && activatedSystemId === 1" class="active-tag host1">
              {{ $t('HOME_KVM_HOST_ACTIVE') }}
            </div>
            <div id="html5Console" class="html virtual-item">
              <div class="console-img home-style-icon-HTML ibma-icon-style"></div>
              <el-divider class="console-divider" direction="vertical"></el-divider>
              <el-tooltip
                v-if="SystemIds.length === 2"
                :content="$t('HOME_HOST_0')"
                placement="top"
                trigger-keys>
                <p class="console-host">{{ $t('HOME_HOST_0') }}</p>
              </el-tooltip>
              <div class="console-select">
                <el-tooltip
                  v-if="SystemIds.length !== 2 || (SystemIds.length !== 2 && virtualOptions.java[0].show)"
                  placement="top"
                  :content="$t('HTML5_CONSOLE')"
                  trigger-keys>
                  <p class="select-title">
                    {{ $t('HTML5_CONSOLE') }}
                  </p>
                </el-tooltip>
                <el-select
                  v-addId.select="'html5Select'"
                  :suffix-icon="IconCaretDown"
                  :placeholder="$t('HOME_START_VIRMON_STATION')"
                  :disabled="
                    !hasRemoteControl ||
                      (virtualOptions.html5[0].disabled && virtualOptions.html5[1].disabled)
                  "
                  class="default-select"
                  @change="virtualClick($event, 1)"
                >
                  <el-option
                    v-for="item in virtualOptions.html5"
                    :id="item.id"
                    :key="item.id"
                    :label="$t(item.label)"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div v-if="SystemIds.length === 2" class="console-box">
            <div v-if="activatedSystemId === 2" class="active-tag host2">
              {{ $t('HOME_KVM_HOST_ACTIVE') }}
            </div>
            <div id="html5Console2" class="html virtual-item">
              <div class="console-img home-style-icon-HTML ibma-icon-style"></div>
              <el-divider class="console-divider" direction="vertical"></el-divider>
              <el-tooltip
                :content="$t('HOME_HOST_1')"
                placement="top"
                trigger-keys>
                <p class="console-host">{{ $t('HOME_HOST_1') }}</p>
              </el-tooltip>
              <div class="console-select">
                <el-select
                  v-addId.select="'html5Select'"
                  :suffix-icon="IconCaretDown"
                  :placeholder="$t('HOME_START_VIRMON_STATION')"
                  :disabled="
                    !hasRemoteControl ||
                      (virtualOptions.html5Two[0].disabled && virtualOptions.html5Two[1].disabled)
                  "
                  class="default-select"
                  @change="virtualClick($event, 2)"
                >
                  <el-option
                    v-for="item in virtualOptions.html5Two"
                    :id="item.id"
                    :key="item.id"
                    :label="$t(item.label)"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div v-if="virtualOptions.java[0].show" id="javaConsole" class="console-box">
            <el-tooltip
              v-if="SystemIds.length === 2"
              :content="$t('JAVA_CONSOLE')"
              placement="top"
              trigger-keys>
              <p class="select-title">
                {{ $t('JAVA_CONSOLE') }}
              </p>
            </el-tooltip>
            <div class="java virtual-item">
              <div class="console-img home-style-icon-Java ibma-icon-style"></div>
              <el-divider class="console-divider" direction="vertical"></el-divider>
              <div class="console-select" :class="SystemIds.length === 2 ? 'ml-45' : ''">
                <el-tooltip
                  v-if="SystemIds.length !== 2 || (SystemIds.length !== 2 && virtualOptions.java[0].show)"
                  placement="top"
                  :content="$t('JAVA_CONSOLE')"
                  trigger-keys>
                  <p class="select-title">
                    {{ $t('JAVA_CONSOLE') }}
                  </p>
                </el-tooltip>
                <el-select
                  v-addId.select="'javaSelect'"
                  :suffix-icon="IconCaretDown"
                  :placeholder="$t('HOME_START_VIRMON_STATION')"
                  :disabled="
                    !hasRemoteControl ||
                      (virtualOptions.java[0].disabled && virtualOptions.java[1].disabled)
                  "
                  class="default-select"
                  @change="virtualClick"
                >
                  <el-option
                    v-for="item in virtualOptions.java"
                    v-show="item.show"
                    :id="item.id"
                    :key="item.id"
                    :label="$t(item.label)"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div id="homeVirtualController" class="ibma-mid-style virtual-console background">
        <span v-t="'HOME_VIRTUALCONSOLE_TITLE'" class="title"></span>
        <el-tooltip placement="top" :content="$t('HOME_FDM_ALARM_SETTING')" trigger-keys>
          <span id="virtualSet" class="set virtual-button" @click="openKVMPage">
            <el-icon :size="16"><IconSetting /></el-icon>
          </span>
        </el-tooltip>
        <span v-if="hasRemoteControl" class="more-info">
          <span class="virtual-text">{{ $t('KVM_NOT_START_INFO_1') }}</span>
          <span
            :id="virtualOptions.more.id"
            :disabled="virtualOptions.more.disabled"
            @click="virtualClick(virtualOptions.more.id)"
          >
            <a v-t="'KVM_NOT_START_INFO_2'"></a>
          </span>
        </span>
        <div class="virtual-content">
          <div class="console-box">
            <el-tooltip
              v-if="SystemIds.length === 2"
              :content="$t('HTML5_CONSOLE')"
              placement="top"
              trigger-keys>
              <p class="select-title">
                {{ $t('HTML5_CONSOLE') }}
              </p>
            </el-tooltip>
            <div v-if="SystemIds.length === 2 && activatedSystemId === 1" class="active-tag host1">
              {{ $t('HOME_KVM_HOST_ACTIVE') }}
            </div>
            <div id="html5Console" class="html virtual-item">
              <div class="console-img home-style-icon-HTML ibma-icon-style"></div>
              <el-divider class="console-divider" direction="vertical"></el-divider>
              <el-tooltip
                v-if="SystemIds.length === 2"
                :content="$t('HOME_HOST_0')"
                placement="top"
                trigger-keys>
                <p class="console-host">{{ $t('HOME_HOST_0') }}</p>
              </el-tooltip>
              <div class="console-select">
                <el-tooltip
                  v-if="SystemIds.length !== 2 || (SystemIds.length !== 2 && virtualOptions.java[0].show)"
                  placement="top"
                  :content="$t('HTML5_CONSOLE')"
                  trigger-keys>
                  <p class="select-title">
                    {{ $t('HTML5_CONSOLE') }}
                  </p>
                </el-tooltip>
                <el-select
                  v-addId.select="'html5Select'"
                  :suffix-icon="IconCaretDown"
                  :placeholder="$t('HOME_START_VIRMON_STATION')"
                  :disabled="
                    !hasRemoteControl ||
                      (virtualOptions.html5[0].disabled && virtualOptions.html5[1].disabled)
                  "
                  class="default-select"
                  @change="virtualClick($event, 1)"
                >
                  <el-option
                    v-for="item in virtualOptions.html5"
                    :id="item.id"
                    :key="item.id"
                    :label="$t(item.label)"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div v-if="SystemIds.length === 2" class="console-box">
            <div v-if="activatedSystemId === 2" class="active-tag host2">
              {{ $t('HOME_KVM_HOST_ACTIVE') }}
            </div>
            <div id="html5Console2" class="html virtual-item">
              <div class="console-img home-style-icon-HTML ibma-icon-style"></div>
              <el-divider class="console-divider" direction="vertical"></el-divider>
              <el-tooltip
                :content="$t('HOME_HOST_1')"
                placement="top"
                trigger-keys>
                <p class="console-host">{{ $t('HOME_HOST_1') }}</p>
              </el-tooltip>
              <div class="console-select">
                <el-select
                  v-addId.select="'html5Select'"
                  :suffix-icon="IconCaretDown"
                  :placeholder="$t('HOME_START_VIRMON_STATION')"
                  :disabled="
                    !hasRemoteControl ||
                      (virtualOptions.html5Two[0].disabled && virtualOptions.html5Two[1].disabled)
                  "
                  class="default-select"
                  @change="virtualClick($event, 2)"
                >
                  <el-option
                    v-for="item in virtualOptions.html5Two"
                    :id="item.id"
                    :key="item.id"
                    :label="$t(item.label)"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div v-if="virtualOptions.java[0].show" id="javaConsole" class="console-box">
            <el-tooltip
              v-if="SystemIds.length === 2"
              :content="$t('JAVA_CONSOLE')"
              placement="top"
              trigger-keys>
              <p class="select-title">
                {{ $t('JAVA_CONSOLE') }}
              </p>
            </el-tooltip>
            <div class="java virtual-item">
              <div class="console-img home-style-icon-Java ibma-icon-style"></div>
              <el-divider class="console-divider" direction="vertical"></el-divider>
              <div class="console-select" :class="SystemIds.length === 2 ? 'ml-45' : ''">
                <el-tooltip
                  v-if="SystemIds.length !== 2 || (SystemIds.length !== 2 && virtualOptions.java[0].show)"
                  placement="top"
                  :content="$t('JAVA_CONSOLE')"
                  trigger-keys>
                  <p class="select-title">
                    {{ $t('JAVA_CONSOLE') }}
                  </p>
                </el-tooltip>
                <el-select
                  v-addId.select="'javaSelect'"
                  :suffix-icon="IconCaretDown"
                  :placeholder="$t('HOME_START_VIRMON_STATION')"
                  :disabled="
                    !hasRemoteControl ||
                      (virtualOptions.java[0].disabled && virtualOptions.java[1].disabled)
                  "
                  class="default-select"
                  @change="virtualClick"
                >
                  <el-option
                    v-for="item in virtualOptions.java"
                    v-show="item.show"
                    :id="item.id"
                    :key="item.id"
                    :label="$t(item.label)"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </template>
  <template v-if="webStyle === WebStyleType.SIMPLE">
    <div id="homeVirtualController" class="simple-style virtual-console background">
      <span v-t="'HOME_VIRTUALCONSOLE_TITLE'" class="title"></span>
      <el-tooltip placement="top" :content="$t('HOME_FDM_ALARM_SETTING')" trigger-keys>
        <span id="virtualSet" class="set virtual-button" @click="openKVMPage">
          <el-icon :size="16"><IconSetting /></el-icon>
        </span>
      </el-tooltip>
      <span v-if="hasRemoteControl" class="more-info">
        <span class="virtual-text">{{ $t('KVM_NOT_START_INFO_1') }}</span>
        <span
          :id="virtualOptions.more.id"
          :disabled="virtualOptions.more.disabled"
          @click="virtualClick(virtualOptions.more.id)"
        >
          <a v-t="'KVM_NOT_START_INFO_2'"></a>
        </span>
      </span>
      <div class="virtual-content">
        <div class="console-box">
          <el-tooltip
            v-if="SystemIds.length === 2"
            :content="$t('HTML5_CONSOLE')"
            placement="top"
            trigger-keys>
            <p class="select-title">
              {{ $t('HTML5_CONSOLE') }}
            </p>
          </el-tooltip>
          <div v-if="SystemIds.length === 2 && activatedSystemId === 1" class="active-tag host1">
            {{ $t('HOME_KVM_HOST_ACTIVE') }}
          </div>
          <div id="html5Console" class="html virtual-item">
            <div class="console-img home-style-icon-HTML simple-icon-style"></div>
            <el-divider class="console-divider" direction="vertical"></el-divider>
            <el-tooltip
              v-if="SystemIds.length === 2"
              :content="$t('HOME_HOST_0')"
              placement="top"
              trigger-keys>
              <p class="console-host">{{ $t('HOME_HOST_0') }}</p>
            </el-tooltip>
            <div class="console-select">
              <el-tooltip
                v-if="SystemIds.length !== 2 || (SystemIds.length !== 2 && virtualOptions.java[0].show)"
                placement="top"
                :content="$t('HTML5_CONSOLE')"
                trigger-keys>
                <p class="select-title">
                  {{ $t('HTML5_CONSOLE') }}
                </p>
              </el-tooltip>
              <el-select
                v-addId.select="'html5Select'"
                :suffix-icon="IconCaretDown"
                :placeholder="$t('HOME_START_VIRMON_STATION')"
                :disabled="
                  !hasRemoteControl ||
                    (virtualOptions.html5[0].disabled && virtualOptions.html5[1].disabled)
                "
                class="default-select"
                @change="virtualClick($event, 1)"
              >
                <el-option
                  v-for="item in virtualOptions.html5"
                  :id="item.id"
                  :key="item.id"
                  :label="$t(item.label)"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div v-if="SystemIds.length === 2" class="console-box">
          <div v-if="activatedSystemId === 2" class="active-tag host2">
            {{ $t('HOME_KVM_HOST_ACTIVE') }}
          </div>
          <div id="html5Console2" class="html virtual-item">
            <div class="console-img home-style-icon-HTML simple-icon-style"></div>
            <el-divider class="console-divider" direction="vertical"></el-divider>
            <el-tooltip
              :content="$t('HOME_HOST_1')"
              placement="top"
              trigger-keys>
              <p class="console-host">{{ $t('HOME_HOST_1') }}</p>
            </el-tooltip>
            <div class="console-select">
              <el-select
                v-addId.select="'html5Select'"
                :suffix-icon="IconCaretDown"
                :placeholder="$t('HOME_START_VIRMON_STATION')"
                :disabled="
                  !hasRemoteControl ||
                    (virtualOptions.html5Two[0].disabled && virtualOptions.html5Two[1].disabled)
                "
                class="default-select"
                @change="virtualClick($event, 2)"
              >
                <el-option
                  v-for="item in virtualOptions.html5Two"
                  :id="item.id"
                  :key="item.id"
                  :label="$t(item.label)"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div v-if="virtualOptions.java[0].show" id="javaConsole" class="console-box">
          <el-tooltip
            v-if="SystemIds.length === 2"
            :content="$t('JAVA_CONSOLE')"
            placement="top"
            trigger-keys>
            <p class="select-title">
              {{ $t('JAVA_CONSOLE') }}
            </p>
          </el-tooltip>
          <div class="java virtual-item">
            <div class="console-img home-style-icon-Java simple-icon-style"></div>
            <el-divider class="console-divider" direction="vertical"></el-divider>
            <div class="console-select" :class="SystemIds.length === 2 ? 'ml-45' : ''">
              <el-tooltip
                v-if="SystemIds.length !== 2 || (SystemIds.length !== 2 && virtualOptions.java[0].show)"
                placement="top"
                :content="$t('JAVA_CONSOLE')"
                trigger-keys>
                <p class="select-title">
                  {{ $t('JAVA_CONSOLE') }}
                </p>
              </el-tooltip>
              <el-select
                v-addId.select="'javaSelect'"
                :suffix-icon="IconCaretDown"
                :placeholder="$t('HOME_START_VIRMON_STATION')"
                :disabled="
                  !hasRemoteControl ||
                    (virtualOptions.java[0].disabled && virtualOptions.java[1].disabled)
                "
                class="default-select"
                @change="virtualClick"
              >
                <el-option
                  v-for="item in virtualOptions.java"
                  v-show="item.show"
                  :id="item.id"
                  :key="item.id"
                  :label="$t(item.label)"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <template v-if="webStyle === WebStyleType.BEAUTIFUL">
    <div id="homeVirtualController" class="beautiful-style virtual-console background">
      <span v-t="'HOME_VIRTUALCONSOLE_TITLE'" class="title"></span>
      <el-tooltip placement="top" :content="$t('HOME_FDM_ALARM_SETTING')" trigger-keys>
        <span id="virtualSet" class="set virtual-button" @click="openKVMPage">
          <el-icon :size="16"><IconSetting /></el-icon>
        </span>
      </el-tooltip>
      <span v-if="hasRemoteControl" class="more-info">
        <span class="virtual-text">{{ $t('KVM_NOT_START_INFO_1') }}</span>
        <span
          :id="virtualOptions.more.id"
          :disabled="virtualOptions.more.disabled"
          @click="virtualClick(virtualOptions.more.id)"
        >
          <a v-t="'KVM_NOT_START_INFO_2'"></a>
        </span>
      </span>
      <div v-if="resolution === Resolution.SMALL" class="virtual-content beautiful-sm-style">
        <div class="console-box">
          <el-tooltip
            v-if="SystemIds.length === 2"
            :content="$t('HTML5_CONSOLE')"
            placement="top"
            trigger-keys>
            <p class="select-title">
              {{ $t('HTML5_CONSOLE') }}
            </p>
          </el-tooltip>
          <div v-if="SystemIds.length === 2 && activatedSystemId === 1" class="active-tag host1">
            {{ $t('HOME_KVM_HOST_ACTIVE') }}
          </div>
          <div id="html5Console" class="html virtual-item">
            <div class="console-img home-style-icon-HTML beautiful-icon-style"></div>
            <el-divider class="console-divider" direction="vertical"></el-divider>
            <el-tooltip
              v-if="SystemIds.length === 2"
              :content="$t('HOME_HOST_0')"
              placement="top"
              trigger-keys>
              <p class="console-host">{{ $t('HOME_HOST_0') }}</p>
            </el-tooltip>
            <div class="console-select">
              <el-tooltip
                v-if="SystemIds.length !== 2 || (SystemIds.length !== 2 && virtualOptions.java[0].show)"
                placement="top"
                :content="$t('HTML5_CONSOLE')"
                trigger-keys>
                <p class="select-title">
                  {{ $t('HTML5_CONSOLE') }}
                </p>
              </el-tooltip>
              <el-select
                v-addId.select="'html5Select'"
                :suffix-icon="IconCaretDown"
                :placeholder="$t('HOME_START_VIRMON_STATION')"
                :disabled="
                  !hasRemoteControl ||
                    (virtualOptions.html5[0].disabled && virtualOptions.html5[1].disabled)
                "
                class="default-select"
                @change="virtualClick($event, 1)"
              >
                <el-option
                  v-for="item in virtualOptions.html5"
                  :id="item.id"
                  :key="item.id"
                  :label="$t(item.label)"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div v-if="SystemIds.length === 2" class="console-box">
          <div v-if="activatedSystemId === 2" class="active-tag host2">
            {{ $t('HOME_KVM_HOST_ACTIVE') }}
          </div>
          <div id="html5Console2" class="html virtual-item">
            <div class="console-img home-style-icon-HTML beautiful-icon-style"></div>
            <el-divider class="console-divider" direction="vertical"></el-divider>
            <el-tooltip
              :content="$t('HOME_HOST_1')"
              placement="top"
              trigger-keys>
              <p class="console-host">{{ $t('HOME_HOST_1') }}</p>
            </el-tooltip>
            <div class="console-select">
              <el-select
                v-addId.select="'html5Select'"
                :suffix-icon="IconCaretDown"
                :placeholder="$t('HOME_START_VIRMON_STATION')"
                :disabled="
                  !hasRemoteControl ||
                    (virtualOptions.html5Two[0].disabled && virtualOptions.html5Two[1].disabled)
                "
                class="default-select"
                @change="virtualClick($event, 2)"
              >
                <el-option
                  v-for="item in virtualOptions.html5Two"
                  :id="item.id"
                  :key="item.id"
                  :label="$t(item.label)"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div v-if="virtualOptions.java[0].show" id="javaConsole" class="console-box">
          <el-tooltip
            v-if="SystemIds.length === 2"
            :content="$t('JAVA_CONSOLE')"
            placement="top"
            trigger-keys>
            <p class="select-title">
              {{ $t('JAVA_CONSOLE') }}
            </p>
          </el-tooltip>
          <div class="java virtual-item">
            <div class="console-img home-style-icon-Java beautiful-icon-style"></div>
            <el-divider class="console-divider" direction="vertical"></el-divider>
            <div class="console-select" :class="SystemIds.length === 2 ? 'ml-45' : ''">
              <el-tooltip
                v-if="SystemIds.length !== 2 || (SystemIds.length !== 2 && virtualOptions.java[0].show)"
                :content="$t('JAVA_CONSOLE')"
                placement="top"
                trigger-keys>
                <p class="select-title">
                  {{ $t('JAVA_CONSOLE') }}
                </p>
              </el-tooltip>
              <el-select
                v-addId.select="'javaSelect'"
                :suffix-icon="IconCaretDown"
                :placeholder="$t('HOME_START_VIRMON_STATION')"
                :disabled="
                  !hasRemoteControl ||
                    (virtualOptions.java[0].disabled && virtualOptions.java[1].disabled)
                "
                class="default-select"
                @change="virtualClick"
              >
                <el-option
                  v-for="item in virtualOptions.java"
                  v-show="item.show"
                  :id="item.id"
                  :key="item.id"
                  :label="$t(item.label)"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="virtual-content">
        <div class="console-box">
          <el-tooltip
            v-if="SystemIds.length === 2"
            :content="$t('HTML5_CONSOLE')"
            placement="top"
            trigger-keys>
            <p class="select-title">
              {{ $t('HTML5_CONSOLE') }}
            </p>
          </el-tooltip>
          <div v-if="SystemIds.length === 2 && activatedSystemId === 1" class="active-tag host1">
            {{ $t('HOME_KVM_HOST_ACTIVE') }}
          </div>
          <div id="html5Console" class="html virtual-item">
            <div class="console-img home-style-icon-HTML beautiful-icon-style"></div>
            <el-divider class="console-divider" direction="vertical"></el-divider>
            <el-tooltip
              v-if="SystemIds.length === 2"
              :content="$t('HOME_HOST_0')"
              placement="top"
              trigger-keys>
              <p class="console-host">{{ $t('HOME_HOST_0') }}</p>
            </el-tooltip>
            <div class="console-select">
              <el-tooltip
                v-if="SystemIds.length !== 2 || (SystemIds.length !== 2 && virtualOptions.java[0].show)"
                placement="top"
                :content="$t('HTML5_CONSOLE')"
                trigger-keys>
                <p class="select-title">
                  {{ $t('HTML5_CONSOLE') }}
                </p>
              </el-tooltip>
              <el-select
                v-addId.select="'html5Select'"
                :suffix-icon="IconCaretDown"
                :placeholder="$t('HOME_START_VIRMON_STATION')"
                :disabled="
                  !hasRemoteControl ||
                    (virtualOptions.html5[0].disabled && virtualOptions.html5[1].disabled)
                "
                class="default-select"
                @change="virtualClick($event, 1)"
              >
                <el-option
                  v-for="item in virtualOptions.html5"
                  :id="item.id"
                  :key="item.id"
                  :label="$t(item.label)"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div v-if="SystemIds.length === 2" class="console-box">
          <div v-if="activatedSystemId === 2" class="active-tag host2">
            {{ $t('HOME_KVM_HOST_ACTIVE') }}
          </div>
          <div id="html5Console2" class="html virtual-item">
            <div class="console-img home-style-icon-HTML beautiful-icon-style"></div>
            <el-divider class="console-divider" direction="vertical"></el-divider>
            <el-tooltip
              :content="$t('HOME_HOST_1')"
              placement="top"
              trigger-keys>
              <p class="console-host">{{ $t('HOME_HOST_1') }}</p>
            </el-tooltip>
            <div class="console-select">
              <el-select
                v-addId.select="'html5Select'"
                :suffix-icon="IconCaretDown"
                :placeholder="$t('HOME_START_VIRMON_STATION')"
                :disabled="
                  !hasRemoteControl ||
                    (virtualOptions.html5Two[0].disabled && virtualOptions.html5Two[1].disabled)
                "
                class="default-select"
                @change="virtualClick($event, 2)"
              >
                <el-option
                  v-for="item in virtualOptions.html5Two"
                  :id="item.id"
                  :key="item.id"
                  :label="$t(item.label)"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div v-if="virtualOptions.java[0].show" id="javaConsole" class="console-box">
          <el-tooltip
            v-if="SystemIds.length === 2"
            :content="$t('JAVA_CONSOLE')"
            placement="top"
            trigger-keys>
            <p class="select-title">
              {{ $t('JAVA_CONSOLE') }}
            </p>
          </el-tooltip>
          <div class="java virtual-item">
            <div class="console-img home-style-icon-Java beautiful-icon-style"></div>
            <el-divider class="console-divider" direction="vertical"></el-divider>
            <div class="console-select" :class="SystemIds.length === 2 ? 'ml-45' : ''">
              <el-tooltip
                v-if="SystemIds.length !== 2 || (SystemIds.length !== 2 && virtualOptions.java[0].show)"
                placement="top"
                :content="$t('JAVA_CONSOLE')"
                trigger-keys>
                <p class="select-title">
                  {{ $t('JAVA_CONSOLE') }}
                </p>
              </el-tooltip>
              <el-select
                v-addId.select="'javaSelect'"
                :suffix-icon="IconCaretDown"
                :placeholder="$t('HOME_START_VIRMON_STATION')"
                :disabled="
                  !hasRemoteControl ||
                    (virtualOptions.java[0].disabled && virtualOptions.java[1].disabled)
                "
                class="default-select"
                @change="virtualClick"
              >
                <el-option
                  v-for="item in virtualOptions.java"
                  v-show="item.show"
                  :id="item.id"
                  :key="item.id"
                  :label="$t(item.label)"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>

  <VirtualDialog
    v-if="dialogVisible"
    :visible="dialogVisible"
    :jvmVisible="jvmVisible"
    :data="props.data"
    @dialog-close="dialogClose"
  ></VirtualDialog>
</template>

<style lang="scss" scoped>
.virtual-console {
  width: 374px;
  float: right;
  height: 100%;
  margin-left: 16px;
  padding: 24px 24px 32px;
  .inline-block {
    display: inline-block;
    vertical-align: middle;
  }

  .virtual-text {
    margin-left: 8px;
    color: var(--o-text-color-tertiary);
  }

  .more-info {
    margin-top: 8px;
    a {
      cursor: pointer;
      color: var(--o-color-primary);
      margin-left: 4px;
      text-decoration: none;
    }
  }

  .more-info-small {
    margin-top: 8px;
    a {
      cursor: pointer;
      color: var(--o-color-primary);
      margin-left: 4px;
    }
  }

  .common-font-size-big4 {
    font-size: 20px;
  }

  .float-left {
    float: left;
  }

  .float-right {
    float: right;
  }

  .virtual-icon {
    width: 16px;
    height: 16px;
    color: var(--o-text-color-tertiary);
  }

  .container {
    overflow: auto;
    height: 100%;
    position: relative;
  }

  .virtual-content {
    .virtual-item {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background: var(--o-bg-color-light);
      border-radius: 4px;

      .btnDisabled {
        cursor: not-allowed;
        background: var(--o-bg-color-placeholder);
        .mode-text {
          color: var(--o-color-placeholder) !important;
        }
        .alone-svg {
          background: url(/src/assets/assets-bmc/default/alone-disable.svg) no-repeat !important;
        }

        .share-svg {
          background: url(/src/assets/assets-bmc/default/share-disable.svg) no-repeat !important;
        }
      }
    }
    .console-box {
      margin-top: 8px;
      position: relative;
      .active-tag {
        position: absolute;
        right: 0px;
        background: #67c23a;
        color: white;
        padding: 2px 6px;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 5px rgba(46, 204, 113, 0.3);
        z-index: 10;
        &.host1 {
          top: 24px;
        }
        &.host2 {
          top: 0px;
        }
      }
    }
    .console-img {
      margin-left: 20px;
      height: 40px;
      width: 40px;
      image-rendering: -moz-crisp-edges;
      image-rendering: -o-crisp-edges;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      -ms-interpolation-mode: nearest-neighbor;
      background-size: cover !important;
      flex-shrink: 0;
      &.margin {
        margin: 28px 16px 28px 24px;
      }
    }
    .html5-img {
      background: url(/src/assets/assets-bmc/default/home-html5-console.svg) no-repeat;
      .icon {
        color: red !important;
      }
    }
    .java-img {
      background: url(/src/assets/assets-bmc/default/home-java-console.svg) no-repeat;
    }

    .console-divider {
      height: 24px;
      &.mv-20 {
        margin: 0 20px;
      }
      &.mr-24 {
        margin-right: 24px;
      }
    }
    .console-host {
      white-space: nowrap;
      overflow: hidden;
      font-size: 12px;
      line-height: 18px;
      text-overflow: ellipsis;
      margin-right: 8px;
    }

    .console-select {
      margin: 8px 8px 12px 8px;
      width: calc(100% - 129px);
      &.ml-45 {
        margin-left: 45px;
      }
      p {
        white-space:nowrap; 
        overflow:hidden;
        font-size: 16px;
        line-height: 24px;
        text-overflow: ellipsis;
      }
      .standard-input {
        width: 250px;
      }
      .select-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .default-select{
      width: 148px;
    }
  }

  .virtual-button {
    display: flex;
    border: 1px solid var(--o-border-color-lighter);
    border-radius: 2px;
    width: fit-content;
    cursor: pointer;
    float: right;
    &:hover {
      border: 1px solid var(--o-color-primary-secondary);
      .el-icon {
        color: var(--o-color-primary-secondary);
      }
    }
    .el-icon {
      color: var(--o-text-color-tertiary);
      margin: 4px;
    }
  }

  .start {
    left: 16px;
    width: 164px;
    .text {
      margin-left: 7px;
      margin-right: 7px;
    }
  }

  .text {
    font-size: 12px;
    line-height: 16px;
    color: var(--o-text-color-tertiary);
    display: inline-block;
  }

  .virtual-menu {
    width: 208px;
    position: absolute;
    bottom: 52px;
    left: 16px;
    font-size: 12px;
    line-height: 16px;
    padding-top: 4px;
    padding-bottom: 7px;
    text-align: left;
    border-radius: 4px;
    background: var(--o-bg-color-base);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.24);
    cursor: pointer;
    li {
      padding-bottom: 3px;
      padding-top: 3px;
      &:hover {
        background: $APP-COLOR-HOVER;
        color: var(--o-color-white);
      }
      span {
        margin-left: 16px;
        line-height: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
}
.hide{
  display: none;
}
.standard-mid-style {
  padding: 0;
  margin: 0;
  width: 100%;
  .more-info {
    margin-top: 5px;
  }
  .virtual-content {
    .virtual-item {
      flex-direction: row;
      display: flex;
      flex-wrap: wrap;
      .console-title {
        color: var(--el-color-black);
        width: 100%;
      }
      .console-mode-interval {
        margin-right: 16px;
      }
      .console-mode {
        flex: 1;
      }
      .console-select {
        .standard-input {
          margin-top: 2px;
        }
      }
    }
    .console-select {
      p {
        line-height: 22px;
      }
    }
  }
}

.standard-sm-style {
  padding: 0;
  margin: 0;
  width: 100%;
}

.ibma-mid-style {
  padding: 0;
  margin: 0;
  width: 100%;
  .virtual-content {
    .virtual-item {
      flex-direction: row;
      display: flex;
      flex-wrap: wrap;
      .console-title {
        width: 100%;
      }
      .console-mode-interval {
        margin-right: 16px;
      }
      .console-mode {
        flex: 1;
      }
      .console-select {
        .el-select {
          margin-top: 2px;
          width: 191px;
        }
      }
      p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.ibma-sm-style {
  padding: 0;
  margin: 0;
  width: 100%;
  .virtual-content {
    .virtual-item {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background: var(--o-bg-color-light);
      border-radius: 4px;
    }
  }
}

.simple-style {
  padding: 0;
  margin: 0;
  width: 100%;
}

.beautiful-style {
  padding: 0;
  margin: 0;
  width: 100%;
  .console-title {
    color: var(--el-color-black) !important;
  }
  #h5Only {
    margin-top: 8px;
  }

  .virtual-content {
    .el-select {
      width: 157px;
    }
  }
  .beautiful-sm-style{
    .virtual-item {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background: var(--o-bg-color-light);
      border-radius: 4px;
    }
    .console-img{
      margin: 0;
    }
  }
}

.home-style-icon-HTML {
  &:before {
    font-size: 40px;
  }
}

.home-style-icon-Java {
  &:before {
    font-size: 40px;
  }
}

.beautiful-icon-style {
  color: #485cc7;
}
.simple-icon-style {
  color: var(--o-text-color-tertiary);
}
.ibma-icon-style {
  color: #163a94;
}
.standard-icon-style {
  margin: 16px 8px 16px 16px !important;
  color: #1d7ddf;
}

#html5ConsoleStandardSm {
  width: 100%;
}
#html5ConsoleStandard {
  width: 100%;
}
</style>
