<template>
    <div>
        <Modal v-model="opened"
            scrollable
            :width="formView.width||'800'">
            <div slot="header">
                <slot name="header">
                    <span class="title">{{ formView.name }}</span>
                    <span class="description">{{ formView.description }}</span>
                </slot>
            </div>
            <div class="ivu-ml-8 ivu-mr-8">
                <view-form ref="form"
                    :view-code="viewCode"
                    :readonly="readonly"
                    :defaultData="defaultData"
                    :setting-enable="settingEnable"
                    @on-change="onChange"
                    @on-ready="onReady">
                    <template slot-scope="{ form }"
                        slot="top">
                        <slot name="top"
                            :form="form"></slot>
                    </template>
                    <template slot-scope="{ form, code }"
                        slot="column">
                        <slot name="column"
                            :form="form"
                            :code="code"></slot>
                    </template>
                    <template slot-scope="{ form }"
                        slot="bottom">
                        <slot name="bottom"
                            :form="form"></slot>
                    </template>
                </view-form>
            </div>
            <div slot="footer">
                <slot name="footer">
                    <Button type="primary"
                        custom-icon="fa fa-save"
                        v-if="saveEnable"
                        @click="onSave">保存</Button>
                </slot>
                <Button type="default"
                    custom-icon="fa fa-times"
                    @click="close">关闭</Button>
                <Button type="error"
                    title="设置"
                    custom-icon="fa fa-cog"
                    v-if="settingEnable && allow('permission/formView')"
                    @click="settingOpen"></Button>
            </div>
        </Modal>
        <form-setting ref="setting"
            v-if="settingActive"
            :is-setting="true"
            :data-view="formView"
            @on-change="init(viewCode)" />
    </div>
</template>
<script>
    import mixinPage from '../../mixins/page';
    import modelApi from '../../api/model';
    import customModelApi from '../../api/customModel';
    import formSetting from './form-setting';

    export default {
        mixins: [mixinPage],
        components: { formSetting },
        data() {
            return {
                opened: false,
                formView: {},
                settingActive: false
            };
        },
        async created() {},
        props: {
            // 表单视图代码
            viewCode: {
                type: String
            },
            // 只读
            readonly: {
                type: Boolean,
                default: false
            },
            // 预设默认值
            defaultData: {
                type: Object,
                default() {
                    return {};
                }
            },
            // 是否允许点击遮罩层关闭
            maskClosable: {
                type: Boolean,
                default: true
            },
            // 是否允许保存
            saveEnable: {
                type: Boolean,
                default: true
            },
            // 是否允许配置界面
            settingEnable: {
                type: Boolean,
                default: true
            }
        },
        computed: {
            // formView () {
            //     return this.$refs.form.formView;
            // },
            data() {
                return this.$refs.form.data;
            },
            columns() {
                return this.$refs.form.columns;
            }
        },
        methods: {
            // 初始化
            async init(viewCode, callback) {
                await this.$refs.form.init(viewCode);

                if (typeof callback === 'function') {
                    callback();
                }
            },
            // 加载视图
            loadView(view) {
                this.$refs.form.loadView(view);
            },
            open(data, compare) {
                if (data) {
                    this.$refs.form.data = this.copy(data);
                    this.$refs.form.compareData = compare;
                    // this.$refs.form.reset();
                } else {
                    this.$refs.form.setDefault();
                }

                setTimeout(() => {
                    this.$refs.form.onDataChange();
                    this.opened = true;
                });
            },
            openDefault(def) {
                this.$refs.form.setDefault(def);

                setTimeout(() => {
                    this.$refs.form.onDataChange();
                    this.opened = true;
                });
            },
            close() {
                this.opened = false;
            },
            onChange(sender, oldValue, newValue, selected) {
                this.$emit('on-change', sender, oldValue, newValue, selected);
            },
            onReady(formView) {
                this.formView = formView;
            },
            async onSave() {
                let isOK = await this.$refs.form.validate();

                if (!isOK) {
                    this.error('有内容不符合要求，请正确填写！');
                } else {
                    this.confirm('确定要保存吗？', async () => {
                        this.$emit('on-before-save');

                        if (this.formView.isCustom) {
                            if (!this.data.id) {
                                await customModelApi.add(this.formView.model, this.data);
                            } else {
                                await customModelApi.update(this.formView.model, this.data);
                            }
                        } else {
                            if (!this.data.id) {
                                await modelApi.add(this.formView.model, this.data);
                            } else {
                                await modelApi.update(this.formView.model, this.data);
                            }
                        }

                        this.success('操作成功!', () => {
                            this.$refs.form.data = {};
                            this.$emit('on-after-save');
                            this.close();
                        });
                    });
                }
            },
            // 打开设置界面
            settingOpen() {
                this.settingActive = true;

                setTimeout(async () => {
                    this.$refs.setting.open(this.formView, this.copy(this.formView.columns));
                });
            },
            // 强制更新
            forceUpdate() {
                this.$refs.form.$forceUpdate();
            },
            // 设为默认值
            setDefault(data) {
                this.$refs.form.setDefault(data);
            },
            // 验证
            validate() {
                return this.$refs.form.validate();
            }
        }
    };
</script>
