<template>
  <div>
    <div class="address">
      <a-icon style="margin-left: 8px" type="link" />
      <span style="margin-left: 8px"
        >连接地址：{{ contentData.sshIp }}:{{
          contentData.sshPort || "22"
        }}</span
      >
    </div>
    <div
      id="terminal"
      style="position: absolute; width: 100%; height: 100%; padding-left: 4px"
    ></div>
  </div>
</template>
<script>
import Vue from "vue";
import "xterm/css/xterm.css";
import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit";
import ApiConstant from "@/api/ApiConstant";
import { LogWebSocket } from "./ws";

export default {
  layout: "none",
  data() {
    return {
      contentData: {
        serverIp: "",
      },
    };
  },
  computed: {},
  created() {
    this.installEventHandler();
    this.getIpAddress();
  },
  methods: {
    init() {
      const options = {
        operate: "connect",
        host: this.contentData.sshIp, // IP this.contentData.serverIp "10.252.78.220"
        port: this.contentData.sshPort || "22", // 端口号
        username: this.contentData.sshUserName, // 用户名
        password: this.contentData.sshPassword, // 密码
      };
      this.term = new Terminal({
        cols: 97,
        rows: 37,
        cursorBlink: true, // 光标闪烁
        cursorStyle: "block", // 光标样式  null | 'block' | 'underline' | 'bar'
        scrollback: 800, // 回滚
        tabStopWidth: 8, // 制表宽度
        screenKeys: true,
      });
      this.ws.websocketSend(JSON.stringify(options));
      this.term.open(document.getElementById("terminal"));
      this.fitAddon = new FitAddon();
      this.term.loadAddon(this.fitAddon);
      this.fitAddon.fit();
      // 在页面上显示连接中...
      this.term.write(
        `Connecting ${this.contentData.sshIp}:${
          this.contentData.sshPort || "22"
        } ...`
      );
      this.term.onData((data) => {
        this.ws.websocketSend(
          JSON.stringify({ operate: "command", command: data })
        );
      });
    },
    // 获取ip地址
    getIpAddress() {
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/monitor/ssh/get-by-id/${this.$route.query.id}`
        )
        .then((res) => {
          const { data } = res.data;
          this.contentData = data;
          this.ws = new LogWebSocket();
          const str = window.location.href.substr(
            0,
            window.location.href.indexOf("://")
          );
          const prot = str === "https" ? "wss" : "ws";
          const serverPath = data.serverPath.includes("/")
            ? data.serverPath
            : `/${data.serverPath}`;
          this.ws.websocketUrl = `${prot}://${window.location.host}${serverPath}/web-socket/ssh`; // ws://192.168.101.66:8080/core/log-web-socket
          this.ws.websocketCallBack = this.messageBack;
          this.ws.initCallback = this.init;
          this.ws.initWebSocket();
        });
    },
    messageBack(msg) {
      this.term.write(msg);
    },
    installEventHandler() {
      window.addEventListener("resize", this.onResize);
    },
    unInstallEventHandler() {
      window.removeEventListener("resize", this.onResize);
    },
    onResize() {
      if (this.fitAddon) {
        this.fitAddon.fit();
      }
    },
    destroyed() {
      this.ws.closeWebsocket();
      this.term.kill();
      this.unInstallEventHandler();
    },
  },
};
</script>
<style lang="less">
@import (optional, once) "@/theme";

.address {
  background: #e1f5fa;
  width: 100%;
  height: 35px;
  line-height: 35px;
  color: @primary-color;
}
</style>
