<template>
    <component :is="is"
               v-if="is"
               v-bind="$attrs"
               v-on="new$listeners"
               ref="comp"
               @change="change"></component>
</template>

<script>
let components = {
    input:()=>import("./components/input")
}
export default {
    name: 'view-edit',
    data() {
        return {
            is: '',
            editVisible: false,
        }
    },
    props: {
        // （必填）组件类型
        type: {
            type: String,
            default: 'input'
        },
        value: {
        },
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    created() {
        this.is = components[this.type] || components['input'];
    },
    watch: {
        value: {
            immediate: true,
            handler(val, prevVal) {
                if (val !== prevVal && val !== this.oldVal) {
                    this.getRef("comp").then(function (comp) {
                        comp.initValue(val);
                    })
                }
            }
        },
    },
    computed: {
        new$listeners() {
            return Object.assign(this.$listeners, {
                change: this.change,
            })
        }
    },
    methods: {
        change(value) {
            this.oldVal = value;
            this.$emit('change', value);
        },
    }
}
</script>
<style lang="less" scoped>
.wrap {
    height: 100%;
    overflow: hidden;
}
</style>
