<template>
    <div style="width: 100%; margin-top: 30px">
        <b-code-editor
            v-model="jsonData"
            :auto-format="true"
            :smart-indent="true"
            theme="dracula"
            :indent-unit="4"
            :line-wrap="false"
            ref="editor"
        ></b-code-editor>
        <br />
        <!-- <el-button type="primary" @click="onSubumit">提交</el-button> -->
    </div>
</template>
 
<script>
export default {
    props: {
        jsonData: {
            type: String,
            default: `[
                {
                    "name": "姓名",
                    "key": "name",
                    "type": "input",
                    "value": ""
                },
                {
                    "title": "在校职务",
                    "key": "title",
                    "type": "input",
                    "value": ""
                },
                {
                    "mobile": "手机号",
                    "key": "mobile",
                    "type": "input",
                    "value": ""
                }
            ]`,
        },
    },
    data() {
        return {
        }
    },
    methods: {
        // 检测json格式
        isJSON(str) {
            if (typeof str == 'string') {
                try {
                    var obj = JSON.parse(str)
                    if (typeof obj == 'object' && obj) {
                        return true
                    } else {
                        return false
                    }
                } catch (e) {
                    return false
                }
            } else if (typeof str == 'object' && str) {
                return true
            }
        },
        onSubumit() {
            if (!this.isJSON(this.jsonData)) {
                this.$message.error(`json格式错误`)
                return false
            }
            this.$message.success('json格式正确')
        },
    },
}
</script>
 
<style>
</style>