<template>
    <div>
        <el-dialog :visible.sync="isVisible" v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" :title="title" :width="width">
            <formpage ref="formpage"></formpage>
            <div slot="footer">
                <el-button size="medium" @click="close">取消</el-button>
                <el-button size="medium" type="primary" @click="handelConfirm">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import formpage from './form'
export default {
    inheritAttrs: false,
    components: {formpage},
    props: {
        visible: {
            type: Boolean,
            default() {
                return false
            }
        },
        title: {
            type: String,
            default () {
                return "dialog"
            }
        },
        width: {
            type: String,
            required: false,
            default() {
                return "50%"    
            }
        }
    },
    data() {
        return {}
    },
    computed: {
        isVisible: {
            get: function () {
                return this.visible;
            },
            set: function (newValue) {
                return newValue;
            }
        }
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
        update(data) {
            this.$nextTick(() => {
                this.$refs['formpage'].formData = data;
            })
        },
        onOpen() {},
        onClose() {
            this.close()
        },
        close() {
            this.$emit('close', this.formData)
        },
        handelConfirm() {
            const elform = this.$refs['formpage'].$refs['elForm']
            elform.validate(valid => {
                if (!valid) return
                this.$emit('confirm', elform.model)
                this.close()
            })
        },
    }
}
</script>

<style>
</style>
