<template>
    <el-dialog title="规则配置" :close-on-click-modal="false" append-to-body :visible.sync="visible"
        class="JNPF-dialog JNPF-dialog_center" lock-scroll width="800px">
        <el-row :gutter="15" class="">
            <el-button style="margin-bottom: 10px" type="primary"
                @click="synchronous()">同步</el-button>
            <div v-loading="!editorShow" style="height: 300px;background-color: #282a36;">
                <!-- <vue-json-editor v-model="jsonStr" :showBtns="false" :mode="'code'"
                    @json-change="onJsonChange" @json-save="onJsonSave" @has-error="onError" /> -->
                <b-code-editor v-if="editorShow" v-model="jsonStr" :auto-format="true"
                    :smart-indent="true" theme="dracula" :indent-unit="4" :line-wrap="false"
                    ref="editor">
                </b-code-editor>
            </div>

        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false"> 取 消</el-button>
            <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> 确
                定</el-button>
        </span>
    </el-dialog>
</template>


<script>

import { putDetail, getProcessAdvanced, saveProcessAdvanced, getRuleByProcessDefKey } from "@/api/governmentCloud/processConfiguration/processConfiguration";

import { minioPath } from '@/utils/apiUrl'
// 导入模块
import vueJsonEditor from 'vue-json-editor'


export default {
    props: [],
    components: { vueJsonEditor },
    data() {
        return {
            minioPath: minioPath,
            visible: false,
            btnLoading: false,
            iconChooseFormVisible: false,
            childIndex: -1,
            jsonStr: '',
            editorShow: false,
            ruleId: null
        }
    },
    created() {
    },
    mounted() { },
    methods: {
        onJsonChange() { },
        onJsonSave() { },
        onError() { },
        synchronous() {
        },
        init(orderDetail) {
            this.orderDetail = orderDetail
            let params = {
                processDefKey: this.orderDetail.itsmProKey,
                version: this.orderDetail.version
            }
            getRuleByProcessDefKey(params).then(res => {
                if (res.code == 200) {
                    if (res.data) {
                        this.jsonStr = res.data.content
                        this.ruleId = res.data.id
                    }
                    this.visible = true;
                    this.editorShow = true
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        synchronous() {
            this.editorShow = false
            this.jsonStr = null
            let params = {
                processName: this.orderDetail.itsmProName,
                preNum: this.orderDetail.itsmProKey
            }
            getProcessAdvanced(params).then(res => {
                if (res.code == 200) {
                    this.jsonStr = res.data
                    this.editorShow = true
                    this.$message.success('同步成功')
                } else {
                    this.$message.error(res.msg)
                    this.editorShow = true
                }

            })
        },
        // 表单提交
        dataFormSubmit() {
            if (this.jsonStr) {
                console.log(JSON.parse(this.jsonStr))
                let params = {
                    version: this.orderDetail.version,
                    preNum: this.orderDetail.itsmProKey,
                    processAdvanced: this.jsonStr,
                }

                if (this.ruleId) {
                    params.id = this.ruleId
                }
                this.btnLoading = true
                saveProcessAdvanced(params).then(res => {
                    if (res.code == 200) {
                        this.$message.success('保存成功')
                        this.btnLoading = false

                        this.visible = false
                    } else {
                        this.$message.error(res.msg)
                        this.btnLoading = false

                    }
                })
            } else {
                this.$message.error('规则配置内容不能为空')
            }

        },
    },
}

</script>


<style scoped lang="scss">
.jsoneditor-outer {
    height: 1000px;
}
</style>