"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const React = require('react');
const ReactDOM = require('react-dom');
const typings = require('./tree.type');
const mobx_react_1 = require('mobx-react');
const $ = require('jquery');
const src_1 = require('../../../../../tree/src');
const src_2 = require('../../../../../../common/auto-bind/src');
const tree_element_component_1 = require('./tree-element/tree-element.component');
const tree_move_box_component_1 = require('./tree-move-box/tree-move-box.component');
require('./tree.scss');
let Tree = class Tree extends React.Component {
    constructor(...args) {
        super(...args);
        this.state = new typings.State();
    }
    componentDidMount() {
        this.childDomInstance = ReactDOM.findDOMNode(this.childInstance);
        this.props.viewport.setTreeDomInstance(this.childDomInstance);
        this.addListener();
    }
    componentWillUnmount() {
        this.props.application.event.off(this.props.application.event.viewportOrTreeComponentMouseOver, this.handleViewportOrTreeComponentMouseOver);
        this.props.application.event.off(this.props.application.event.viewportOrTreeRootComponentMouseLeave, this.handleViewportOrTreeRootComponentMouseLeave);
        this.props.application.event.off(this.props.application.event.changeComponentSelectStatusEvent, this.handleChangeComponentSelectStatus);
    }
    addListener() {
        this.props.application.event.on(this.props.application.event.viewportOrTreeComponentMouseOver, this.handleViewportOrTreeComponentMouseOver);
        this.props.application.event.on(this.props.application.event.viewportOrTreeRootComponentMouseLeave, this.handleViewportOrTreeRootComponentMouseLeave);
        this.props.application.event.on(this.props.application.event.changeComponentSelectStatusEvent, this.handleChangeComponentSelectStatus);
    }
    /**
     * 当视图或者树区域有组件 hover
     */
    handleViewportOrTreeComponentMouseOver(listnerContext, opts) {
        const targetInstance = this.findEditHelperByMapUniqueKey(opts.mapUniqueKey);
        targetInstance.outerMoveBoxToSelf();
        if (opts.type !== 'tree' && this.props.viewport.lastSelectMapUniqueKey === null) {
            // 只有非 tree 上组件触发的 hover, 并且没有选中组件 才会滑动 tree 视图
            // 让 domTree 滚动条滑动到 tree 这个元素实例的位置
            this.scrollToChildren(targetInstance);
        }
    }
    /**
     * 滑动到某个子元素上
     */
    scrollToChildren(child) {
        const $domTree = $(ReactDOM.findDOMNode(this));
        const $treeInstance = $(child.getDomInstance());
        $domTree.stop().animate({
            scrollTop: $treeInstance.offset().top - $domTree.offset().top + $domTree.scrollTop() - 50
        }, 100);
    }
    /**
     * 根据 mapUniqueKey 找到对应子元素
     */
    findEditHelperByMapUniqueKey(mapUniqueKey) {
        const finderPath = this.props.viewport.findComponentPathFromRoot(mapUniqueKey);
        let targetInstance = this.refs[`tree-${this.props.viewport.rootMapUniqueKey}`]['wrappedInstance'];
        finderPath.forEach(path => {
            targetInstance = targetInstance.refs[`tree-${path}`]['wrappedInstance'];
        });
        return targetInstance;
    }
    /**
     * 当视图或者树区域有组件取消 hover
     */
    handleViewportOrTreeRootComponentMouseLeave() {
        // 隐藏树视图高亮框
        this.props.viewport.setTreeLeaveHover();
    }
    /**
     * 更改某个子组件的选中状态
     */
    handleChangeComponentSelectStatus(listnerContext, opts) {
        const targetInstance = this.findEditHelperByMapUniqueKey(opts.mapUniqueKey);
        targetInstance.setSelect(opts.selected);
        this.scrollToChildren(targetInstance);
    }
    /**
     * 设置本元素对象 ref
     * @param ref
     */
    setChildRef(ref) {
        this.childInstance = ref;
    }
    render() {
        return (<div className="_namespace">
                <div className="component-count">
                    实例数:{this.props.viewport.components.size}
                </div>

                <div ref={this.setChildRef}>
                    <src_1.Tree defaultExpendAll={true}>
                        <tree_element_component_1.default mapUniqueKey={this.props.viewport.rootMapUniqueKey} ref={`tree-${this.props.viewport.rootMapUniqueKey}`}/>
                    </src_1.Tree>
                </div>

                <tree_move_box_component_1.default />
            </div>);
    }
};
Tree.defaultProps = new typings.Props();
__decorate([
    src_2.autoBindMethod
], Tree.prototype, "addListener", null);
__decorate([
    src_2.autoBindMethod
], Tree.prototype, "handleViewportOrTreeComponentMouseOver", null);
__decorate([
    src_2.autoBindMethod
], Tree.prototype, "scrollToChildren", null);
__decorate([
    src_2.autoBindMethod
], Tree.prototype, "findEditHelperByMapUniqueKey", null);
__decorate([
    src_2.autoBindMethod
], Tree.prototype, "handleViewportOrTreeRootComponentMouseLeave", null);
__decorate([
    src_2.autoBindMethod
], Tree.prototype, "handleChangeComponentSelectStatus", null);
__decorate([
    src_2.autoBindMethod
], Tree.prototype, "setChildRef", null);
Tree = __decorate([
    mobx_react_1.inject('application', 'viewport'),
    mobx_react_1.observer
], Tree);
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = Tree;