<template>
    <component :is="is" v-if="is"></component>
</template>

<script>
import * as CodeUtil from "../../../util/develop/code"
// import jsonViewer from './vue-json-viewer/vue-json-viewer';
import jsonViewer from 'vue-json-viewer';

export default {
    name: "index",
    props: {
        code: {
            type: String,
            default: ""
        },
        mode: {
            type: String,
            default: "js",//html css javascript json
        },
    },
    watch: {
        code: {
            immediate: true,
            handler() {
                let content = this.getBeautifyCode(this.code);
                this.is = {
                    template: `<code v-hljs class="${this.mode}"><pre v-pre>${content}</pre></code>`
                }
            }
        }
    },
    data() {
        return {
            is: ""
        }
    },
    computed: {
        is() {
            let b;
            switch (this.mode) {
                case "js":
                case "javascript":
                    b = CodeUtil.getBeautifyJavascriptCode;
                    break;
                case "html":
                    b = CodeUtil.getBeautifyHtmlCode;
                    break;
                case "css":
                    b = CodeUtil.getBeautifyCssCode;
                    break;
                case "json":
                    return {
                        template: `
                            <json-viewer :expand-depth="10" :value="json"/>`,
                        components: {jsonViewer},
                        data() {
                            return {json: this.code}
                        }
                    }
            }
            return this.getCodeComponent(b(this.code));
        }
    },
    methods: {
        getCodeComponent(content) {
            return {
                template: `<code v-hljs class="${this.mode}"><pre v-pre>${content}</pre></code>`
            }
        },
    },

}
</script>

<style scoped lang="less">
.hljs {
    line-height: 1.5;
    font-family: Menlo, Monaco, Consolas, Courier, monospace;
    font-size: 12px;
    padding: 12px 12px;
    background-color: #fafafa;
    border: solid 1px #eaeefb;
    margin-bottom: 0;
    border-radius: 4px;
    -webkit-font-smoothing: auto;
}
</style>
