<template>
    <div class="app-container">
        <div class="_fc-t-header">
            <div class="_fc-t-name">form-create-designer</div>
            <div class="_fc-t-menu">
                <el-button size="small" @click="saveForm"> 保存</el-button>
                <el-button size="small" @click="setJson"> 导入JSON</el-button>
                <el-button size="small" @click="setOption"> 导入Options</el-button>
                <el-button size="small" type="primary" @click="showJson">生成JSON</el-button>
                <el-button size="small" type="success" @click="showOption">生成Options</el-button>
                <el-button size="small" type="danger" @click="showTemplate">生成组件</el-button>
            </div>
        </div>
        <fc-designer ref="designer" />
        <el-dialog :title="title[type]" v-model="state" class="_fc-t-dialog">
            <div ref="editor" v-if="state"></div>
            <span style="color: red;" v-if="err">输入内容格式有误!</span>
            <template #footer v-if="type > 2">
                <span slot="footer" class="dialog-footer">
                    <el-button @click="state = false" size="small">取 消</el-button>
                    <el-button type="primary" @click="onOk" size="small">确 定</el-button>
                </span>
            </template>
        </el-dialog>
        <!--表单配置详情-->
        <el-dialog :title="formTitle" v-model="formOpen" width="500px">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="表单名称" prop="formName">
                    <el-input v-model="form.name" placeholder="请输入表单名称" />
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" placeholder="请输入备注" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { addFlowable, editFlowable, getFlowable } from '@/api/tool/formGreat'
import formCreate from '@form-create/element-ui';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/lint/lint.css';
import CodeMirror from 'codemirror/lib/codemirror';
import 'codemirror/addon/lint/lint';
import 'codemirror/addon/lint/json-lint';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/vue/vue';
import 'codemirror/mode/xml/xml';
import 'codemirror/mode/css/css';
import 'codemirror/addon/mode/overlay';
import 'codemirror/addon/mode/simple';
import 'codemirror/addon/selection/selection-pointer';
import 'codemirror/mode/handlebars/handlebars';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/pug/pug';

const TITLE = ['生成规则', '表单规则', '生成组件', '设置生成规则', '设置表单规则'];

export default {
    name: 'app',
    data() {
        return {
            state: false,
            // 表单参数
            form: {
                formId: null,
                name: null,
                contentJson: {
                    getRule: {},
                    getOption: {}
                },
                remark: null
            },
            formOpen: false,
            formTitle: "",
            formData: {},
            rules: {},
            value: null,
            title: TITLE,
            editor: null,
            err: false,
            type: -1,
        };
    },
    watch: {
        state(n) {
            if (!n) {
                this.value = null;
                this.err = false;
            }
        },
        value() {
            this.load();
        }
    },
    mounted() {
        this.$route.query.tableId && this.getFlowableDetail(this.$route.query.tableId)
    },
    // beforeCreate() {
    //     console.log(this.$route)
    //     // window.jsonlint = jsonlint;
    // },
    methods: {
        load() {
            let val;
            if (this.type === 2) {
                val = this.value;
            } else if (this.type === 0) {
                val = formCreate.toJson(this.value, 2);
            } else {
                val = JSON.stringify(this.value, null, 2);
            }
            this.$nextTick(() => {
                this.editor = CodeMirror(this.$refs.editor, {
                    lineNumbers: true,
                    mode: this.type === 2 ? { name: 'vue' } : 'application/json',
                    gutters: ['CodeMirror-lint-markers'],
                    // lint: true,
                    line: true,
                    tabSize: 2,
                    lineWrapping: true,
                    value: val || ''
                });
            });
        },
        onValidationError(e) {
            this.err = e.length !== 0;
        },
        submitForm() {
            this.form.contentJson.getRule = this.$refs.designer.getRule()
            this.form.contentJson.getOption = this.$refs.designer.getOption()
            this.form.contentJson = JSON.stringify(this.form.contentJson)
            if (this.form.formId) {
                editFlowable(this.form).then((response) => {
                    this.formOpen = false;
                })
            } else {
                delete this.form.formId
                addFlowable(this.form).then((response) => {
                    this.formOpen = false;
                })
            }
            console.log(this.form)
        },
        cancel() {
            this.formOpen = false;
        },
        saveForm() {
            this.formOpen = true;
            this.formTitle = "添加表单";
            // addDeployForm(this.form).then((response) => {})
        },
        showJson() {
            this.state = true;
            this.type = 0;
            this.value = this.$refs.designer.getRule();
            // console.log(this.$refs.designer.getRule())
        },
        showOption() {
            this.state = true;
            this.type = 1;
            this.value = this.$refs.designer.getOption();
            // console.log(this.$refs.designer.getOption())
        },
        showTemplate() {
            this.state = true;
            this.type = 2;
            this.value = this.makeTemplate();
            // console.log(this.makeTemplate())
        },
        setJson() {
            this.state = true;
            this.type = 3;
            this.value = [];
        },
        setOption() {
            this.state = true;
            this.type = 4;
            this.value = { form: {} };
        },
        onOk() {
            if (this.err) return;
            const json = this.editor.getValue();
            let val = JSON.parse(json);
            if (this.type === 3) {
                if (!Array.isArray(val)) {
                    this.err = true;
                    return;
                }
                this.$refs.designer.setRule(formCreate.parseJson(json));
            } else {
                if (!is.Object(val) || !val.form) {
                    this.err = true;
                    return;
                }
                this.$refs.designer.setOption(val);
            }
            this.state = false;
        },
        makeTemplate() {
            const rule = this.$refs.designer.getRule();
            const opt = this.$refs.designer.getOption();
            return `<template>
                    <form-create
                        v-model="fapi"
                        :rule="rule"
                        :option="option"
                        @submit="onSubmit"
                    ></form-create>
                    </template>

                    <script>
                    import formCreate from "@form-create/element-ui";

                    export default {
                    data () {
                        return {
                            fapi: null,
                            rule: formCreate.parseJson('${formCreate.toJson(rule).replaceAll('\\', '\\\\')}'),
                            option: formCreate.parseJson('${JSON.stringify(opt)}')
                        }
                    },
                    methods: {
                        onSubmit (formData) {
                        //todo 提交表单
                        }
                    }
                    }
                    <\/script>`;
        },
        getFlowableDetail() {
            getFlowable(this.$route.query.tableId).then((response) => {
                if (response.state === "success") {
                    this.form.formId = response.data.formId
                    this.form.name = response.data.name
                    this.form.remark = response.data.remark
                    const getRule = formCreate.parseJson(JSON.stringify(JSON.parse(response.data.contentJson).getRule))
                    const getOption = formCreate.parseJson(JSON.stringify(JSON.parse(response.data.contentJson).getOption))
                    this.$refs.designer.setRule(getRule)
                    this.$refs.designer.setOption(getOption)
                }

            })
        }
    }
};


</script>
  
<style lang="scss" scoped>
._fc-t-header {
    height: 60px;
    margin: 0 20px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: default;
}

._fc-t-logo {
    height: 26px;
}

._fc-t-name {
    display: inline-block;
    color: rgba(0, 0, 0, 0.8);
    font-size: 20px;
    font-weight: 600;
    margin-left: 5px;
}

._fc-t-menu {
    position: absolute;
    right: 0;
}

._fc-t-menu i {
    font-size: 12px;
}

._fc-t-dialog .CodeMirror {
    height: 450px;
}

._fc-t-dialog .CodeMirror-line {
    line-height: 16px !important;
    font-size: 13px !important;
}

.CodeMirror-lint-tooltip {
    z-index: 2021 !important;
}

._fc-t-dialog .el-dialog__body {
    padding: 0px 20px;
}

::v-deep(.el-aside) {
    padding: 0px;
    background-color: #fff;
}

.app-container {
    height: calc(100vh - 84px);
}
</style>
  