<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { loading } from '@/utils/composition';
import { ElMessage } from 'element-plus';
import { getPortInfo } from '@/services/port-service';
import { getGenericInfo } from '@/services/header/header.service';
// @ts-ignore
import RFB from '@novnc/novnc/lib/rfb';
// @ts-ignore
import * as KeySym from '@novnc/novnc/lib/input/keysym';
import { traduction } from '@/utils/language';
import { Warning } from '@element-plus/icons-vue';
import {
  IconExpand,
  IconLessen,
  IconSetting,
} from '@computing/opendesign-icons';
import { getVncData, editVncData } from '@/pages/Service/Vnc/vnc.server';
import { showElMessage } from '@/utils/utils';
import Dialog from '@/components/Dialog/Dialog.vue';

const vncPassword = ref('');
const vncMode = ref('shared');
const activatedSystemId = ref(0);
const vncHost = ref(1);
const successMsg = traduction('COMMON_SUCCESS');
const errorMsg = traduction('COMMON_FAILED');
const screen = ref(null);
const screenHeight = ref(768);
const screenWidth = ref(1024);
const cachedWidth = ref(1024);
const cachedHeight = ref(768);
const defaultWidth = ref(1024);
const defaultHeight = ref(768);
const webVncPort = ref(6100);
const systemIds: any = ref([]);
const rfb = ref(null);
const isConnected = ref(false);
const vncToolBar = reactive({
  fullscreenTitle: 'REMOTE_FULL_TIP',
  infoTitle: 'VNC_INFO',
  settings: 'VNC_WEB_SETTING',
});
const isExpand = ref(false);
const isFixed = ref(true);
const isFullscreen = ref(false);
const floatTimer = ref(null as any);
const infoDialogVisible = ref(false);
const dialogRef = ref();
const dialogConfig = reactive({
  title: traduction('COMMON_INFORMATION'),
  content: traduction('VNC_HOST_DIFFERENT_CONFIRM'),
  type: 'warning',
  okButton: { label: traduction('COMMON_OK') },
  cancelButton: { label: traduction('COMMON_CANCEL') },
});
const vncInfo = reactive({
  desktopName: '',
  vncServer: '',
  size: '',
  lastUsedEncoding: '',
  protocolVersion: '',
  securityMethod: '',
  connectionType: '',
});

const vncInfoHasValue = reactive({
  desktopName: false,
  vncServer: false,
  size: false,
  lastUsedEncoding: false,
  protocolVersion: false,
  securityMethod: false,
  connectionType: false,
});
const toggleFullscreen = async () => {
  const [isFs, el] = supportFullscreen();
  if (!el) {
    vncToolBar.fullscreenTitle = 'REMOTE_FULL_TIP_NOT_SUPPORT';
    return;
  }

  if (!isFs) {
    cachedWidth.value = screenWidth.value;
    cachedHeight.value = screenHeight.value;
    const req =
      el.requestFullscreen ||
      el.mozRequestFullScreen ||
      el.webkitRequestFullscreen ||
      el.msRequestFullscreen;
    if (req) {
      await req.call(el);
      isFullscreen.value = true;
      vncToolBar.fullscreenTitle = 'REMOTE_EXIT_FULL_TIP';
      nextTick(() => {
        screenHeight.value = window.screen.height;
        screenWidth.value = window.screen.width;
      });
    } else {
      vncToolBar.fullscreenTitle = 'REMOTE_FULL_TIP_NOT_SUPPORT';
    }
  } else {
    const exit =
      document.exitFullscreen ||
      (document as any).mozCancelFullScreen ||
      (document as any).webkitExitFullscreen ||
      (document as any).msExitFullscreen;
    if (exit) {
      await exit.call(document);
    }
  }
};

const bindFullscreenMouseMove = () => {
  const divFullscreen = document.getElementById('divFullscreen') as HTMLElement;
  if (divFullscreen) {
    divFullscreen.onmousemove = (e: MouseEvent) => {
      areaDetection(e);
    };
  }
};

const unbindFullscreenMouseMove = () => {
  const divFullscreen = document.getElementById('divFullscreen') as HTMLElement;
  if (divFullscreen) {
    divFullscreen.onmousemove = null;
  }
};

const handleFullscreenChange = () => {
  const isFsNow = !!(
    document.fullscreenElement ||
    (document as any).mozFullScreenElement ||
    (document as any).webkitFullscreenElement ||
    (document as any).msFullscreenElement
  );
  isFullscreen.value = isFsNow;
  if (isFsNow) {
    vncToolBar.fullscreenTitle = 'REMOTE_EXIT_FULL_TIP';
    if (rfb.value) {
      const display = rfb.value.getDisplay();
      if (display?.canvas) {
        const ratio = display.canvas.width / display.canvas.height;
        const winWidth = window.innerWidth;
        const winHeight = window.innerHeight;
        const finalWidth = Math.min(winWidth, winHeight * ratio);
        const finalHeight = Math.min(winHeight, winWidth / ratio);
        screenWidth.value = finalWidth;
        screenHeight.value = finalHeight;
      }
    }
    nextTick(() => {
      bindFullscreenMouseMove();
    });
  } else {
    vncToolBar.fullscreenTitle = 'REMOTE_FULL_TIP';
    screenWidth.value = cachedWidth.value;
    screenHeight.value = cachedHeight.value;
    unbindFullscreenMouseMove();
  }
  if (rfb.value) {
    nextTick(() => {
      rfb.value!.scaleViewport = true;
    });
  }
};
const doConnectVnc = () => {
  if (isConnected.value) {
    return;
  }
  loading(true);
  if (rfb.value) {
    rfb.value.removeAllEventListeners();
    rfb.value.disconnect();
    rfb.value = null;
  }
  try {
    const url = `wss://${window.location.host}:${webVncPort.value}/websocket/vnc`;
    const rfbBox = new RFB(screen.value, url, {
      credentials: { password: vncPassword.value },
      shared: vncMode.value === 'shared',
    });
    rfbBox.addEventListener('connect', connectedToServer);
    rfbBox.addEventListener('disconnect', disconnectedFromServer);
    rfbBox.addEventListener('resize', resizeback);
    rfbBox.addEventListener('securityfailure', handleSecurityFailure);
    rfbBox.scaleViewport = true;
    rfbBox.resizeSession = true;
    rfb.value = rfbBox;
    loading(false);
  } catch (error) {
    loading(false);
    ElMessage.error(traduction('VNC_CONNECTION_FAILED') );
  }
};

const handleHostChangeConfirm = async () => {
  let params = {
    ActivatedSystemId: vncHost.value,
  };
  try {
    await editVncData(params);
    showElMessage('success', successMsg);
    activatedSystemId.value = vncHost.value;
    doConnectVnc();
  } catch (error: any) {
    const code = error?.data?.error?.[0]?.code;
    if (code) {
      const errorMessage = code + '.errorMessage';
      showElMessage('error', traduction(errorMessage));
      return;
    }
    showElMessage('error', errorMsg);
  }
};

const closeDialog = (reason: boolean) => {
  dialogRef.value.hide();
  if (reason) {
    handleHostChangeConfirm();
  }
};

const connectVnc = async () => {
  if (!vncPassword.value) {
    return;
  }
  // 判断systemIds是否双主机，activatedSystemId和vncHost的值是否相同
  if (systemIds.value.length === 2 && activatedSystemId.value !== vncHost.value) {
    dialogRef.value.show();
  } else {
    doConnectVnc();
  }
};
const connectedToServer = () => {
  rfb.value.sendKey(KeySym.XK_Control_L, 'ControlLeft', false);
  rfb.value.sendKey(KeySym.XK_Shift_L, 'ShiftLeft', false);
  rfb.value.sendKey(KeySym.XK_Alt_L, 'AltLeft', false);
  isConnected.value = true;
  localStorage.setItem('vncConnected', JSON.stringify(true));
  loading(false);
  // 重写cursor.clear方法,支持双鼠标显示
  const rfbObj = rfb.value as any;
  if (rfbObj?._cursor && typeof rfbObj._cursor.clear === 'function') {
    const cursorObj = rfbObj._cursor;
    const display = rfbObj.getDisplay?.();
    const targetElement = cursorObj._target || display?.canvas?.parentElement || screen.value;
    if (targetElement) {
      targetElement.style.cursor = 'auto';
    }
  }
  nextTick(() => {
    const display = rfbObj.getDisplay?.();
    const canvas = display?.canvas;
    if (canvas) {
      (canvas as HTMLElement).onmousemove = (e: MouseEvent) => {
        areaDetection(e);
      };
    } else {
      const screenElement = screen.value as HTMLElement;
      if (screenElement) {
        const canvasElement = screenElement.querySelector('canvas');
        if (canvasElement) {
          (canvasElement as HTMLElement).onmousemove = (e: MouseEvent) => {
            areaDetection(e);
          };
        }
      }
    }
    if (isFullscreen.value) {
      bindFullscreenMouseMove();
    }
  });
};
const disconnectedFromServer = () => {
  isConnected.value = false;
  localStorage.removeItem('vncConnected');
  loading(false);
};
const handleSecurityFailure = (e: any) => {
  isConnected.value = false;
  loading(false);
  ElMessage.error(traduction('VNC_SECURITY_FAILURE'));
};

const resizeback = (e: any) => {
  let originalWidth = e.detail.width;
  let originalHeight = e.detail.height;
  const { width: targetWidth, height: targetHeight } = calculateProportionalSize(
    originalWidth,
    originalHeight,
    defaultHeight.value,
  );
  screenWidth.value = targetWidth;
  screenHeight.value = targetHeight;
  if (!isFullscreen.value) {
    cachedWidth.value = targetWidth;
    cachedHeight.value = targetHeight;
  }
  if (rfb.value) {
    rfb.value!.scaleViewport = true;
  }
};

const calculatedCoordinate = (e: MouseEvent) => {
  if (typeof (e as any).offsetX !== 'undefined' && typeof (e as any).offsetY !== 'undefined') {
    return {
      offsetX: (e as any).offsetX,
      offsetY: (e as any).offsetY,
    };
  }
  const target = e.target || (e as any).srcElement;
  const rect = (target as HTMLElement).getBoundingClientRect();
  return {
    offsetX: e.clientX - rect.left,
    offsetY: e.clientY - rect.top,
  };
};

const areaDetection = (e: MouseEvent) => {
  if (!isConnected.value || isFixed.value) {
    return;
  }
  
  const coords = calculatedCoordinate(e);
  
  const toolbarWidth = 240;
  const xStart = (screenWidth.value - toolbarWidth) / 2;
  const xEnd = ((screenWidth.value - toolbarWidth) / 2) + toolbarWidth;
  const xStartFull = (window.innerWidth - toolbarWidth) / 2;
  const xEndFull = ((window.innerWidth - toolbarWidth) / 2) + toolbarWidth;
  
  if (isFullscreen.value) {
    const isInFullscreenToolbarX = e.clientX > xStartFull && e.clientX < xEndFull;
    const isInFullscreenToolbarY = e.clientY > 0 && e.clientY < 24;
    if (isInFullscreenToolbarX && isInFullscreenToolbarY) {
      const floatToolbar = document.getElementById('toolbar') as HTMLElement;
      if (floatToolbar) {
        floatToolbar.style.display = 'block';
      }
    }
  } else {
    const isInToolbarX = coords.offsetX > xStart && coords.offsetX < xEnd;
    const isInToolbarY = coords.offsetY > 0 && coords.offsetY < 4;
    if (isInToolbarX && isInToolbarY) {
      const floatToolbar = document.getElementById('toolbar') as HTMLElement;
      if (floatToolbar) {
        floatToolbar.style.display = 'block';
      }
    }
  }
};


const handleToolbarMouseOut = () => {
  if (!isFixed.value) {
    floatTimer.value = setTimeout(() => {
      const toolbar = document.getElementById('toolbar') as HTMLElement;
      if (toolbar) {
        toolbar.style.display = 'none';
      }
    }, 1000);
  }
};

const handleToolbarMouseOver = () => {
  if (!isFixed.value) {
    if (floatTimer.value) {
      clearTimeout(floatTimer.value);
      floatTimer.value = null;
    }
  }
};
const calculateProportionalSize = (
  originalWidth: number,
  originalHeight: number,
  targetHeight = defaultHeight.value,
) => {
  if (originalWidth === 0 || originalHeight === 0) {
    return { width: defaultWidth.value, height: defaultHeight.value };
  }
  const maxHeight = window.innerHeight;

  const scaleByHeight = Math.min(Math.max(targetHeight / originalHeight, 0.1), 10);
  let scaledWidth = Math.floor(originalWidth * scaleByHeight);
  let scaledHeight = Math.floor(originalHeight * scaleByHeight);

  if (scaledHeight > maxHeight) {
    const scaleByView = maxHeight / scaledHeight;
    scaledWidth = Math.floor(scaledWidth * scaleByView);
    scaledHeight = Math.floor(scaledHeight * scaleByView);
  }

  return { width: scaledWidth, height: scaledHeight };
};
function supportFullscreen() {
  const docElm = document.getElementById('vncFullscreenRoot');
  const el = docElm as HTMLElement & {
    mozRequestFullScreen: () => Promise<void>;
    webkitRequestFullscreen: () => Promise<void>;
    msRequestFullscreen: () => Promise<void>;
  };
  const fullscreen =
    // W3C
    document.fullscreenElement ||
    // IE
    (document as any).msFullscreenElement ||
    // 火狐
    (document as any).mozFullScreenElement ||
    // 谷歌
    (document as any).webkitFullscreenElement ||
    false;
  return [fullscreen, el];
};
const getSecurityMethod = (authScheme: number): string => {
  if (authScheme === 0) {
    return 'no encryption';
  } else if (authScheme === 1) {
    return 'no encryption [VncAuth]';
  } else if (authScheme === 2) {
    return 'VncAuth';
  } else if (authScheme === 16) {
    return 'Tight';
  } else if (authScheme === 19) {
    return 'VeNCrypt';
  } else if (authScheme === 22) {
    return 'XVP';
  } else {
    return 'Unknown';
  }
};

const getEncodingName = (encoding: number | null | undefined): string => {
  const encodingMap: Record<number | string, string> = {
    0: 'Raw',
    1: 'CopyRect',
    2: 'RRE',
    5: 'Hextile',
    7: 'Tight',
    '-260': 'TightPNG',
    '-223': 'DesktopSize',
    '-224': 'LastRect',
    '-239': 'Cursor',
    '-307': 'DesktopName',
    '-308': 'ExtendedDesktopSize',
    '-309': 'XVP',
    '-312': 'Fence',
    '-313': 'ContinuousUpdates',
    default: 'Unknown',
  };
  if (encoding !== null && encoding !== undefined) {
    return encodingMap[encoding] || encodingMap.default;
  }
  return 'JPEG';
};

const getVncInfo = () => {
  Object.keys(vncInfo).forEach((key: string) => {
    (vncInfo as any)[key] = '';
    (vncInfoHasValue as any)[key] = false;
  });
  if (!rfb.value) {
    return;
  }
  const rfbObj = rfb.value as any;
  if (rfbObj._fbName || rfbObj._desktopName) {
    vncInfo.desktopName = rfbObj._fbName || rfbObj._desktopName;
    vncInfoHasValue.desktopName = true;
  }
  vncInfo.vncServer = `${window.location.host}:${webVncPort.value}`;
  vncInfoHasValue.vncServer = true;
  if (rfbObj._fbWidth && rfbObj._fbHeight) {
    vncInfo.size = `${rfbObj._fbWidth} x ${rfbObj._fbHeight}`;
    vncInfoHasValue.size = true;
  }
  if (rfbObj._FBU?.encoding !== null && rfbObj._FBU?.encoding !== undefined) {
    const lastEncoding = rfbObj._FBU.encoding;
    const encodingName = getEncodingName(lastEncoding);
    if (encodingName && encodingName !== 'JPEG') {
      vncInfo.lastUsedEncoding = encodingName;
      vncInfoHasValue.lastUsedEncoding = true;
    }
  }
  if (rfbObj._rfbVersion !== undefined && rfbObj._rfbVersion !== null) {
    vncInfo.protocolVersion = rfbObj._rfbVersion.toFixed(1);
    vncInfoHasValue.protocolVersion = true;
  }
  if (rfbObj._rfbAuthScheme !== undefined && rfbObj._rfbAuthScheme !== null && rfbObj._rfbAuthScheme !== -1) {
    const authScheme = rfbObj._rfbAuthScheme;
    const securityMethod = getSecurityMethod(authScheme);
    if (securityMethod && securityMethod !== 'Unknown') {
      vncInfo.securityMethod = securityMethod;
      vncInfoHasValue.securityMethod = true;
    }
  }
  if (rfbObj._url) {
    vncInfo.connectionType = 'WebSocket';
    vncInfoHasValue.connectionType = true;
  }
};

const openInfoDialog = () => {
  if (!isConnected.value) {
    ElMessage.warning(traduction('VNC_NOT_CONNECTED'));
    return;
  }
  getVncInfo();
  infoDialogVisible.value = true;
};

const getWebVncPort = async () => {
  const portsList = await getPortInfo();
  const webVnc = portsList.find(item => item.name === 'WEBVNC');
  if (webVnc?.port1) {
    webVncPort.value = webVnc.port1;
  }
};

onMounted(()=>{
  document.addEventListener('fullscreenchange', handleFullscreenChange);
  document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
  document.addEventListener('mozfullscreenchange', handleFullscreenChange);
  document.addEventListener('MSFullscreenChange', handleFullscreenChange);
  const [, el] = supportFullscreen();
  if (!el) {
    vncToolBar.fullscreenTitle = 'REMOTE_FULL_TIP_NOT_SUPPORT';
  }
  getGenericInfo().then((res: any) => {
    systemIds.value = res.SystemIds;
  });
  getWebVncPort();
  getVncData().then((res: any) => {
    activatedSystemId.value = res.ActivatedSystemId;
    vncHost.value = res.ActivatedSystemId;
  });
});

onBeforeUnmount(() => {
  document.removeEventListener('fullscreenchange', handleFullscreenChange);
  document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
  document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
  document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
  unbindFullscreenMouseMove();
  if (floatTimer.value) {
    clearTimeout(floatTimer.value);
    floatTimer.value = null;
  }
  if (rfb.value) {
    rfb.value.removeAllEventListeners();
    rfb.value.disconnect();
    rfb.value = null;
  }
  isConnected.value = false;
});
</script>

<template>
  <div id="vncFullscreenRoot" class="vnc-container">
    <div class="screen-container">
      <div
        v-show="!isConnected"
        ref="screenTip"
        class="screen-tip"
        :style="{ height: defaultHeight + 'px', width: defaultWidth + 'px' }"
      >
        <div class="vnc-form-container">
          <div class="vnc-header">
            <div class="vnc-welcome"> {{ $t('VNC_WELCOME') }}</div>
            <div class="vnc-title">VNC</div>
          </div>
          <el-form
            ref="vncFormRef"
            :model="{ password: vncPassword }"
            label-position="left"
            label-width="auto"
            class="vnc-form"
          >
            <el-form-item>
              <el-input
                v-model="vncPassword"
                type="password"
                :placeholder="$t('VNC_PASSWORD_INPUT')"
                class="vnc-password-input"
                @keyup.enter="connectVnc"
              />
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="vncMode"
                class="vnc-mode-select"
                :placeholder="$t('VNC_MODE_TIP')"
              >
                <el-option :label="$t('VNC_MODE_SHARED')" value="shared" />
                <el-option :label="$t('VNC_MODE_EXCLUSIVE')" value="exclusive" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="systemIds.length === 2">
              <el-select
                v-model="vncHost"
                class="vnc-mode-select"
                :placeholder="$t('HOME_HOST')"
              >
                <el-option :label="$t('HOME_HOST_0')" :value="1" />
                <el-option :label="$t('HOME_HOST_1')" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                class="vnc-connect-btn"
                :disabled="!vncPassword"
                @click="connectVnc"
              >
                {{ $t('VNC_CONNECT') }}
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div
        v-show="isConnected"
        id="divFullscreen"
        ref="divFullscreen"
        :class="{ 'fullscreen-mode': isFullscreen }"
      >
        <div 
          id="toolbar" 
          class="float-toolbar"
          @mouseout="handleToolbarMouseOut"
          @mouseover="handleToolbarMouseOver"
        >
          <div class="float-toolbar-panel">
            <ul class="main-menu">
              <li id="btn_float" @click="isFixed = !isFixed">
                <el-tooltip
                  :content="$t('REMOTE_BUTTION_FLOAT')"
                  placement="bottom"
                  :append-to-body="false"
                  :hide-after="0"
                  transition="none"
                  trigger-keys
                >
                  <el-icon class="main-menu-item" size="16">
                    <i v-if="isFixed" class="html5-icon-uniE901"></i>
                    <i v-else class="html5-icon-2"></i>
                  </el-icon>
                </el-tooltip>
                <span
                  v-if="isExpand"
                  v-t="'REMOTE_BUTTION_FLOAT'"
                  class="expand-title"
                ></span>
              </li>
              <li
                id="btn_fullscreen"
                :disabled="vncToolBar.fullscreenTitle === 'REMOTE_FULL_TIP_NOT_SUPPORT'"
                @click="toggleFullscreen"
              >
                <el-tooltip
                  :content="$t(vncToolBar.fullscreenTitle)"
                  placement="bottom"
                  :append-to-body="false"
                  :hide-after="0"
                  transition="none"
                  trigger-keys
                >
                  <el-icon class="main-menu-item" size="16">
                    <IconExpand v-if="vncToolBar.fullscreenTitle !== 'REMOTE_EXIT_FULL_TIP'" />
                    <IconLessen v-else />
                  </el-icon>
                </el-tooltip>
              </li>
              <li
                id="btn_info"
                @click="openInfoDialog"
              >
                <el-tooltip
                  :content="$t(vncToolBar.infoTitle)"
                  placement="bottom"
                  :append-to-body="false"
                  :hide-after="0"
                  transition="none"
                  trigger-keys
                >
                  <el-icon class="main-menu-item" size="16">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </li>
              <li
                id="btn_settings"
              >
                <el-tooltip
                  :content="$t(vncToolBar.settings)"
                  placement="bottom"
                  :append-to-body="false"
                  :hide-after="0"
                  transition="none"
                  trigger-keys
                >
                  <el-icon class="main-menu-item" size="16">
                    <IconSetting />
                  </el-icon>
                </el-tooltip>
              </li>
            </ul>
          </div>
        </div>
        <div 
          ref="screen" 
          class="screen" 
          :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
        ></div>
      </div>
    </div>
    <el-dialog
      v-model="infoDialogVisible"
      :title="$t('VNC_INFO')"
      width="600px"
      :close-on-click-modal="false"
      :append-to-body="false"
      destroy-on-close
    >
      <div class="vnc-info-container">
        <table class="vnc-info-table">
          <tbody>
            <tr v-if="vncInfoHasValue.desktopName">
              <td class="info-label">Desktop name:</td>
              <td class="info-value">{{ vncInfo.desktopName }}</td>
            </tr>
            <tr v-if="vncInfoHasValue.vncServer">
              <td class="info-label">VNC Server:</td>
              <td class="info-value">{{ vncInfo.vncServer }}</td>
            </tr>
            <tr v-if="vncInfoHasValue.size">
              <td class="info-label">Size:</td>
              <td class="info-value">{{ vncInfo.size }}</td>
            </tr>
            <tr v-if="vncInfoHasValue.lastUsedEncoding">
              <td class="info-label">Last-used encoding:</td>
              <td class="info-value">{{ vncInfo.lastUsedEncoding }}</td>
            </tr>
            <tr v-if="vncInfoHasValue.protocolVersion">
              <td class="info-label">Protocol version:</td>
              <td class="info-value">{{ vncInfo.protocolVersion }}</td>
            </tr>
            <tr v-if="vncInfoHasValue.securityMethod">
              <td class="info-label">Security method:</td>
              <td class="info-value">{{ vncInfo.securityMethod }}</td>
            </tr>
            <tr v-if="vncInfoHasValue.connectionType">
              <td class="info-label">Connection type:</td>
              <td class="info-value">{{ vncInfo.connectionType }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-dialog>
    <Dialog ref="dialogRef" :config="dialogConfig" @close="closeDialog" />
  </div>
</template>

<style scoped lang="scss">
.vnc-container {
  width: 100%;
  min-height: 100%;
}
.screen-container {
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 24px;
  #divFullscreen {
    border: 1px solid #ffffff;
    border-radius: 4px;
    background: var(--o-bg-color-light);
    box-sizing: border-box;
    padding: 24px;
    display: inline-block;
    position: relative;
    &.fullscreen-mode {
      border: none;
      padding: 0;
      border-radius: 0;
      background: #000;
    }
  }
  .screen {
    background:var(--o-bg-color-light);
    display: block;
  }
  .screen-tip {
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    width: 100%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
  }
  .el-icon {
    color: #ffffff;
  }
  .el-icon:hover {
    color: var(--o-color-primary-secondary);
  }
  .vnc-form-container {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 40px 50px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: 400px;
  }
  .vnc-header {
    margin-bottom: 20px;
  }
  .vnc-welcome {
    font-size: 14px;
    color: #999999;
    margin-bottom: 8px;
  }
  .vnc-title {
    font-size: 32px;
    font-weight: bold;
    color: #000000;
    letter-spacing: 2px;
  }
  .vnc-form {
    .vnc-password-input {
      :deep(.el-input__wrapper) {
        border-radius: 4px;
        border: 1px solid #e0e0e0;
        box-shadow: none;
        font-size: 14px;
        &:hover {
          border-color: #c0c0c0;
        }
        &.is-focus {
          border-color: #409eff;
        }
      }
      :deep(.el-input__inner) {
        height: auto;
      }
    }
    .vnc-mode-select {
      width: 100%;
      :deep(.el-input__wrapper) {
        border-radius: 4px;
        border: 1px solid #e0e0e0;
        box-shadow: none;
        font-size: 14px;
        &:hover {
          border-color: #c0c0c0;
        }
        &.is-focus {
          border-color: #409eff;
        }
      }
    }
    .vnc-connect-btn {
      width: 100%;
      height: 44px;
      font-size: 16px;
      border-radius: 4px;
      border: none;
    }
    .el-form-item {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .float-toolbar {
    position: absolute;
    left: calc((100% - 240px) / 2);
    padding-left: 16px;
    padding-right: 16px;
    width: 240px;
    border-radius: 4px;
    border-top: 40px solid #3e4551;
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
    height: 0;
  }
  .float-toolbar-panel {
    position: relative;
    bottom: 64px;
  }
  .main-menu {
    float: left;
    margin-top: 36px;
  }
  .main-menu > li {
    position: inherit;
    margin-right: 16px;
    float: left;
    cursor: pointer;
  }

  .sub-menu {
    background: var(--o-bg-color-base);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.24);
    border-radius: 4px;
    position: absolute;
    text-align: center;
    margin-left: -16px;
    margin-top: 12px;
    display: none;
    padding: 4px 0;
    min-width: 145px;
    z-index: 1;
  }
  .sub-menu > ul > li {
    white-space: nowrap;
    padding: 3px 16px;
    border: 1px solid transparent;
    text-align: left;
  }

  .sub-menu li:hover {
    color: #ffffff;
    background: var(--o-color-primary-secondary);
    cursor: pointer;
  }

  .sub-menu li:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }

  .sub-menu li:last-child {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }
  .sub-menu table {
    margin: 12px 16px;
  }

  .sub-menu td {
    position: relative;
    text-align: left;
    white-space: nowrap;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    .inputSelect {
      position: absolute;
      right: 8px;
      top: 3px;
      z-index: 1;
    }
  }
}
.vnc-info-container {
  padding: 10px 0;
  .vnc-info-table {
    width: 100%;
    border-collapse: collapse;
    td {
      padding: 8px 12px;
      border-bottom: 1px solid var(--o-border-color-light);
      vertical-align: top;
    }
    .info-label {
      width: 30%;
      font-weight: 500;
      color: var(--o-text-color-primary);
    }
    .info-value {
      width: 70%;
      color: var(--o-text-color-regular);
      word-break: break-all;
    }
    tr:last-child td {
      border-bottom: none;
    }
  }
}
</style>