<!--
 * @Author: 曹捷
 * @Date: 2019-08-19 15:24:34
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-04-20 09:25:23
 * @Description: file content
 -->
<template>
  <a-modal class="obit-modal-default" v-if="showModal" :maskClosable="false" title="代码预览" v-model:visible="showModal"
    :footer="null" @cancel="closeDialog" width="80%">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane v-for="(value, key) in tabList" :tab="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
        :key="key">
        <!-- <pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre> -->
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>
<script>
import { computed, inject, reactive, ref, toRefs, watch } from 'vue'
import { useStore } from 'vuex'
// import hljs from "highlight.js/lib/highlight";
// import "highlight.js/styles/github-gist.css";
// 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 {
  // inheritAttrs: false,
  props: {
    open: {
      type: Boolean
    },
    detailsInfo: {
      type: Object,
    },
  },
  setup (props, context) {
    let http = inject('http')
    let store = useStore()

    let _data = reactive({
      showModal: props.open,
      tabList: [],
    })
    let _computed = {

    }
    let _methods = {
      closeDialog () {
        context.emit('update:open', false)
      },
      detailPerview () {
        http.checkDetail(props.detailsInfo).then((res) => {
          console.log(res)
          _data.tabList = res

          console.log(_data.tabList)
        })
      },
      highlightedCode (code, key) {
        const vmName = key.substring(key.lastIndexOf("/") + 1, key.indexOf(".vm"));
        var language = vmName.substring(vmName.indexOf(".") + 1, vmName.length);
        const result = hljs.highlight(language, code || "", true);
        return result.value || '&nbsp;';
      },


    }
    watch(() => props.open, (value) => {
      console.log("value", props.detailsInfo)
      _methods.detailPerview()
    })

    return {
      ..._computed,
      ...toRefs(_data),
      ..._methods
    }
  },
}
</script>
<style lang="less">
</style>