export default {
    props: {
        type: {
            type: String,
            default: 'modal',
            validator: function (value) {
                return ['modal', 'drawer'].indexOf(value) > -1
            }
        },
        compareOnClose: {
            type: Boolean,
            default: true
        },
        action: {
            type: Function
        },
        successMessage: {
            type: String
        }
    },

    data() {
        return {
            visible: false,
            confirmLoading: false,

            form: {}
        }
    },

    computed: {
        body() {
            return this.$slots.default && this.$slots.default[0].componentInstance
        }
    },

    created() {
    },

    methods: {
        renderModal(props) {

            const _props = {
                ...props,
                confirmLoading: this.confirmLoading
            }

            const _on = {
                cancel: () => this.onClose(this.compareOnClose),
                ok: () => this.onOk()
            }

            return (<a-modal {...{ props: _props, on: _on }} class="yo-modal-form">
                {this.renderBody()}
            </a-modal>)
        },

        renderDrawer(props) {

            const _props = {
                ...props
            }

            const _on = {
                close: () => this.onClose(this.compareOnClose),
                ok: () => this.onOk()
            }

            return (<a-drawer {...{ props: _props, on: _on }} class="yo-drawer-form">
                <div class="yo-drawer-form--body">
                    {this.renderBody()}
                </div>
                <div class="ant-drawer-footer">
                    <a-button onClick={_on.close}>取消</a-button>
                    <a-button loading={this.confirmLoading} onClick={_on.ok} type="primary">确定</a-button>
                </div >
            </a-drawer>)
        },

        renderBody() {
            return this.$scopedSlots.default && this.$scopedSlots.default()
        },

        onOpen(data) {
            this.visible = true
            this.$nextTick(async () => {
                if (!this.body) return

                this.body.onInit && await this.body.onInit(data)
                this.body.onFillData && this.body.onFillData(data)
                this.form = this.$_.cloneDeep(this.body.form)
            })
        },

        onClose(compare = false) {
            const close = () => {
                this.body
                    && this.body.onResetFields
                    && this.body.onResetFields()
                this.visible = false
            }

            if (this.body) {
                if (!this.$_.isEqual(this.form, this.body.form) && compare) {
                    this.$confirm({
                        title: '是否确认关闭',
                        content: '当前内容已更改，是否确认不保存并且关闭',
                        onOk: () => {
                            close()
                        }
                    })
                } else {
                    close()
                }
            } else {
                close()
            }
        },

        onOk() {
            this.body
                && this.body.onGetData
                && this.body.onGetData()
                    .then((data) => {
                        this.confirmLoading = true
                        this.action
                            && this.action(data)
                                .then(({ success }) => {
                                    if (success) {
                                        this.$message.success(this.successMessage || '保存成功');
                                        this.onClose();
                                        this.$emit('ok');
                                    }
                                })
                                .finally(() => {
                                    this.confirmLoading = false
                                })
                    }).catch(() => { })
        }
    },

    render() {
        const props = {
            ...this.$props,
            ...this.$attrs,
            visible: this.visible
        }

        return this.type === 'modal' ? this.renderModal(props) : this.renderDrawer(props)
    }
}