<template>
  <div class="demo_container" v-cloak>
    <div class="demopage_left">
      <h3 class="demopage_left_title">
        <img :src="titleIcon" width="20" style="margin-right: 10px" />
        <span v-text="title"></span>
      </h3>
      <div class="demo_menu">
        <el-tree
          :data="leftData"
          :props="defaultProps"
          default-expand-all
          icon-class="el-icon-arrow-right"
          accordion
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
    </div>
    <div class="demo_page_right">
      <div class="apass_breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item to="/technical_support">
            技术支持
          </el-breadcrumb-item>
          <el-breadcrumb-item to="/technical_support/demo_center">
            示例中心
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            {{ typeText }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="demo_page_right_l" v-if="flag">
        <div class="paneHeader">
          <span>源代码编辑器</span>
          <div class="pull-right">
            <div class="pull-btn" @click="submitTryit">
              <div class="pull-icon" id="submitBTN"></div>
              运行
            </div>
            <div class="pull-btn" @click="refresh">
              <div class="pull-icon" id="refrestBTN"></div>
              重置
            </div>
          </div>
        </div>
        <div class="panelCode">
          <codemirror
            :value="code"
            @changes="changes"
            :options="options"
          ></codemirror>
        </div>
        <div class="fullmap" @click="fullmap">
          <span class="el-icon-arrow-left"></span>
        </div>
      </div>
      <div :class="flag ? 'demo_page_right_r2' : 'demo_page_right_r1'">
        <div id="iframewrapper">
          <iframe frameborder="0" id="iframeResult"></iframe>
        </div>
        <div
          class="closemap"
          @click="closemap"
          style="display: block"
          v-if="!flag"
        >
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sideNavBar from "@/components/side-nav-bar";
import { codemirror } from "vue-codemirror";
require("codemirror/mode/htmlmixed/htmlmixed.js");
require("codemirror/mode/javascript/javascript.js");
require("codemirror/mode/css/css.js");
require("codemirror/mode/xml/xml.js");
var mixedMode = {
  name: "htmlmixed",
  scriptTypes: [
    {
      matches: /\/x-handlebars-template|\/x-mustache/i,
      mode: null,
    },
    {
      matches: /(text|application)\/(x-)?vb(a|script)/i,
      mode: "vbscript",
    },
  ],
};
export default {
  data() {
    return {
      titleIcon: require("@/assets/imgs/tool_ic_shili.png"),
      title: "示例中心",
      typeText: "arcgis server示例中心",
      leftData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      flag: true,
      currentName: "2d_base_map",
      currentBranch: "arcgis_latest",
      code: "",
    };
  },
  methods: {
    // 左侧tree选中的节点
    handleNodeClick(data) {
      if (data.name) {
        this.currentName = data.name;
        this.currentBranch = data.branch;
        this.changeMap(data.branch, data.name);
      }
    },
    fullmap() {
      this.flag = false;
    },
    closemap() {
      this.flag = true;
    },
    // 修改编辑
    changes(code) {
      this.code = code.getValue();
    },
    // 运行
    submitTryit() {
      var text = this.code;
      var ifr = document.createElement("iframe");
      ifr.setAttribute("frameborder", "0");
      ifr.setAttribute("id", "iframeResult");
      ifr.setAttribute("width", "100%");
      ifr.setAttribute("height", "100%");
      document.getElementById("iframewrapper").innerHTML = "";
      document.getElementById("iframewrapper").appendChild(ifr);

      var ifrw = ifr.contentWindow
        ? ifr.contentWindow
        : ifr.contentDocument.document
        ? ifr.contentDocument.document
        : ifr.contentDocument;
      ifrw.document.open();
      ifrw.document.write(text);
      ifrw.document.close();
    },
    // 重置
    refresh() {
      this.changeMap(this.currentBranch, this.currentName);
    },
    //加载配置文件里面的配置数据
    loadConfigTreeNodeData() {
      var url = "/apaas/ui/static/view/data/arcgisTreeNode.json";
      this.$http.get(url).then((res) => {
        if (res.status == 200) {
          var data = JSON.parse(res.bodyText).data;
          this.leftData = data;
        }
      });
    },
    // 地图
    changeMap(branch, page) {
      var url = "";
      if (branch == "arcgis_latest") {
        url =
          "/apaas/ui/static/view/demo/page-" + page + ".html?" + Math.random();
        this.$http
          .get(url)
          .then((response) => {
            this.code = response.data;
            var ifr = document.getElementById("iframeResult");
            //   ifr.src =
            //     "./static/view/latest/page-" + page + ".html?" + Math.random();
            ifr.src = url;
          })
          .catch(function (response) {
            console.log(response);
          });
      }
    },
  },
  components: {
    codemirror,
  },
  mounted() {
    this.loadConfigTreeNodeData();
    this.changeMap(this.currentBranch, this.currentName);
  },
  computed: {
    options() {
      return {
        mode: mixedMode,
        tabSize: 2,
        lineNumbers: false,
        lineWrapping: true,
        smartIndent: true,
        theme: "cobalt",
      };
    },
  },
};
</script>

<style scoped>
.demo_container {
  height: calc(100vh - 58px);
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}
.demopage_left {
  position: relative;
  width: 250px;
  height: 100%;
  background-color: #0d1847;
}

.demopage_left_title {
  height: 40px;
  background-color: #182665;
  border-radius: 10px;
  overflow: hidden;
  margin: 20px 32px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.demopage_left_title > span {
  font-size: 16px;
  color: #c3caf8;
}

.demo_menu {
  position: relative;
  height: calc(100vh - 58px - 40px - 40px);
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.demo_page_right {
  box-sizing: border-box;
  position: relative;
  width: calc(100vw - 250px);
  padding: 0px 20px 30px;
  height: 100%;
}

.demo_page_right_l {
  position: relative;
  width: 495px;
  height: calc(100% - 46px);
  z-index: 2;
}

.paneHeader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  line-height: 46px;
  border-top: 4px solid #fa7d0f;
  border-bottom: 1px solid #1e262d;
  background: #2a333a;
  font-size: 16px;
  padding-left: 10px;
  box-sizing: border-box;
  color: #c3caf8;
  z-index: 9;
  border-radius: 12px 0 0 0;
}

.paneHeader .pull-right {
  position: absolute;
  top: 0;
  right: 0;
  height: 49px;
}

.paneHeader .pull-right .pull-btn {
  position: relative;
  float: left;
  line-height: 46px;
  border-left: 1px solid #1e262d;
  vertical-align: middle;
  font-size: 14px;
  color: #ffffff;
  padding-left: 32px;
  padding-right: 10px;
  cursor: pointer;
  text-decoration: none;
}

.paneHeader .pull-right .pull-btn .pull-icon {
  position: absolute;
  top: 16px;
  left: 8px;
  width: 16px;
  height: 16px;
  background-size: contain;
}
#submitBTN {
  background-image: url("~@/assets/imgs/demo_logo.png");
}

#refrestBTN {
  background-image: url("~@/assets/imgs/demo_logo.png");
}
.panelCode {
  position: relative;
  top: 50px;
  height: calc(100% - 50px);
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  border-radius: 0 0 0 12px;
}

.fullmap {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -30px;
  width: 14px;
  height: 60px;
  background-color: #6f7377;
  cursor: pointer;
  z-index: 1002;
  line-height: 60px;
  vertical-align: middle;
  text-align: center;
  color: #333333;
  border-radius: 6px 0 0 6px;
}

.closemap {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -30px;
  width: 14px;
  height: 60px;
  background-color: #6f7377;
  cursor: pointer;
  z-index: 1002;
  line-height: 60px;
  vertical-align: middle;
  text-align: center;
  color: #333333;
  border-radius: 0 6px 6px 0;
  display: none;
}

.demo_page_right_r1 {
  position: absolute;
  left: 20px;
  top: 46px;
  bottom: 30px;
  right: 20px;
  height: calc(100% - 46px - 30px);
}

.demo_page_right_r2 {
  position: absolute;
  left: 515px;
  top: 46px;
  bottom: 30px;
  right: 20px;
  height: calc(100% - 46px - 30px);
}

#iframewrapper {
  height: 100%;
  position: relative;
}

#iframeResult {
  position: absolute;
  top: 0;
  border: 0 !important;
  min-width: 100px;
  width: 100%;
  height: 100%;
}
</style>
<style>
[v-cloak] {
  display: none;
}
.apass_breadcrumb > .el-breadcrumb {
  padding: 12px 0 11px;
}
/* 设置滚动条样式 */
.demo_menu::-webkit-scrollbar,
.CodeMirror-vscrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.CodeMirror-vscrollbar::-webkit-scrollbar {
  background-color: #333333;
}
.demo_menu::-webkit-scrollbar-track-piece,
.CodeMirror-vscrollbar::-webkit-scrollbar-track-piece {
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-border-radius: 6px;
}
.demo_menu::-webkit-scrollbar-thumb:vertical,
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  background-color: rgba(255, 255, 255, 0.15);
  -webkit-border-radius: 6px;
}
.demo_menu::-webkit-scrollbar-thumb:horizontal,
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:horizontal {
  width: 5px;
  background-color: rgba(255, 255, 255, 0.15);
  -webkit-border-radius: 6px;
}
/* 设置左侧样式 */
.demo_menu .el-tree {
  background: none;
  font-family: MicrosoftYaHei-Bold;
  font-size: 14px;
  color: #b4c0f5;
}

.demo_menu .el-tree-node .is-expanded > .el-tree-node__children {
  background: none;
  color: #6573ae;
}
.demo_menu .el-tree-node__content {
  height: 48px;
  position: relative;
}
.demo_menu .el-tree-node__content > .el-tree-node__expand-icon {
  position: absolute;
  right: 22px;
  padding: 0;
}
.demo_menu .el-tree-node__label {
  padding-left: 24px;
}
.demo_menu .el-tree-node__content:hover {
  background-color: #182665;
  color: #e6ebfe;
  border-left: 5px solid #fa7d0f;
}

.demo_menu .el-tree-node:focus > .el-tree-node__content {
  background-color: #182665;
  color: #e6ebfe;
  border-left: 5px solid #fa7d0f;
}
.demo_menu .el-tree-node:focus > .el-tree-node__content .el-tree-node__label {
  color: #e6ebfe;
}
/* 设置codeMirror样式 */
.vue-codemirror {
  height: 100%;
}

/* 设置编辑器里的样式 */
.cm-s-cobalt.CodeMirror {
  height: 100%;
  background: #2a333a;
  color: white;
}
.cm-s-cobalt div.CodeMirror-selected {
  background: #b36539;
}
.cm-s-cobalt .CodeMirror-line::selection,
.cm-s-cobalt .CodeMirror-line > span::selection,
.cm-s-cobalt .CodeMirror-line > span > span::selection {
  background: rgba(179, 101, 57, 0.99);
}
.cm-s-cobalt .CodeMirror-line::-moz-selection,
.cm-s-cobalt .CodeMirror-line > span::-moz-selection,
.cm-s-cobalt .CodeMirror-line > span > span::-moz-selection {
  background: rgba(179, 101, 57, 0.99);
}
.cm-s-cobalt .CodeMirror-gutters {
  background: #2a333a;
  border-right: 1px solid #2a333a;
}
.cm-s-cobalt .CodeMirror-guttermarker {
  color: #ffee80;
}
.cm-s-cobalt .CodeMirror-guttermarker-subtle {
  color: #d0d0d0;
}
.cm-s-cobalt .CodeMirror-linenumber {
  color: #d0d0d0;
}
.cm-s-cobalt .CodeMirror-cursor {
  border-left: 1px solid white;
}

.cm-s-cobalt span.cm-comment {
  color: #08f;
}
.cm-s-cobalt span.cm-atom {
  color: #845dc4;
}
.cm-s-cobalt span.cm-number,
.cm-s-cobalt span.cm-attribute {
  color: #ff80e1;
}
.cm-s-cobalt span.cm-keyword {
  color: #ffee80;
}
.cm-s-cobalt span.cm-string {
  color: #3ad900;
}
.cm-s-cobalt span.cm-meta {
  color: #ff9d00;
}
.cm-s-cobalt span.cm-variable-2,
.cm-s-cobalt span.cm-tag {
  color: #9effff;
}
.cm-s-cobalt span.cm-variable-3,
.cm-s-cobalt span.cm-def {
  color: white;
}
.cm-s-cobalt span.cm-bracket {
  color: #d8d8d8;
}
.cm-s-cobalt span.cm-builtin,
.cm-s-cobalt span.cm-special {
  color: #ff9e59;
}
.cm-s-cobalt span.cm-link {
  color: #845dc4;
}
.cm-s-cobalt span.cm-error {
  color: #9d1e15;
}

.cm-s-cobalt .CodeMirror-activeline-background {
  background: #002d57;
}
.cm-s-cobalt .CodeMirror-matchingbracket {
  outline: 1px solid grey;
  color: white !important;
}
</style>
