<template>
    <div class="white content">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>预览效果</span>
            </div>
            <component :is="main" v-if="main"/>
        </el-card>
        <el-divider></el-divider>
        <su-split-pane :min-percent='30' :default-percent='50' split="vertical" style="min-height:600px;">
            <template slot="paneL">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>script</span>
                    </div>
                    <su-code-mirror v-model="script_" :resize="false" :height="500" mode="javascript"
                                    @change="init()"></su-code-mirror>
                </el-card>
            </template>
            <template slot="paneR">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>template</span>
                    </div>
                    <su-code-mirror v-model="template_" :resize="false" :height="500" mode="html"
                                    @change="init()"></su-code-mirror>
                </el-card>
            </template>
        </su-split-pane>
    </div>
</template>
<script>
import SuCodeMirror from "../su-code-mirror"
import suSplitPane from "../../view/su-split-pane"
import * as CodeUtil from "../../../util/develop/code"

export default {
    name: "su-vue-code-run",
    components: {SuCodeMirror, suSplitPane},
    props: {
        script: {
            type: String,
            default: ""
        },
        template: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            main: null,
            script_: "",
            template_: "",
        };
    },
    created() {
        this.script_ = this.script;
        this.template_ = this.template;
        this.init();
    },
    methods: {
        init() {
            let vm = this;
            let reg = /("([^\\\"]*(\\.)?)*")|('([^\\\']*(\\.)?)*')|(\/{2,}.*?(\r|\n|$))|(\/\*(\n|.)*?\*\/)/g;
            let main = eval(`(function(){ return ${CodeUtil.destructionOfJavascriptAnnotation(vm.script_)};})()`);
            main.template = vm.template_.trim()
                .replace(/^<template>/, '<div>')
                .replace(/<\/template>$/, '</div>')
                .trim();
            vm.main = main;
        }
    }
}
</script>
<style lang="less" scoped>
.white {
    background-color: #ffffff;
}

.content {
    //min-height: 100vh;
}

.title {
    color: #303133;
    margin: 10px;
    line-height: 30px;
}
</style>
