/**
 * mars-pro可视化开发
 * 参考资源库:
 * https://github.com/SortableJS/Sortable
 * https://github.com/wesbos/keycodes/issues
 * @author xiufu.wang
 */
import Layout from './layouts'
import State from './state'
import { on, off } from 'mars-pro/src/utils/dom'
import ElForm from 'mars-pro/packages/form'

export default {
    name: 'ProOnlineDesign',
    componentName: 'ProOnlineDesign',
    components: {
        ElForm
    },
    provide() {
        return {
            proOnlineDesign: this,
        };
    },
    components: {
        Layout
    },
    beforeCreate() {
        this.xstate = new State()
        this.xstate.dvm = this
    },
    render() {
        return (
            <ElForm> <Layout></Layout></ElForm>
        )
    },

    mounted() {
        const ownerDocument = this.$el.ownerDocument
        on(ownerDocument, 'mousemove', this.xstate.onMousemove)
        on(ownerDocument, 'mousedown', this.xstate.onMousedown)
        on(ownerDocument, 'mouseup', this.xstate.onMouseup)
        on(ownerDocument, 'click', this.xstate.onClick)
        on(ownerDocument, 'dblclick', this.xstate.ondblClick)
        on(window, 'keydown', this.xstate.onKeyDown)
        on(window, 'keyup', this.xstate.onKeyUp)
    },
    beforeDestroy() {
        const ownerDocument = this.$el.ownerDocument
        off(ownerDocument, 'mousemove', this.xstate.onMousemove)
        off(ownerDocument, 'mousedown', this.xstate.onMousedown)
        off(ownerDocument, 'mouseup', this.xstate.onMouseup)
        off(ownerDocument, 'click', this.xstate.onClick)
        off(ownerDocument, 'dblclick', this.xstate.ondblClick)
        off(window, 'keydown', this.xstate.onKeyDown)
        off(window, 'keyup', this.xstate.onKeyUp)

    }
}