<template>
    <div class="styles-title">
        <el-form-item label="标题文字" prop="title.text" :rules="{ required: true, message: '请输入标题', trigger: ['blur', 'change'] }">
            <a-input v-model="form.text" />
        </el-form-item>
        <el-form-item label="字体颜色">
            <select-color v-model="form.style.color"></select-color>
        </el-form-item>
        <el-form-item label="背景颜色">
            <select-color v-model="form.style['background-color']"></select-color>
        </el-form-item>
<!--        <a-form-item label="style">-->
<!--&lt;!&ndash;            json编辑器&ndash;&gt;-->
<!--            <vue-json-editor-->
<!--                v-model="form.style"-->
<!--                :mode="'code'"-->
<!--                lang="zh"-->
<!--                @json-change="onJsonChange"-->
<!--                @has-error="onError">-->
<!--            </vue-json-editor>-->
<!--        </a-form-item>-->
    </div>
</template>

<script>
import SelectColor from "./SelectColor";
// import vueJsonEditor from 'vue-json-editor'
export default {
    name: "StylesTitle",
    components: {
        SelectColor
        // vueJsonEditor
    },
    props: {
        form: {}
    },
    computed: {},
    watch: {},
    data() {
        return {

        }
    },
    mounted() {
    },
    created() {
    },
    destroyed() {
    },
    methods: {
        onJsonChange(data) {
            if(typeof data === "object") {
                this.form.style = data;
            }
        },
        onError(err) {
            // console.log(err);
        }
    }
}
</script>

<style scoped lang="scss">
.styles-title /deep/{

}
</style>
