<template>
  <div class="root_container">
    <div class="header">
      <div class="form_container">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="position: relative; width: 100%"
        >
          <el-form-item label="输入待检测的ITV文件内容"> </el-form-item>
          <el-form-item label=""> </el-form-item>
          <el-form-item class="right_btn">
            <el-button type="primary" @click="onDoCheck">检测内容</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="table_container">
      <div class="codeEditBox">
        <editor
          v-model="itvContent"
          @init="editorInit"
          @input="codeChange"
          lang="javascript"
          :options="editorOptions"
          theme="chrome"
        ></editor>
      </div>
      <div style="color: #333; padding-top: 16px; padding-bottom: 10px">
        检测结果
      </div>
      <div class="result" :style="{ height: tableHeight + 'px' }">{{ resultContent }}</div>
    </div>
  </div>
</template>
<script>
import Editor from "vue2-ace-editor";
import { itvCheck } from "./../../api/log/itv";
import { Message } from "element-ui";
let isFormat = false;
export default {
  components: {
    Editor,
  },
  data() {
    return {
      editorOptions: {
        // 设置代码编辑器的样式
        enableBasicAutocompletion: true, //启用基本自动完成
        enableSnippets: true, // 启用代码段
        enableLiveAutocompletion: true, //启用实时自动完成
        tabSize: 2, //标签大小
        fontSize: 14, //设置字号
        showPrintMargin: false, //去除编辑器里的竖线
      },

      itvContent: "",

      resultContent: "暂无结果",

      //记录高度
      tableHeight: "",
    };
  },
  watch: {
    "$store.state.screenHeight": function (val) {
      this.tableHeight = val - 98 - 50 - 480;
    },
  },
  mounted: function () {
    this.tableHeight = this.$store.state.screenHeight - 98 - 50 - 480;
  },
  methods: {
    editorInit() {
      require("brace/theme/chrome");
      require("brace/ext/language_tools"); //language extension prerequsite...
      require("brace/mode/yaml");
      require("brace/mode/json");
      require("brace/mode/less");
      require("brace/snippets/json");
      require("brace/mode/lua");
      require("brace/snippets/lua");
      require("brace/mode/javascript");
      require("brace/snippets/javascript");
    },
    codeChange(val) {
      if(!val){
        isFormat = false;
      }
      if (isFormat == false) {
        this.itvContent = JSON.stringify(JSON.parse(val), null, 2);
        isFormat = true;
      }
    },
    //检测
    onDoCheck() {
      if (!this.itvContent) {
        Message.error("请先输入内容");
        return;
      }
      itvCheck(this.itvContent)
        .then((result) => {
          this.resultContent = result.data.data;
        })
        .catch((err) => {
          this.resultContent = err.msg;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.root_container {
  position: relative;
}
.header {
  margin-left: 18px;
  margin-top: 18px;
  position: relative;
}
.table_container {
  margin-left: 18px;
  margin-right: 18px;
}
.header_contianer {
  top: 0;
  position: absolute;
  right: 18px;
}

.right_btn {
  position: absolute;
  right: 0;
  margin-right: 16px;
}

.codeEditBox {
  width: 100%;
  height: 400px;
  border: 1px solid #dcdee2;
}

.codeEditBox edit {
  height: 100%;
}

.result {
  background-color: #ededed;
  white-space: pre-line;
  color: #333;
  padding: 16px;
  border-radius: 4px;
  line-height: 24px;
  font-size: 14px;
  overflow: auto;
}

.result_input {
  height: 100%;
}
</style>