<template>
    <Modal
        :closable="false"
        :mask-closable="false"
        :title="formTitle"
        :value="true"
        :width="width"
    >
        <WebForm
            :biz-guid="bizGuid"
            :config="config"
            :guid="guid"
            :opType="opType"
            ref="form"
        ></WebForm>
        <div slot="footer">
            <Button
                @click="onCancel"
                size="large"
                type="text"
                v-if="editable"
            >{{$t('it.webform.cancelText')}}</Button>
            <Button
                @click="onOK"
                size="large"
                type="primary"
            >{{$t('it.webform.okText')}}</Button>
        </div>
    </Modal>
</template>
<script>
import WebForm from './SuperForm'

export default {
    name: 'ModalForm',
    data() {
        return {
            title: undefined,
            /*表单config*/
            config: undefined,
            /*操作类型*/
            opType: ''
        }
    },
    props: {
        guid: {
            type: String
        },
        bizGuid: {
            type: [String, Number]
        }
    },
    computed: {
        formTitle() {
            let title = this.title

            if (this.title) {
                return this.title
            } else {
                switch (this.opType) {
                    case 'insert':
                        return '新增'
                    case 'update':
                        return '修改'
                    case 'browser':
                        return '浏览'
                }
            }
        },

        width() {
            return this.config.colWidths.reduce((a, b) => a + b)
        },

        editable() {
            return this.opType === 'insert' || this.opType === 'update'
        }
    },
    components: {
        WebForm
    },
    methods: {
        onCancel() {
            this.remove()
        },
        onOK() {
            if (this.editable) {
                this.$refs.form
                    .save()
                    .then(guid => {
                        if (guid) {
                            this.remove()
                            this.onOKCb(guid)
                        }
                    })
                    .catch(_ => _)
            } else {
                this.remove()
            }
        },
        remove() {
            setTimeout(() => {
                this.destroy()
            }, 300)
        },
        destroy() {
            this.$destroy()
            document.body.removeChild(this.$el)
        }
    }
}
</script>
<style>
</style>