<template>
    <el-dialog :visible.sync="visible" fullscreen lock-scroll class="JNPF-full-dialog"
        :show-close="false" :modal="false">
        <div class="main">
            <div class="top">
                <div class="top-title" v-if="visible">
                    <div style="opacity: 0.5;">流程接入配置</div> /
                    <div>表单配置管理</div> /
                    <div style="font-size: 20px;font-weight: bold;"> {{orderDetail.itsmProName}}
                    </div>
                </div>
                <div>
                    <el-button type="primary" @click="saveForm">
                        保存
                    </el-button>
                    <el-button @click="closeDialog">
                        取消
                    </el-button>
                </div>
            </div>
            <div class="content" v-if="itsmDrawingList">
                <Generator ref="generator" :conf="formData" :modelType="dataForm.type"
                    :webType="dataForm.webType" :dbType="dbType" :formInfo='dataForm'
                    @drawingListChange="drawingListChange" :isITSM="true"
                    :itsmDrawingList="itsmDrawingList" />
            </div>

        </div>
    </el-dialog>
</template>

<script>

import Generator from '@/components/Generator/index/Home'
import mixin from '@/mixins/generator/form'

import { getFormJson, saveFormJson } from "@/api/governmentCloud/processConfiguration/processConfiguration";



export default {
    mixins: [mixin],
    components: { Generator },
    data() {
        return {
            visible: false,
            orderDetail: null,//流程数据
            itsmDrawingList: null,
            nowList: {
                fields: null
            }
        }
    },
    created() {
        console.log(this.formData)
    },
    methods: {
        init(orderDetail, type) {
            console.log(orderDetail)
            console.log(type)
            this.orderDetail = orderDetail
            this.visible = true

            let params = {
                itsmProNum: this.orderDetail.itsmProKey, // 流程Key
                version: this.orderDetail.version, // 版本
                fieldOperantConfig: type, // 类别（qw qw_detail wx wx_detail）
            }
            getFormJson(params).then(res => {
                if (res.code == 200) {
                    //增加placeholder
                    let list = JSON.parse(JSON.stringify(res.data))
                    list.forEach(module => {
                        module.__config__.children.forEach(filed => {
                            this.getPlaceholder(filed)
                            if (filed.__config__.children) {
                                filed.__config__.children.forEach(listFiled => {
                                    this.getPlaceholder(listFiled)
                                })
                            }
                        })
                    });
                    this.itsmDrawingList = JSON.parse(JSON.stringify(list))
                } else {
                    this.$message({
                        type: 'error',
                        message: res.msg,
                        duration: 1500,
                        onClose: () => {
                            this.closeDialog()
                        }
                    })
                }
            })

        },
        getPlaceholder(n) {
            if (['custom-radio', 'custom-checkbox', 'custom-select', 'custom-group', 'custom-datePicker', 'custom-timePicker', 'custom-member'].includes(n.__config__.jnpfKey)) {
                n.placeholder = '请选择' + n.__config__.label
            } else if (['custom-uploadFile'].includes(n.__config__.jnpfKey)) {
                n.placeholder = '请上传' + n.__config__.label
            } else {
                n.placeholder = '请输入' + n.__config__.label
            }
        },
        drawingListChange(list) {
            this.nowList.fields = JSON.parse(JSON.stringify(list))
        },

        //关闭配置页面
        closeDialog() {
            this.$emit("close");
        },
        //保存配置
        saveForm() {
            this.nowList.fields.forEach(m => {
                m.__config__.children.forEach(n => {
                    if (['custom-checkbox', 'custom-number', 'custom-richText'].includes(n.__config__.jnpfKey)) {
                        delete n.__config__.defaultValue
                    }
                })
            });
            this.nowList.proKey = this.orderDetail.itsmProKey
            this.nowList.version = this.orderDetail.version

            saveFormJson(this.nowList).then(res => {
                if (res.code == 200) {
                    this.$message.success("保存成功");
                    // this.closeDialog();
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.main {
    background-color: #f0f2f5;
    padding: 0;
    min-height: 100vh;
    .top {
        background-color: #fff;
        width: 100%;
        height: 7%;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .top-title {
            margin-left: 0px;
            display: flex;
            font-size: 18px;
            align-items: center;
            div {
                margin: 0 10px;
            }
        }
    }
    .content {
        padding: 20px;
        width: 100%;
        height: 93%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>