<!-- 功能：功能描述; 作者：LZJ; 时间：2022年10月12日 10:50:29-->
<template>
    <div id="CodeBuild">
        <code>
            <div v-if="judgeEmpty(scriptObj)" class="line-height36">
                <p v-if="scriptObj.script !== 'false'" class="keyword-tag">&lt;script&gt;</p>
                <div v-if="judgeEmpty(scriptObj.importArr)">
                    <div v-for="(item, index) in scriptObj.importArr" :key="`import${index}`">
                        <font class="keyword-tag">import</font> {{ item.component }} <font class="keyword-tag">from</font> <font class="string-tag">'{{ item.componentUrl }}'</font>;
                        <span v-if="judgeEmpty(item.note)" class="c-909399 ft14">&nbsp;//&nbsp;{{ item.note }}</span>
                        &nbsp;&nbsp;<el-button v-if="judgeEmpty(item.jump)" size="small" @click="jumpImportClick">查看代码</el-button>
                    </div>
                </div>
                <pre><font class="keyword-tag">export {{ scriptObj.exportObj || 'default' }}</font> {
<pre v-if="judgeEmpty(scriptObj.components)">
    <font class="keyword-tag">components: {</font> <span>{{ scriptObj.components }} <font class="keyword-tag">}</font>,</span>
</pre>
<pre v-if="judgeEmpty(scriptObj.mixins)">
    <font class="keyword-tag">mixins:</font> [<span><font class="string-tag"> {{ scriptObj.mixins }} </font></span>],
</pre>
<pre v-if="judgeEmpty(scriptObj.dataArr)">
    data() {
        <font class="keyword-tag">return {</font><span v-for="(item, index) in scriptObj.dataArr" :key="`dataArr${index}`">
            {{ item.key }}: <font class="value-tag">{{ item.value }}</font><span v-if="index < scriptObj.dataArr.length - 1">,</span></span>
        <font class="keyword-tag">}</font>
    },
</pre>
<pre v-if="judgeEmpty(scriptObj.watch)">
    <font class="keyword-tag">watch: </font>{<slot name="watch" />    },
</pre>
<pre v-if="judgeEmpty(scriptObj.created)">
    <font class="keyword-tag">created() </font>{<slot name="created" />    },
</pre>
<pre v-if="!judgeEmpty(scriptObj.methods)">
    <font class="keyword-tag">methods:</font> {<slot name="methods" />    }
</pre>
}
                <p v-if="scriptObj.script !== 'false'" class="keyword-tag"> &lt;/script&gt;</p>
            </pre></div>
            <div v-if="judgeEmpty(exportDataObj)" class="line-height36">
                <p><span class="string-tag">export function</span>  <span>{{ exportDataObj.name }}() {</span></p>
                <p class="pl20 keyword-tag">return {</p>
                <slot name="exportDataObj" />
                <p class="pl20">}</p>
                <p>}</p>
            </div>
        </code>
    </div>
</template>
<script>
export default {
    // 组件名称
    name: 'CodeBuild',
    // 局部注册的组件
    components: {},
    // 组件参数 接收来自父组件的数据
    props: {
        scriptObj: {
            type: Object,
            default: () => {}
        },
        exportDataObj: {
            type: Object,
            default: () => {}
        }
    },
    // 组件状态值
    data() {
        return {};
    },
    // 侦听器
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
        jumpImportClick() {
            this.$emit('jumpImportClick');
        }
    }
};
</script>

<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<style scoped lang='less'>

</style>
