<template>
  <div class="apiInfo">
    <el-tabs style="background:#fff;">
      <el-tab-pane label="API文档">
        <api-doc :data="data"></api-doc>
      </el-tab-pane>
      <el-tab-pane label="接口调试">
        <api-debug :data="data"></api-debug>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

import "codemirror/lib/codemirror.css";
require("codemirror/mode/javascript/javascript");
import "codemirror/mode/htmlmixed/htmlmixed";
import cardBar from "@/components/cardBar/index";
import apiDebug from "./apiDebug";
import apiDoc from "./apiDoc";
export default {
  name: "api-info",
  components: {
    cardBar,
    apiDebug,
    apiDoc,
    codemirror,
  },
  props: {
    data: {
      default() {
        return {};
      },
    },
    iframeSrc: {
      default: "",
    },
    num: {
      default: "0",
    },
    icon: {
      default: "",
    },
    title: {
      default: "",
    },
    desc: {
      default: "",
    },
  },
  data() {
    return {
      editor: "",
      drawer: false,
      code: "",
      cacheCode: "",
      cmOptions: {
        lineWrapping: true, //是否显示scroll
        lineNumbers: true, //是否显示行号
        styleActiveLine: true,
        matchBrackets: true,
        mode: "htmlmixed",
        viewportMargin: Infinity,
        // tabSize: 4,
        //   mode:"htmlmixed",
        // lineNumbers: true,
        // line: true,
        // readOnly: false,
      },
    };
  },
  mounted() {

  },
  methods: {
    handleDrawerClick() {
      this.drawer = !this.drawer;
      console.log(this.code);

      if (this.code === "") {
        this.code = document.getElementById(
          "cur_iframe"
        ).contentWindow.document.body.outerHTML;
        this.cacheCode = document.getElementById(
          "cur_iframe"
        ).contentWindow.document.body.outerHTML;
      }
    },
    handleRunClick() {
      let iframe = document.getElementById("cur_iframe").contentWindow;
      iframe.document.body.innerHTML=this.code;
      let codes=iframe.document.documentElement.innerHTML;
      iframe.src = "about:blank";
      try {
        iframe.contentWindow.document.write("");
        iframe.contentWindow.document.clear();
      } catch (e) {}
      iframe.document.open();
      iframe.document.write(codes);
      iframe.document.close();
    },
    handleRefreshClick() {
      this.code = this.cacheCode;
      this.handleRunClick();
    },
  },
};
</script>


<style lang='scss'>
.apiInfo {
  .el-button-group .el-button--primary:first-child {
    border-right-color: #409eff;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .el-button-group .el-button--primary:last-child {
    border-left-color: #b3d8ff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .CodeMirror {
    border: 1px solid #eee;
    height: 100%;
    overflow: unset;
  }

  .CodeMirror-scroll {
    height: auto;
    overflow-y: auto;
    overflow-x: auto;
  }
}
</style>
<style scoped lang='scss'>
.apiInfo {
  .arrow-panel {
    width: 53px;
    height: 98px;
    line-height: 27px;
    cursor: pointer;
    /* border: 1px solid #3597fa; */
    background: url(../../assets/images/leftForCode.png) no-repeat center;
    position: absolute;
    top: 48%;
    right: 5px;
    margin: -70px 0 0 -44px;
  }
  .arrow-panel-closed{
    width: 53px;
    height: 98px;
    line-height: 27px;
    cursor: pointer;
    /* border: 1px solid #3597fa; */
    background: url(../../assets/images/leftForCodeClosed.png) no-repeat center;
    position: absolute;
    top: 48%;
    right: 5px;
    margin: -70px 0 0 -44px;
  }

  .code {
    width: 40%;
    height: 100%;
    position: absolute;
    bottom: 1px;
    right: 1px;
    overflow: hidden;
    .title-panel {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #e5e5e5;
      background: #f8f9fa;
      .title-text {
        color: #767676;
        font-size: 14px;
        padding-left: 10px;
      }
      .btn-panel {
        text-align: right;
      }
    }
    .code-panel {
      width: 100%;
      height: 95%;
      overflow: scroll;
      top: 39px;
      position: absolute;
    }
  }
}
</style>
