<template>
  <div>
    <a-card :bordered="false" style="width: 100%">
      <a-form-model
        :model="form"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-row type="flex" justify="space-between">
          <a-col :span="8">
            <a-form-model-item label="自动刷新">
              <a-switch v-model="form.openLog" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="显示数量">
              <a-input-number v-model="form.count" @keydown="keydown" />
              <!-- <a-input-number v-model="form.count" />
              <Button
                type="primary"
                style="margin-left: 10px"
                @click="handleConfirm()"
              >
                <Icon type="icon-cur-save_1" :size="18" />{{ $t("CONFIRM") }}
              </Button> -->
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <Button type="primary" @click="handleCopy()">
                <Icon type="icon-cur-save_1" :size="18" />{{ $t("COPY") }}
              </Button>
              <a-button @click="handleClear">
                <a-icon type="delete" />
                {{ $t("CLEAN_LOG") }}
              </a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <div id="loggingText" class="logContent" v-html="logContent"></div>
    </a-card>
  </div>
</template>

<script>
import Vue from "vue";
import VueClipBoard from "vue-clipboard2";
import { Icon } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";
import { LogWebSocket } from "./ws";

Vue.use(VueClipBoard);

export default {
  components: {
    Icon,
  },
  layout: "none",
  data() {
    return {
      logList: [],
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      logContent: "",
      copyContent: "",
      form: {
        openLog: true,
        count: 100,
      },
    };
  },
  computed: {},
  created() {
    this.getIpAddress();
  },
  methods: {
    // 获取ip地址
    getIpAddress() {
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/monitor/log/client/get-by-id/${this.$route.query.id}`
        )
        .then((res) => {
          const { data } = res.data;
          this.ws = new LogWebSocket();
          // const prot = data.protocolType === "https" ? "wss" : "ws";
          const prot = /^http:\/\//.test(data.serverPath) ? "ws" : "wss";
          let path = "";
          if (data.serverPath.includes("http:")) {
            path = data.serverPath.replace("http://", "");
          } else if (data.serverPath.includes("https:")) {
            path = data.serverPath.replace("https://", "");
          } else {
            path = data.serverPath;
          }
          this.ws.websocketUrl = `${prot}://${path}/web-socket/log`; // ws://192.168.101.66:8080/core/log-web-socket
          this.ws.websocketCallBack = this.messageBack;
          this.handleClear();
          this.ws.initWebSocket();
        });
    },
    messageBack(msg) {
      if (!this.form.openLog || !msg) return;
      this.logList.push(msg);
      if (this.logList.length > this.form.count) {
        let content = "";
        let cmsg = "";
        const end = this.logList.length - this.form.count;
        const list = this.logList;
        list.splice(0, end);
        list.forEach((item) => {
          content += `<span>${item}</span>`;
          cmsg += `${item}`;
        });
        this.logContent = content;
        this.copyContent = cmsg;
        this.$nextTick(() => {
          const loggingText = this.$el.querySelector("#loggingText");
          loggingText.scrollTop = loggingText.scrollHeight;
        });
        return;
      }
      this.logContent += `<span>${msg}</span>`;
      this.copyContent += `${msg}`;
      this.$nextTick(() => {
        const loggingText = this.$el.querySelector("#loggingText");
        loggingText.scrollTop = loggingText.scrollHeight;
      });
    },
    handleConfirm() {
      this.$message.success(this.$t("OPERATION_SUCCESS"));
      if (this.logList.length <= this.form.count) return;
      const end = this.logList.length - this.form.count;
      const list = this.logList;
      list.splice(0, end);
      let content = "";
      let cmsg = "";
      list.forEach((item) => {
        content += `<span>${item}</span>`;
        cmsg += `${item}`;
      });
      this.logContent = content;
      this.copyContent = cmsg;
    },
    // 阻止冒泡
    keydown(e) {
      if (e.key === "Enter") {
        e.preventDefault();
        this.handleConfirm();
      }
    },
    handleCopy(e) {
      this.$copyText(this.copyContent).then(() => {
        this.$message.success(this.$t("COPY_SUCCESS"));
      });
    },
    handleClear(e) {
      this.logList = [];
      this.logContent = "";
      this.copyContent = "";
    },
    destroyed() {
      this.ws.closeWebsocket();
    },
  },
};
</script>

<style lang="less" scoped>
.logContent {
  white-space: pre-wrap;
  width: 100%;
  height: 800px;
  padding: 20px;
  border: 1px solid #d9d9d9;
  background: #000;
  color: #fff;
  overflow: scroll;
  border-radius: 10px;
  font-size: 13px;
}
</style>
