'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

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

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

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 _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

require('./ImgsPicker.scss');

var _index = require('../upload/index');

var _index2 = _interopRequireDefault(_index);

var _index3 = require('../imgs-preview/index');

var _index4 = _interopRequireDefault(_index3);

var _utils = require('../utils/utils');

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

var ImgsPicker = function (_Component) {
	(0, _inherits3.default)(ImgsPicker, _Component);

	function ImgsPicker(props, context) {
		(0, _classCallCheck3.default)(this, ImgsPicker);

		var _this = (0, _possibleConstructorReturn3.default)(this, (ImgsPicker.__proto__ || Object.getPrototypeOf(ImgsPicker)).call(this, props, context));

		_this.handleDel = function (item) {
			var _this$props = _this.props,
			    value = _this$props.value,
			    max = _this$props.max,
			    getParse = _this$props.getParse,
			    onChange = _this$props.onChange;

			if (max !== 0 && value.length > max) {
				_this.props.onError && _this.props.onError({
					status: 0,
					msg: '超出上传限制'
				});
				return;
			}
			if (onChange) {
				onChange(value.filter(function (_item) {
					return _item != item;
				}));
			} else {
				_this.setState({
					value: _this.state.value.filter(function (_item) {
						return _item != item;
					})
				});
			}
		};

		_this.handleFileSuccess = function (res) {
			var _this$props2 = _this.props,
			    max = _this$props2.max,
			    value = _this$props2.value,
			    getParse = _this$props2.getParse,
			    onChange = _this$props2.onChange;

			if (onChange) {
				onChange([].concat((0, _toConsumableArray3.default)(value), [getParse ? getParse(res) : res.data.url]));
			} else {
				_this.setState({
					value: [].concat((0, _toConsumableArray3.default)(_this.state.value), [getParse ? getParse(res) : res.data.url])
				});
			}
		};

		_this.handleFileError = function (res) {
			console.log(res);
			_this.props.onError && _this.props.onError(res);
		};

		_this.handlePreview = function (e, i) {
			e.persist();
			var _this$props3 = _this.props,
			    value = _this$props3.value,
			    onChange = _this$props3.onChange;

			value = onChange ? value : _this.state.value;
		};

		_this.state = {
			value: props.value
		};
		return _this;
	}

	(0, _createClass3.default)(ImgsPicker, [{
		key: 'componentWillReceiveProps',
		value: function componentWillReceiveProps(nextProps) {
			var _this2 = this;

			var onChange = this.props.onChange;

			if (!onChange && !nextProps.value.every(function (item, index) {
				return item === _this2.props.value[index];
			})) {
				this.setState({
					value: nextProps.value
				});
			}
		}
	}, {
		key: 'render',
		value: function render() {
			var _this3 = this;

			var _props = this.props,
			    Tag = _props.tag,
			    style = _props.style,
			    className = _props.className,
			    value = _props.value,
			    max = _props.max,
			    _props$upload = _props.upload,
			    upload = _props$upload === undefined ? {} : _props$upload,
			    onChange = _props.onChange,
			    disabled = _props.disabled;

			value = onChange ? value : this.state.value;
			return _react2.default.createElement(
				Tag,
				{ className: 'rcp-imgs-picker' + (className ? ' ' + className : ''), style: style },
				value.map(function (item, index) {
					return _react2.default.createElement(
						'div',
						{ className: '__item __normal', key: item },
						_react2.default.createElement(
							'div',
							{
								className: '__img',
								style: { backgroundImage: 'url("' + item + '")' }
							},
							_react2.default.createElement(
								'div',
								{ className: '__mask', style: disabled ? { display: 'none' } : {} },
								_react2.default.createElement(
									'span',
									{ onClick: function onClick(e) {
											return _this3.handleDel(item);
										} },
									'\u2716'
								)
							)
						)
					);
				}),
				!disabled && (value.length < max || max === 0) && _react2.default.createElement(_index2.default, (0, _extends3.default)({
					className: '__upload __normal',
					tag: 'div',
					onFileSuccess: this.handleFileSuccess,
					onFileError: this.handleFileError
				}, upload))
			);
		}
	}]);
	return ImgsPicker;
}(_react.Component);

ImgsPicker.propTypes = {
	tag: _propTypes2.default.string,
	max: _propTypes2.default.number,
	style: _propTypes2.default.object,
	value: _propTypes2.default.array,
	onChange: _propTypes2.default.func,
	onError: _propTypes2.default.func,
	disabled: _propTypes2.default.bool
};
ImgsPicker.defaultProps = {
	style: {},
	tag: 'div',
	max: 3,
	disabled: false
};
exports.default = ImgsPicker;