/* eslint-disable vue/no-v-html */
<template>
  <div class="page-wrapper role-add">
    <div class="page-container">
      <a-tabs v-model="activeKey">
        <a-tab-pane v-for="item in loadData" :key="item.name" :tab="item.name">
          <!-- <div class="text-wrapper" v-html="item.value"></div> -->
          <!-- <highlightjs autodetect :code="item.value" /> -->
          <!-- eslint-disable-next-line vue/no-v-html -->
          <pre><code class="hljs" v-html="highlightedCode(item.value, item.name)"></code></pre>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="page-bottom-op">
      <a-button type="primary" @click="handleCopy()">
        <Icon type="icon-cur-save_1" :size="18" />{{ $t("COPY") }}
      </a-button>
      <a-button @click="handleCancel">
        <Icon type="icon-dir-f-rollback" :size="18" />{{ $t("BACK") }}
      </a-button>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon } from "@mega-design/ui-vue";
import VueClipBoard from "vue-clipboard2";
import hljs from "highlight.js/lib/highlight";
import ApiConstant from "@/api/ApiConstant";
import "highlight.js/styles/github-gist.css";

Vue.use(VueClipBoard);
hljs.registerLanguage("java", require("highlight.js/lib/languages/java"));
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("html", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("vue", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage(
  "javascript",
  require("highlight.js/lib/languages/javascript")
);
hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));

export default {
  components: { Icon },
  data() {
    return {
      activeName: "a",
      activeKey: "",
      loadData: [],
      id: "",
    };
  },
  computed: {},
  mounted() {
    this.id = this.$route.query.id || "";
    this.getData();
  },
  methods: {
    // 获取数据
    getData() {
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/dev/code-generate/preview/${this.id}`,
          {}
        )
        .then((res) => {
          if (res.data?.data) {
            let tempObj;
            Object.keys(res.data?.data).forEach((key) => {
              tempObj = {
                name: key,
                value: res.data?.data[key],
              };
              this.loadData.push(tempObj);
            });
            this.activeKey = this.loadData[0].name;
          }
        });
    },
    /** 高亮显示 */
    highlightedCode(code, key) {
      const language = key.substring(key.indexOf(".") + 1, key.length);
      const result = hljs.highlight("java", code || "", true);
      return result.value || "&nbsp;";
    },
    // 复制
    handleCopy() {
      const index = this.loadData.findIndex(
        (item) => item.name === this.activeKey
      );
      this.$copyText(this.loadData[index].value).then(() => {
        this.$message.success(this.$t("COPY_SUCCESS"));
      });
    },
    // 取消
    handleCancel() {
      this.$store.dispatch("tagsView/jumpBeforeView", {
        to: { path: "/codegenerate" },
        vm: this,
      });
    },
  },
};
</script>
<style lang="less" scoped>
.ami-core-icon {
  margin-top: -3px;
  vertical-align: middle;
}
.text-wrapper {
  white-space: pre-wrap;
  padding: 0 50px;
}
</style>
