/*
 * @Author: HuXiangYu 
 * @Date: 2022-10-19 10:25:11 
 * @Last Modified by: HuXiangYu
 * @Last Modified time: 2023-06-09 09:27:29
 */

<template>
    <el-dialog :title="title"
               :visible.sync="show"
               width="60%"
               custom-class="form-render-dialog"
               v-drag-dialog>
        <div :style="{padding:type!=='view'?'12px 12px 0 12px':'12px'}"
             v-loading="loading">
            <v-form-render :form-data="formConfig"
                           ref="vFormRef">
            </v-form-render>
        </div>
        <span slot="footer"
              v-if="type!=='view'"
              class="dialog-footer">
            <el-button @click="show = false">取 消</el-button>
            <el-button type="primary"
                       :loading="loading"
                       @click="submitForm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
/**
 * 业务表单渲染
 * 一. 场景1--普通表单
 * 1.新增状态下 获取 v-form-render 的 formData，并通过处理提交给新增接口。
 * 2.更新状态下 通过根据ID获取表单数据接口获取到数据后，通过setFormData方法回显数据。
 * 3.查看状态下 不显示表单的提交按钮。
 *
 *
 *  */
import main from '../main'
export default {
    name: 'AceFormRender',
    data() {
        return {
            show: false,
        }
    },
    //混入main
    mixins: [main],

    created() {},
    mounted() {},
    methods: {
        close() {
            this.show = false
        },
        /**
         * 打开编辑弹窗
         * @param {String} type type的值可为'add'、'edit'、'view' 三种 不传为add
         * @param {String} id 在查看和编辑状态下需要传入
         */
        open(type = 'add', id = '') {
            this.show = true
            this.getModelInfo(this.code, () => {
                this.type = type
                //设置标题
                this.setTitleByType(type)
                if (type != 'add' && !id) {
                    this.$notify({
                        title: '错误提示',
                        message:
                            (type === 'edit' ? '编辑' : '查看') +
                            '状态下必须传入【ID】',
                        type: 'error',
                    })
                    return
                }

                if (type == 'edit') {
                    this.editModeInit(id)
                }
                if (type == 'view') {
                    this.viewModeInit(id)
                }
            })
        },
        //根据打开类型设置标题
        setTitleByType(type) {
            switch (type) {
                case 'add':
                    this.title = '新增'
                    break
                case 'edit':
                    this.title = '编辑'
                    break
                default:
                    this.title = '查看'
            }
        },
        /**
         * 编辑模式初始化
         * @param {String} id 在查看和编辑状态下需要传入
         */
        async editModeInit(id) {
            await this.getFormData(id)
        },
        /**
         * 查看模式初始化
         * @param {String} id 在查看和编辑状态下需要传入
         */
        async viewModeInit(id) {
            this.$refs.vFormRef.disableForm()
            await this.getFormData(id)
        },
        //提交表单
        submitForm() {
            this.loading = true
            this.$refs.vFormRef
                .getFormData(true)
                .then((formData) => {
                    let submitFormData = []
                    // Form Validation OK
                    this.formJson.boundWidgetList.forEach((widget) => {
                        for (let key in formData) {
                            if (key === widget.name) {
                                submitFormData.push({
                                    colName: widget.field.tabColName, //列名
                                    subName: widget.field.objColName, //字段名
                                    value: formData[key], //值
                                    type: widget.field.dataType, //数据类型
                                })
                            }
                        }
                    })
                    this.formData.cols = submitFormData //提交的字段数据
                    this.$http({
                        method: 'post',
                        url: this.$http.adornWorkFlowUrl(
                            `modelData/insertData`
                        ),
                        // url:'/modelData/insertData',
                        data: this.formData,
                    }).then(({ data }) => {
                        if (data.code === 40000) {
                            this.show = false
                            this.$emit('success', data.msg)
                            this.$notify({
                                title: '成功',
                                message: '保存成功',
                                type: 'success',
                            })
                        } else {
                            this.$emit('error', data.msg)
                            this.$notify({
                                title: '错误提示',
                                message: data.msg,
                                type: 'error',
                            })
                        }
                        this.loading = false
                    })
                })
                .catch((error) => {
                    this.$notify({
                        title: '错误提示',
                        message: '表单提交请求失败，请检查网络。',
                        type: 'error',
                    })
                    console.error(error)
                    this.loading = false
                })
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep .form-render-dialog {
    .el-dialog__body {
        padding-bottom: 0 !important;
    }
}
</style>