"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _toConsumableArray2 = require("babel-runtime/helpers/toConsumableArray");

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _fdx = require("@whalecloud/fdx");

require("./index.less");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var TabPane = _fdx.Tabs.TabPane;
var TMP_KEY = '-1';
var TAB_KEY_PREFIX = 'tabKey_';

var CascaderSelect = function (_Component) {
    (0, _inherits3["default"])(CascaderSelect, _Component);

    function CascaderSelect() {
        (0, _classCallCheck3["default"])(this, CascaderSelect);

        var _this = (0, _possibleConstructorReturn3["default"])(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 = (0, _extends3["default"])({}, 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((0, _toConsumableArray3["default"])(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((0, _toConsumableArray3["default"])(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 _react2["default"].createElement(
                "div",
                { className: "cascader-sel-popover-box", style: popStyle },
                _react2["default"].createElement(
                    _fdx.Tabs,
                    { type: "card", activeKey: tabActiveKey, onChange: _this.onTabChange },
                    tabDatas && tabDatas.map(function (perData) {
                        return _react2["default"].createElement(
                            TabPane,
                            { tab: _react2["default"].createElement(
                                    "span",
                                    null,
                                    perData.label,
                                    " ",
                                    _react2["default"].createElement(_fdx.Icon, { type: "down" })
                                ), key: perData.key },
                            _react2["default"].createElement(
                                _fdx.Row,
                                { gutter: 1 },
                                perData.datas && perData.datas.length > 0 && perData.datas.map(function (perChild) {
                                    return _react2["default"].createElement(
                                        _fdx.Col,
                                        { className: "col-item", span: 8, key: perChild.value, title: perChild.label },
                                        _react2["default"].createElement(
                                            "span",
                                            { className: perData.value === perChild.value ? 'selected' : '', onClick: function onClick() {
                                                    _this.onSelectItemClick(perChild);
                                                } },
                                            perChild.label
                                        )
                                    );
                                })
                            )
                        );
                    })
                )
            );
        };
        return _this;
    }

    (0, _createClass3["default"])(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((0, _toConsumableArray3["default"])(options))
                        });
                    } else {
                        var datas = [].concat((0, _toConsumableArray3["default"])(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((0, _toConsumableArray3["default"])(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((0, _toConsumableArray3["default"])(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 _react2["default"].createElement(
                "div",
                null,
                _react2["default"].createElement(
                    _fdx.Popover,
                    { content: menuDom, trigger: "hover", placement: popPlacement },
                    hasChange ? _react2["default"].createElement(
                        "div",
                        { className: "cascader-select-change-box", style: (0, _extends3["default"])({}, style) },
                        _react2["default"].createElement(
                            "div",
                            { className: "show-value-wrap", title: showValue },
                            showValue
                        ),
                        _react2["default"].createElement(
                            "div",
                            { className: "change" },
                            "Change"
                        )
                    ) : _react2["default"].createElement(
                        "div",
                        { className: "cascader-select-box", style: (0, _extends3["default"])({}, style) },
                        _react2["default"].createElement(
                            "div",
                            { className: "show-value", title: showValue },
                            showValue
                        ),
                        _react2["default"].createElement(_fdx.Icon, { type: "down" })
                    )
                )
            );
        }
    }]);
    return CascaderSelect;
}(_react.Component);

exports["default"] = CascaderSelect;
module.exports = exports['default'];