<template>
    <ap-container>
        <ap-aside margin="1111" width="45%" style="padding: 0px;">
            <div style="width: 100%;height: 100%;">
                <div style="position: absolute;z-index: 99;right: 55%;">
                    <el-button-group>
                        <el-button icon="el-icon-video-play" type="primary" @click="runCode()">运行</el-button>
                        <el-button icon="el-icon-copy" type="primary" @click="copyCode($event)">复制</el-button>
                        <el-button icon="el-icon-trash-o" type="primary" @click="clearCode()">清空</el-button>
                        <el-button icon="el-icon-refresh-right" type="primary" @click="resetCode()">重置</el-button>
                        <el-button icon="el-icon-s-promotion" type="primary" @click="previewCode()">预览</el-button>
                    </el-button-group>
                </div>
                <codemirror class="code-ctn" v-model="codes" :options="cmOptions"></codemirror>
            </div>
        </ap-aside>
        <ap-main margin="1110">
            <vue-render :options.sync="renderCode"></vue-render>
        </ap-main>
    </ap-container>
</template>

<script>
import {codemirror} from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
// import 'codemirror/keymap/sublime' //sublime编辑器效果
// import "codemirror/theme/dracula.css"// 配置里面也需要theme设置为monokai
import "codemirror/mode/vue/vue.js" // 配置里面也需要mode设置为vue
import 'codemirror/addon/selection/active-line' //光标行背景高亮，配置里面也需要styleActiveLine设置为true
import VueRender from './../base/VueRender'
import clipboard from "ap-util/util/ClipboardUtil";
import {getUserConfig} from "ap-dev/dev/dev/DevUtil";

export default {
    name: "OnlineCodePanel",
    components: {
        codemirror, VueRender
    },
    data() {
        let defaultCode = "<template>\n" +
            "  <div>\n" +
            "    AP\n" +
            "  </div>\n" +
            "</template>\n" +
            "<script>\n" +
            "export default {\n" +
            "  data () {\n" +
            "    return {\n" +
            "    }\n" +
            "  },\n" +
            "  methods: {\n" +
            "    \n" +
            "  }\n" +
            "}\n" +
            "<" + "/script>\n" +
            "<style scoped>\n" +
            "</style>";
        return {
            userConfig: getUserConfig(),
            // 代码
            defaultCode: defaultCode,
            codes: defaultCode,
            renderCode: "",
            cmOptions: {
                tabSize: 4,// tab的空格个数
                // theme: 'dracula',//主题样式
                lineNumbers: true,//是否显示行数
                lineWrapping: true, //是否自动换行
                styleActiveLine: true,//line选择是是否加亮
                matchBrackets: true,//括号匹配
                mode: "vue", //实现javascript代码高亮
                readOnly: false//只读
            },

        }
    },
    methods: {
        copyCode(event) {
            clipboard(this.codes, event)
        },
        runCode() {
            if (this.codes.indexOf("import ") > -1) {
                this.$message.error("编译错误，在线测试无法执行'import'命令！建议使用预览查看！");
                return;
            }

            this.renderCode = this.codes;
        },
        clearCode() {
            this.codes = "";
            this.renderCode = "";
        },
        resetCode() {
            this.codes = this.defaultCode;
            this.renderCode = this.defaultCode;
        },
        previewCode() {
            let list = [
                {
                    fileName: "Temp.vue",
                    url: this.userConfig.fdVuePath + "\\src\\views\\generator",
                    content: this.codes
                }
            ]
            this.$request({
                url: '/apd/dev/DevGenerateCode/createFile',
                method: 'post',
                data: {
                    list: JSON.stringify(list),
                    projectName: this.userConfig.fdJavaHref
                }
            }).then(response => {
                window.open(this.userConfig.fdVueHref + 'GeneratorPage?comp=Temp');
            })
        },
    }
}
</script>

<style scoped>
.code-ctn {
    height: 100%;
    width: 100%;
}
</style>

<style>
.code-ctn .CodeMirror {
    height: 100% !important;
    font-size: 14px !important;
}

.code-ctn .CodeMirror-line {
    line-height: 20px !important;
}
</style>
