"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-element.type');
const mobx_react_1 = require('mobx-react');
const classNames = require('classnames');
const src_1 = require('../../../../../../tree/src');
const src_2 = require('../../../../../../../common/auto-bind/src');
require('./tree-element.scss');
let TreeElement_1;
let TreeElement = TreeElement_1 = class TreeElement extends React.Component {
    constructor(...args) {
        super(...args);
        this.state = new typings.State();
    }
    componentWillMount() {
        // 从 store 找到自己信息
        this.componentInfo = this.props.viewport.components.get(this.props.mapUniqueKey);
    }
    componentDidMount() {
        this.childDomInstance = ReactDOM.findDOMNode(this.childInstance);
    }
    /**
     * 返回当前 dom 对象
     */
    getDomInstance() {
        return this.childDomInstance;
    }
    /**
     * 渲染 treeNode 的 title
     */
    treeNameRender() {
        // 如果 uniqueKey 中有 gaea, 说明是内置组件, 用背景加深方式展现
        if (this.componentInfo.props.gaeaUniqueKey.indexOf('gaea') > -1) {
            return (<div className="flex">
                    <i className={`fa fa-${this.componentInfo.props.gaeaIcon} icons gaea`}/>
                    <span className="text">{this.componentInfo.props.gaeaName}</span>
                </div>);
        }
        else {
            return (<div className="flex">
                    <i className={`fa fa-${this.componentInfo.props.gaeaIcon} icons`}/>
                    <span className="text">{this.componentInfo.props.gaeaName}</span>
                </div>);
        }
    }
    /**
     * 鼠标移上去
     */
    handleMouseOver(event) {
        event.stopPropagation();
        this.props.application.event.emit(this.props.application.event.viewportOrTreeComponentMouseOver, {
            mapUniqueKey: this.props.mapUniqueKey,
            type: 'tree'
        });
        this.props.viewport.setHoveringComponentMapUniqueKey(this.props.mapUniqueKey);
    }
    /**
     * 最外层 鼠标移开
     */
    handleMouseLeave(event) {
        event.stopPropagation();
        this.props.application.event.emit(this.props.application.event.viewportOrTreeRootComponentMouseLeave, {
            mapUniqueKey: this.props.mapUniqueKey,
            type: 'tree'
        });
        this.props.viewport.setHoveringComponentMapUniqueKey(null);
    }
    /**
     * 让树视图高亮框移动到自己身上
     */
    outerMoveBoxToSelf() {
        this.props.viewport.setHoverTreeComponent(this.childDomInstance);
    }
    /**
     * 点击树后触发
     */
    handleClick() {
        event.stopPropagation();
        // 设置选中组件的 uniqueKey
        this.props.viewport.setCurrentEditComponentMapUniqueKey(this.props.mapUniqueKey);
        // 把上一个组件触发非选中
        if (this.props.viewport.lastSelectMapUniqueKey !== null) {
            // 如果上个选中组件没被关
            this.props.application.event.emit(this.props.application.event.changeComponentSelectStatusEvent, {
                mapUniqueKey: this.props.viewport.lastSelectMapUniqueKey,
                selected: false
            });
        }
        // 设置自己为上一个组件
        this.props.viewport.setLastSelectMapUniqueKey(this.props.mapUniqueKey);
        // 触发选中组件 event, 各 layout 会接收, 设置子组件的 setSelect
        this.props.application.event.emit(this.props.application.event.changeComponentSelectStatusEvent, {
            mapUniqueKey: this.props.mapUniqueKey,
            selected: true
        });
    }
    /**
     * 修改自己选中状态
     */
    setSelect(selected) {
        this.setState({
            selected: selected
        });
    }
    render() {
        // 渲染后的结果
        let resultElement;
        // 子元素
        let childs = null;
        // gaea-layout 可以有子元素
        if (this.componentInfo.props.gaeaUniqueKey === 'gaea-layout' && this.componentInfo.layoutChilds) {
            childs = this.componentInfo.layoutChilds.map(layoutChildUniqueMapKey => {
                return (<TreeElement_1.ObserveTreeElement key={layoutChildUniqueMapKey} mapUniqueKey={layoutChildUniqueMapKey} ref={`tree-${layoutChildUniqueMapKey}`}/>);
            });
        }
        let childProps = {
            render: this.treeNameRender,
            defaultExpendAll: true,
            onMouseOver: this.handleMouseOver,
            onClick: this.handleClick,
            ref: (ref) => {
                this.childInstance = ref;
            },
            className: classNames({
                '_namespace': true,
                'selected': this.state.selected
            }),
            // 父级是布局组件才有
            onMouseLeave: this.componentInfo.props.gaeaUniqueKey === 'gaea-layout' ? this.handleMouseLeave : null,
            // 主动绑定用到的数据
            name: this.componentInfo.props.name,
            icon: this.componentInfo.props.icon
        };
        resultElement = React.createElement(src_1.TreeNode, childProps, childs);
        return resultElement;
    }
};
TreeElement.defaultProps = new typings.Props();
// 装饰器给外部用挺方便,这个专门给自己用 ^_^
TreeElement.ObserveTreeElement = mobx_react_1.inject('application', 'viewport')(mobx_react_1.observer(TreeElement));
__decorate([
    src_2.autoBindMethod
], TreeElement.prototype, "treeNameRender", null);
__decorate([
    src_2.autoBindMethod
], TreeElement.prototype, "handleMouseOver", null);
__decorate([
    src_2.autoBindMethod
], TreeElement.prototype, "handleMouseLeave", null);
__decorate([
    src_2.autoBindMethod
], TreeElement.prototype, "outerMoveBoxToSelf", null);
__decorate([
    src_2.autoBindMethod
], TreeElement.prototype, "handleClick", null);
__decorate([
    src_2.autoBindMethod
], TreeElement.prototype, "setSelect", null);
TreeElement = TreeElement_1 = __decorate([
    mobx_react_1.inject('viewport', 'application'),
    mobx_react_1.observer
], TreeElement);
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = TreeElement;