import _toConsumableArray from "babel-runtime/helpers/toConsumableArray";
import _extends from "babel-runtime/helpers/extends";
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
import React, { Component } from "react";
import { Icon, Popover, Tabs, Row, Col } from '@whalecloud/fdx';
import "./index.less";
var TabPane = Tabs.TabPane;
var TMP_KEY = '-1';
var TAB_KEY_PREFIX = 'tabKey_';

var CascaderSelect = function (_Component) {
    _inherits(CascaderSelect, _Component);

    function CascaderSelect() {
        _classCallCheck(this, CascaderSelect);

        var _this = _possibleConstructorReturn(this, (CascaderSelect.__proto__ || Object.getPrototypeOf(CascaderSelect)).apply(this, arguments));

        _this.state = {
            showValue: '',
            tabDatas: [],
            tabActiveKey: ''
        };
        _this.onTabChange = function (tabActiveKey) {
            _this.setState({
                tabActiveKey: tabActiveKey
            });
        };
        _this.onSelectItemClick = function (item) {
            var _this$props$selectTip = _this.props.selectTip,
                selectTip = _this$props$selectTip === undefined ? 'Please select' : _this$props$selectTip;
            var _this$state = _this.state,
                tabActiveKey = _this$state.tabActiveKey,
                tabDatas = _this$state.tabDatas;

            var hasChildFlag = item.children && item.children.length > 0;
            var newTabDatas = [];
            if (tabDatas && tabDatas.length) {
                var _iteratorNormalCompletion = true;
                var _didIteratorError = false;
                var _iteratorError = undefined;

                try {
                    for (var _iterator = tabDatas[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
                        var p = _step.value;

                        var perObj = _extends({}, p);
                        if (p.key === tabActiveKey) {
                            perObj.value = item.value;
                            perObj.label = item.label;
                            perObj.key = "" + TAB_KEY_PREFIX + item.value;
                            newTabDatas.push(perObj);
                            if (hasChildFlag) {
                                newTabDatas.push({
                                    value: TMP_KEY,
                                    key: TMP_KEY,
                                    label: selectTip,
                                    datas: [].concat(_toConsumableArray(item.children))
                                });
                            }
                            break;
                        } else {
                            newTabDatas.push(perObj);
                        }
                    }
                } catch (err) {
                    _didIteratorError = true;
                    _iteratorError = err;
                } finally {
                    try {
                        if (!_iteratorNormalCompletion && _iterator["return"]) {
                            _iterator["return"]();
                        }
                    } finally {
                        if (_didIteratorError) {
                            throw _iteratorError;
                        }
                    }
                }
            } else {
                var first = {
                    value: item.value,
                    label: item.label,
                    key: "" + TAB_KEY_PREFIX + item.value
                };
                newTabDatas.push(first);
                if (hasChildFlag) {
                    newTabDatas.push({
                        value: TMP_KEY,
                        key: TMP_KEY,
                        label: selectTip,
                        datas: [].concat(_toConsumableArray(item.children))
                    });
                }
            }
            var tabActiveKeyVal = newTabDatas[newTabDatas.length - 1].key;
            _this.setState({
                tabDatas: newTabDatas,
                tabActiveKey: tabActiveKeyVal
            });
            // 如果没有child，就触发change事件
            if (!hasChildFlag) {
                var showLabelArr = newTabDatas.map(function (p) {
                    return p.label;
                });
                _this.setState({
                    showValue: showLabelArr.join(' ')
                });
                var onChange = _this.props.onChange;

                if (onChange) {
                    var showValueArr = newTabDatas.map(function (p) {
                        return p.value;
                    });
                    onChange(showValueArr, showLabelArr);
                }
            }
        };
        _this.renderPopDom = function () {
            var _this$state2 = _this.state,
                tabDatas = _this$state2.tabDatas,
                tabActiveKey = _this$state2.tabActiveKey;
            var _this$props$popStyle = _this.props.popStyle,
                popStyle = _this$props$popStyle === undefined ? { width: '511px' } : _this$props$popStyle;

            return React.createElement(
                "div",
                { className: "cascader-sel-popover-box", style: popStyle },
                React.createElement(
                    Tabs,
                    { type: "card", activeKey: tabActiveKey, onChange: _this.onTabChange },
                    tabDatas && tabDatas.map(function (perData) {
                        return React.createElement(
                            TabPane,
                            { tab: React.createElement(
                                    "span",
                                    null,
                                    perData.label,
                                    " ",
                                    React.createElement(Icon, { type: "down" })
                                ), key: perData.key },
                            React.createElement(
                                Row,
                                { gutter: 1 },
                                perData.datas && perData.datas.length > 0 && perData.datas.map(function (perChild) {
                                    return React.createElement(
                                        Col,
                                        { className: "col-item", span: 8, key: perChild.value, title: perChild.label },
                                        React.createElement(
                                            "span",
                                            { className: perData.value === perChild.value ? 'selected' : '', onClick: function onClick() {
                                                    _this.onSelectItemClick(perChild);
                                                } },
                                            perChild.label
                                        )
                                    );
                                })
                            )
                        );
                    })
                )
            );
        };
        return _this;
    }

    _createClass(CascaderSelect, [{
        key: "componentDidMount",
        value: function componentDidMount() {
            // selectTip='Please select'
            var _props = this.props,
                options = _props.options,
                defaultValue = _props.defaultValue,
                value = _props.value;

            var showValueArr = [];
            var tabDatas = [];
            var tabActiveKey = null;
            var valueArr = value || defaultValue;
            if (valueArr && valueArr.length > 0) {
                var tmpData = null;
                valueArr.forEach(function (p) {
                    if (!tmpData) {
                        tmpData = options.find(function (p1) {
                            return p1.value === p;
                        });
                        tabDatas.push({
                            value: p,
                            key: "" + TAB_KEY_PREFIX + p,
                            label: tmpData.label,
                            datas: [].concat(_toConsumableArray(options))
                        });
                    } else {
                        var datas = [].concat(_toConsumableArray(tmpData.children));
                        tmpData = tmpData.children.find(function (p2) {
                            return p2.value === p;
                        });
                        tabDatas.push({
                            value: p,
                            key: "" + TAB_KEY_PREFIX + p,
                            label: tmpData.label,
                            datas: datas
                        });
                    }
                    showValueArr.push(tmpData.label);
                });
            } else {
                var firstObj = options[0];
                tabDatas.push({
                    value: firstObj.value,
                    key: "" + TAB_KEY_PREFIX + firstObj.value,
                    label: firstObj.label,
                    datas: [].concat(_toConsumableArray(options))
                });
                showValueArr.push(firstObj.label);
                if (firstObj.children && firstObj.children.length) {
                    var _props$selectTip = this.props.selectTip,
                        selectTip = _props$selectTip === undefined ? 'Please select' : _props$selectTip;

                    tabDatas.push({
                        value: TMP_KEY,
                        key: TMP_KEY,
                        label: selectTip,
                        datas: [].concat(_toConsumableArray(firstObj.children))
                    });
                }
            }
            tabActiveKey = tabDatas[tabDatas.length - 1].key;
            this.setState({
                tabDatas: tabDatas,
                tabActiveKey: tabActiveKey,
                showValue: showValueArr.join(' ')
            });
        }
    }, {
        key: "render",
        value: function render() {
            var _props2 = this.props,
                _props2$popPlacement = _props2.popPlacement,
                popPlacement = _props2$popPlacement === undefined ? 'bottomLeft' : _props2$popPlacement,
                _props2$style = _props2.style,
                style = _props2$style === undefined ? { width: '511px' } : _props2$style,
                _props2$hasChange = _props2.hasChange,
                hasChange = _props2$hasChange === undefined ? false : _props2$hasChange;
            var tabActiveKey = this.state.tabActiveKey;

            var menuDom = tabActiveKey ? this.renderPopDom() : null;
            var showValue = this.state.showValue;

            return React.createElement(
                "div",
                null,
                React.createElement(
                    Popover,
                    { content: menuDom, trigger: "hover", placement: popPlacement },
                    hasChange ? React.createElement(
                        "div",
                        { className: "cascader-select-change-box", style: _extends({}, style) },
                        React.createElement(
                            "div",
                            { className: "show-value-wrap", title: showValue },
                            showValue
                        ),
                        React.createElement(
                            "div",
                            { className: "change" },
                            "Change"
                        )
                    ) : React.createElement(
                        "div",
                        { className: "cascader-select-box", style: _extends({}, style) },
                        React.createElement(
                            "div",
                            { className: "show-value", title: showValue },
                            showValue
                        ),
                        React.createElement(Icon, { type: "down" })
                    )
                )
            );
        }
    }]);

    return CascaderSelect;
}(Component);

export default CascaderSelect;