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 { Row, Col, Checkbox, Icon, Popover, Radio } from "@whalecloud/fdx";
import couponImg from './imgs/coupon.svg';
import SkuInputNumber from "../sku-input-number";
import "./index.less";
/**
 * @class CampaignItem
 * 一个满系活动，包含其中的商品
 */
export var CampaignItem = function (_Component) {
    _inherits(CampaignItem, _Component);

    function CampaignItem(props) {
        _classCallCheck(this, CampaignItem);

        var _this = _possibleConstructorReturn(this, (CampaignItem.__proto__ || Object.getPrototypeOf(CampaignItem)).call(this, props));

        _this.giftElement = function (gift) {
            var _a;
            return React.createElement(
                Row,
                { key: gift.giftObjId, className: function () {
                        return _this.determinGiftStyle(gift);
                    }() },
                React.createElement(Col, { className: "checkbox-col", span: 1 }),
                React.createElement(
                    Col,
                    { span: 9 },
                    React.createElement(
                        "div",
                        { className: "item-info" },
                        React.createElement(
                            "div",
                            { className: "item-img" },
                            gift.giftType === 'CP' ? React.createElement("img", { src: couponImg }) : React.createElement("img", { className: "item-pic", src: gift.imgUrl })
                        ),
                        React.createElement(
                            "div",
                            { className: "item-detail" },
                            React.createElement(
                                "p",
                                { className: "item-name" },
                                gift.giftName
                            ),
                            React.createElement(
                                "div",
                                { className: "certified-icons" },
                                React.createElement("img", { src: "data:image/svg+xml;base64, " })
                            )
                        )
                    )
                ),
                React.createElement(
                    Col,
                    { span: 5 },
                    React.createElement(
                        "div",
                        { className: "spec-container" },
                        (_a = gift.selectedAttributes) === null || _a === void 0 ? void 0 : _a.map(function (attr) {
                            return React.createElement(
                                "p",
                                { key: attr.value.value },
                                attr.name,
                                ": ",
                                attr.value.title
                            );
                        })
                    )
                ),
                React.createElement(
                    Col,
                    { className: "price-container", span: 3 },
                    React.createElement(
                        "p",
                        { className: "current-price" },
                        "$ 00.00"
                    )
                ),
                React.createElement(
                    Col,
                    { className: "total-price", span: 4 },
                    React.createElement(
                        "p",
                        { className: "total-amount" },
                        "$ 00.00"
                    ),
                    React.createElement(
                        "p",
                        { className: "disabled-text" },
                        gift.num
                    )
                )
            );
        };
        _this.state = {
            campaignInfo: _extends({}, props.campaignItem.campaignInfo),
            itemList: [].concat(_toConsumableArray(props.campaignItem.itemList))
        };
        return _this;
    }

    _createClass(CampaignItem, [{
        key: "componentWillReceiveProps",
        value: function componentWillReceiveProps(nextProps) {
            this.setState({
                campaignInfo: _extends({}, nextProps.campaignItem.campaignInfo),
                itemList: [].concat(_toConsumableArray(nextProps.campaignItem.itemList))
            });
        }
        /**
        * @method composeItemCampaignList
        * @param campaignList {Array} 商品的营销活动数组
        * 组装商品的营销活动选择列表
        */

    }, {
        key: "composeItemCampaignList",
        value: function composeItemCampaignList(campaignList, item) {
            var _this2 = this;

            return React.createElement(
                "div",
                { className: "item-campaign-list" },
                campaignList === null || campaignList === void 0 ? void 0 : campaignList.map(function (campaign) {
                    return React.createElement(
                        "div",
                        { key: campaign.id, className: campaign.selected ? "campaign-item selected" : "campaign-item", onClick: function onClick() {
                                _this2.changeItemCampaign(campaign, item);
                            } },
                        campaign.desc
                    );
                })
            );
        }
    }, {
        key: "changeItemCampaign",
        value: function changeItemCampaign(campaign, item) {
            var _a;
            (_a = item.itemCampaignList) === null || _a === void 0 ? void 0 : _a.map(function (campaign) {
                campaign.selected = false;
            });
            campaign.selected = true;
            item.selectedCampaign = campaign;
            this.triggerCartItemChange([item]);
            this.setState({
                itemList: [].concat(_toConsumableArray(this.state.itemList))
            });
        }
        /**
        * @method itemSpecPopoverChange
        * 把商品上已经选中的参数同步到备选参数数组中去。
        * @param visible 弹出框当前的可见状态
        * @param item 商品条目
        */

    }, {
        key: "itemSpecPopoverChange",
        value: function itemSpecPopoverChange(visible, item) {
            var _a;
            if (visible) {
                if (!item.attrOptions) return;
                (_a = item.selectedAttributes) === null || _a === void 0 ? void 0 : _a.map(function (selectedAttr) {
                    for (var i = 0; i < item.attrOptions.length; i++) {
                        var option = item.attrOptions[i];
                        if (selectedAttr.name === option.name) {
                            var title = selectedAttr.value.title;
                            for (var j = 0; j < option.values.length; j++) {
                                var value = option.values[j];
                                if (value.title === title) {
                                    value.selected = selectedAttr.value.selected;
                                } else {
                                    value.selected = false;
                                }
                            }
                            break;
                        }
                    }
                });
                this.setState({
                    itemList: [].concat(_toConsumableArray(this.state.itemList))
                });
            }
        }
        /**
         * @method chooseItemSpec
         * 修改商品参数
         * @param val
         * @param attr
         */

    }, {
        key: "chooseItemSpec",
        value: function chooseItemSpec(val, attr) {
            attr.values.map(function (temp) {
                temp.selected = false;
            });
            val.selected = true;
            this.setState({
                itemList: [].concat(_toConsumableArray(this.state.itemList))
            });
        }
        /**
         * @method commitItemSpecChange
         * 点OK正式修改商品属性
         * @param item
         */

    }, {
        key: "commitItemSpecChange",
        value: function commitItemSpecChange(item) {
            if (!item.attrOptions) return;
            item.selectedAttributes = [];
            item.attrOptions.map(function (spec) {
                spec.values.map(function (specItem) {
                    if (specItem.selected) {
                        item.selectedAttributes.push({
                            name: spec.name,
                            value: JSON.parse(JSON.stringify(specItem))
                        });
                    }
                });
            });
            this.setState({
                itemList: [].concat(_toConsumableArray(this.state.itemList))
            });
        }
        /***
         * @method composeAttrOptions
         * 组装编辑商品属性的弹出框
         * @param item 商品
         */

    }, {
        key: "composeAttrOptions",
        value: function composeAttrOptions(item) {
            var _this3 = this;

            var _a;
            if (!item.attrOptions) return "";
            return React.createElement(
                "div",
                { className: "edit-item-attr-container" },
                React.createElement(
                    "div",
                    { className: "param-list-container" },
                    (_a = item.attrOptions) === null || _a === void 0 ? void 0 : _a.map(function (attr) {
                        return React.createElement(
                            "div",
                            { key: attr.name, className: "param" },
                            React.createElement(
                                "div",
                                { className: "param-key" },
                                attr.name,
                                ":"
                            ),
                            React.createElement(
                                "div",
                                { className: "param-value" },
                                attr.values.map(function (val) {
                                    return React.createElement(
                                        "div",
                                        { key: val.title, className: val.selected ? "param-tag selected" : "param-tag", onClick: function onClick() {
                                                _this3.chooseItemSpec(val, attr);
                                            } },
                                        val.title
                                    );
                                })
                            )
                        );
                    }),
                    React.createElement(
                        "div",
                        { className: "param" },
                        React.createElement("div", { className: "param-key" }),
                        React.createElement(
                            "div",
                            { className: "param-value" },
                            React.createElement(
                                "div",
                                { className: "ok-btn", onClick: function onClick() {
                                        _this3.commitItemSpecChange(item);
                                    } },
                                "OK"
                            ),
                            React.createElement(
                                "div",
                                { className: "cancel-btn" },
                                "Cancel"
                            )
                        )
                    )
                ),
                React.createElement(
                    "div",
                    { className: "img-container" },
                    React.createElement("img", { src: item.editImgURL })
                )
            );
        }
    }, {
        key: "updateTotalAmount",
        value: function updateTotalAmount(item, num) {
            item.count = num;
            this.setState({
                itemList: [].concat(_toConsumableArray(this.state.itemList))
            });
            this.triggerCartItemChange([item]);
        }
    }, {
        key: "deleteItem",
        value: function deleteItem(item) {
            this.props.onDelItem && this.props.onDelItem(item);
        }
    }, {
        key: "likeItem",
        value: function likeItem(item) {
            this.props.onLikeItem && this.props.onLikeItem(item);
        }
        // 通知外面修改购物车信息，包括数量，是否选中等

    }, {
        key: "triggerCartItemChange",
        value: function triggerCartItemChange(items) {
            this.props.onCartItemChange && this.props.onCartItemChange([].concat(_toConsumableArray(items)));
        }
    }, {
        key: "choseAll",
        value: function choseAll(status) {
            this.state.itemList.map(function (item) {
                item.selected = status;
            });
            var itemList = [].concat(_toConsumableArray(this.state.itemList));
            this.setState({
                itemList: itemList
            });
            this.triggerCartItemChange(itemList);
        }
        /**
         * @method setItemCheckStates 设置单个商品的选中和反选状态
         * @param item
         */

    }, {
        key: "setItemCheckStates",
        value: function setItemCheckStates(item) {
            var status = !item.selected;
            item.selected = status;
            this.setState({
                campaignInfo: _extends({}, this.state.campaignInfo),
                itemList: [].concat(_toConsumableArray(this.state.itemList))
            });
            this.triggerCartItemChange([item]);
        }
        /**
         * @method getItemStateAll
         * 获取所有商品的状态，暴露给外部调用方。
         */

    }, {
        key: "getItemStateAll",
        value: function getItemStateAll() {
            return JSON.stringify(this.state.itemList);
        }
        /**
         * @determinItemStyle
         * 根据商品的属性决定背景样式
         * @param item
         */

    }, {
        key: "determinItemStyle",
        value: function determinItemStyle(item) {
            var styleClass = "cart-item-info";
            if (item.disabled) {
                styleClass += " disabled";
            }
            if (item.selected) {
                styleClass += " selected";
            }
            return styleClass;
        }
        /**
         * @determinGiftStyle
         * 根据赠品的属性决定背景样式
         * @param item
         */

    }, {
        key: "determinGiftStyle",
        value: function determinGiftStyle(item) {
            var _a;
            var styleClass = "gift-item-info";
            if (item.selected) {
                styleClass += " selected";
            }
            if (((_a = this.state.campaignInfo) === null || _a === void 0 ? void 0 : _a.offerGetMethod) === 'O') {
                styleClass += " chose-gift";
            }
            return styleClass;
        }
    }, {
        key: "chooseGift",
        value: function chooseGift(e) {
            var _a, _b;
            this.props.onChooseGift({
                "campaignId": (_a = this.state.campaignInfo) === null || _a === void 0 ? void 0 : _a.id,
                "buygetnRuleId": (_b = this.state.campaignInfo) === null || _b === void 0 ? void 0 : _b.buygetnRuleId,
                "giftObjId": e.target.value
            });
        }
    }, {
        key: "renderGift",
        value: function renderGift() {
            var _this4 = this;

            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
            // 多个赠品，需要选择
            var needChoose = ((_a = this.state.campaignInfo) === null || _a === void 0 ? void 0 : _a.offerGetMethod) === 'O';
            if (needChoose) {
                var defaultVal = (_b = this.state.campaignInfo.giftOffers) === null || _b === void 0 ? void 0 : _b.filter(function (item) {
                    return item.isSelected === 'Y';
                })[0];
                return React.createElement(
                    React.Fragment,
                    null,
                    React.createElement(
                        Radio.Group,
                        { defaultValue: defaultVal === null || defaultVal === void 0 ? void 0 : defaultVal.giftObjId, onChange: function onChange(e) {
                                return _this4.chooseGift(e);
                            } },
                        (_d = (_c = this.state.campaignInfo) === null || _c === void 0 ? void 0 : _c.giftOffers) === null || _d === void 0 ? void 0 : _d.map(function (gift) {
                            return React.createElement(
                                Radio,
                                { value: gift.giftObjId },
                                _this4.giftElement(gift)
                            );
                        })
                    ),
                    (_f = (_e = this.state.campaignInfo) === null || _e === void 0 ? void 0 : _e.giftCoupons) === null || _f === void 0 ? void 0 : _f.map(function (gift) {
                        return _this4.giftElement(gift);
                    })
                );
            } else {
                return React.createElement(
                    React.Fragment,
                    null,
                    (_h = (_g = this.state.campaignInfo) === null || _g === void 0 ? void 0 : _g.giftOffers) === null || _h === void 0 ? void 0 : _h.map(function (gift) {
                        return _this4.giftElement(gift);
                    }),
                    (_k = (_j = this.state.campaignInfo) === null || _j === void 0 ? void 0 : _j.giftCoupons) === null || _k === void 0 ? void 0 : _k.map(function (gift) {
                        return _this4.giftElement(gift);
                    })
                );
            }
        }
    }, {
        key: "render",
        value: function render() {
            var _this5 = this;

            var _a, _b;
            return React.createElement(
                React.Fragment,
                null,
                ((_a = this.state.campaignInfo) === null || _a === void 0 ? void 0 : _a.name) ? React.createElement(
                    "div",
                    { className: "campaignInfo" },
                    React.createElement(
                        "span",
                        { className: "dis" },
                        "Money Off"
                    ),
                    React.createElement(
                        "span",
                        null,
                        this.state.campaignInfo.name
                    )
                ) : null,
                React.createElement("span", { className: "checkAll" + this.props.shopId, onClick: function onClick() {
                        return _this5.choseAll(true);
                    } }),
                React.createElement("span", { className: "uncheck" + this.props.shopId, onClick: function onClick() {
                        return _this5.choseAll(false);
                    } }),
                (_b = this.state.itemList) === null || _b === void 0 ? void 0 : _b.map(function (item) {
                    var _a, _b, _c;
                    return React.createElement(
                        "div",
                        { key: item.id },
                        React.createElement(
                            Row,
                            { className: function () {
                                    return _this5.determinItemStyle(item);
                                }() },
                            item.disabled ? React.createElement(
                                Col,
                                { className: "item-disabled-icon", span: 1 },
                                React.createElement(Icon, { type: "exclamation-circle", theme: "filled" })
                            ) : React.createElement(
                                Col,
                                { className: "checkbox-col", span: 1 },
                                React.createElement(Checkbox, { onChange: function onChange() {
                                        _this5.setItemCheckStates(item);
                                    }, checked: item.selected })
                            ),
                            React.createElement(
                                Col,
                                { span: 9 },
                                React.createElement(
                                    "div",
                                    { className: "item-info" },
                                    React.createElement(
                                        "div",
                                        null,
                                        React.createElement("img", { className: "item-pic", src: item.imgURL })
                                    ),
                                    React.createElement(
                                        "div",
                                        { className: "item-detail" },
                                        React.createElement(
                                            "p",
                                            { className: "item-name" },
                                            item.name
                                        ),
                                        item.disabled ? "" : ((_a = item.itemCampaignList) === null || _a === void 0 ? void 0 : _a.length) > 0 ? React.createElement(
                                            Popover,
                                            { placement: "bottom", content: function () {
                                                    return _this5.composeItemCampaignList(item.itemCampaignList, item);
                                                }(), trigger: "click" },
                                            React.createElement(
                                                "div",
                                                { className: "campaign-container" },
                                                React.createElement(
                                                    "span",
                                                    { className: "campaign-desc" },
                                                    item.selectedCampaign && item.selectedCampaign.desc
                                                ),
                                                React.createElement(Icon, { type: "down" })
                                            )
                                        ) : "",
                                        item.disabled ? "" : React.createElement(
                                            "div",
                                            { className: "certified-icons" },
                                            item.refund7 ? React.createElement("img", { src: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+N+WkqTwvdGl0bGU+CiAgICA8ZyBpZD0i6K6i5Y2VJmFtcDvotK3nianovaYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmiJHnmoTorqLljZUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00MDguMDAwMDAwLCAtNTA2LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0ibGlzdC0jMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzIwLjAwMDAwMCwgNDAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IuiuouWNleS6p+WTgTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAzOC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iN+WkqSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODguMDAwMDAwLCA2OC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgZmlsbD0iIzE0Qzk3RSIgeD0iMCIgeT0iMCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDx0ZXh0IGlkPSI3IiBmb250LWZhbWlseT0iTnVuaXRvU2Fucy1CbGFjaywgTnVuaXRvIFNhbnMiIGZvbnQtc2l6ZT0iMTIiIGZvbnQtd2VpZ2h0PSI3MDAiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHRzcGFuIHg9IjUuNCIgeT0iMTMiPjc8L3RzcGFuPgogICAgICAgICAgICAgICAgICAgICAgICA8L3RleHQ+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=" }) : "",
                                            item.certified ? React.createElement("img", { src: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+5q2j5ZOBPC90aXRsZT4KICAgIDxnIGlkPSLorqLljZUmYW1wO+i0reeJqei9piIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IuaIkeeahOiuouWNlSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQzNC4wMDAwMDAsIC01MDYuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJsaXN0LSMxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMjAuMDAwMDAwLCA0MDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i6K6i5Y2V5Lqn5ZOBMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDM4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSLmraPlk4EiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExNC4wMDAwMDAsIDY4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjMTRDOTdFIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImxvZ28tcGljIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjAwMDAwMCwgMS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIHg9IjAiIHk9IjEiIHdpZHRoPSIxMy41IiBoZWlnaHQ9IjEzLjUiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJsb2dvL0Vjb21tZXJjZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4wMDAwMDAsIDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImhhbmRsZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNS4wMDAwMDAsIDcuNDYwMDAwKSBzY2FsZSgxLCAtMSkgdHJhbnNsYXRlKC01LjAwMDAwMCwgLTcuNDYwMDAwKSB0cmFuc2xhdGUoMC4wMDAwMDAsIDAuNDYwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJMb2dvL0Vjb21tZXJjZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIC0wLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIuMjQsMTAuNDUgQzIuMjQsMTEuODYzODQ5IDMuMzg2MTUxMDQsMTMuMDEgNC44LDEzLjAxIEM2LjIxMzg0ODk2LDEzLjAxIDcuMzYsMTEuODYzODQ5IDcuMzYsMTAuNDUiIGlkPSJQYXRoIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMC42NCI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIwLjkxNjA5NDY2NyIgd2lkdGg9IjkuNiIgaGVpZ2h0PSI5LjUzMzkwNTMzIiByeD0iMSI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IkxvZ28vQ3VydmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuNjgwMDAwLCA0LjY5MDAwMCkgcm90YXRlKC0xODAuMDAwMDAwKSB0cmFuc2xhdGUoLTQuNjgwMDAwLCAtNC42OTAwMDApIHRyYW5zbGF0ZSgxLjY4MDAwMCwgMi42OTAwMDApIiBmaWxsPSIjRUQyMTIxIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik01LjQ0LDAgQzUuNjE2NzMxMTIsMCA1Ljc2LDAuMTQzMjY4ODggNS43NiwwLjMyIEM1Ljc2LDEuOTEwNTgwMDggNC40NzA1ODAwOCwzLjIgMi44OCwzLjIgQzEuMjg5NDE5OTIsMy4yIDAsMS45MTA1ODAwOCAwLDAuMzIgQzAsMC4xNDMyNjg4OCAwLjE0MzI2ODg4LDAgMC4zMiwwIEMwLjQ5NjczMTEyLDAgMC42NCwwLjE0MzI2ODg4IDAuNjQsMC4zMiBDMC42NCwxLjU1NzExNzg0IDEuNjQyODgyMTYsMi41NiAyLjg4LDIuNTYgQzQuMTE3MTE3ODQsMi41NiA1LjEyLDEuNTU3MTE3ODQgNS4xMiwwLjMyIEM1LjEyLDAuMTQzMjY4ODggNS4yNjMyNjg4OCwwIDUuNDQsMCBaIiBpZD0iUGF0aCI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=" }) : ""
                                        )
                                    )
                                )
                            ),
                            React.createElement(
                                Col,
                                { span: 5 },
                                item.disabled ? React.createElement(
                                    "div",
                                    { className: "spec-container-disabled" },
                                    item.selectedAttributes && ((_b = item.selectedAttributes) === null || _b === void 0 ? void 0 : _b.map(function (attr) {
                                        return React.createElement(
                                            "p",
                                            { key: attr.value.value },
                                            attr.name,
                                            ": ",
                                            attr.value.title
                                        );
                                    }))
                                ) : item.selectedAttributes ? React.createElement(
                                    Popover,
                                    { ref: "itemSpecPopover", onVisibleChange: function onVisibleChange(visible) {
                                            _this5.itemSpecPopoverChange(visible, item);
                                        }, placement: "bottomLeft", content: function () {
                                            return item.attrOptions ? _this5.composeAttrOptions(item) : "";
                                        }(), trigger: "click" },
                                    React.createElement(
                                        "div",
                                        { className: "spec-container" },
                                        item.selectedAttributes && ((_c = item.selectedAttributes) === null || _c === void 0 ? void 0 : _c.map(function (attr) {
                                            return React.createElement(
                                                "p",
                                                { key: attr.value.value },
                                                attr.name,
                                                ": ",
                                                attr.value.title
                                            );
                                        }))
                                    )
                                ) : ""
                            ),
                            React.createElement(
                                Col,
                                { className: "price-container", span: 3 },
                                React.createElement(
                                    "p",
                                    { className: "current-price" },
                                    item.currentPrice
                                ),
                                item.disabled ? "" : React.createElement(
                                    "div",
                                    null,
                                    React.createElement(
                                        "p",
                                        { className: "origin-price" },
                                        item.originPrice
                                    ),
                                    React.createElement(
                                        "p",
                                        { className: "cut-off" },
                                        item.cutOff
                                    )
                                )
                            ),
                            React.createElement(
                                Col,
                                { className: "total-price", span: 4 },
                                React.createElement(
                                    "p",
                                    { className: "total-amount" },
                                    item.totalAmount
                                ),
                                item.disabled ? React.createElement(
                                    "p",
                                    { className: "disabled-text" },
                                    item.count
                                ) : React.createElement(SkuInputNumber, { min: item.minNumber, max: item.maxNumber, disabled: !(item.hasStock == null || item.hasStock), value: item.count, onChange: function onChange(num) {
                                        _this5.updateTotalAmount(item, num);
                                    } })
                            ),
                            React.createElement(
                                Col,
                                { className: "btns", span: 2 },
                                React.createElement(Icon, { className: "ope-icon", type: "delete", onClick: function onClick() {
                                        _this5.deleteItem(item);
                                    } }),
                                item.disabled ? "" : item.isCollection ? React.createElement(Icon, { className: "ope-icon", style: { color: '#ed2121' }, theme: "filled", type: "heart", onClick: function onClick() {
                                        _this5.likeItem(item);
                                    } }) : React.createElement(Icon, { className: "ope-icon", type: "heart", onClick: function onClick() {
                                        _this5.likeItem(item);
                                    } })
                            )
                        )
                    );
                }),
                this.renderGift()
            );
        }
    }]);

    return CampaignItem;
}(Component);
/**
 * @class CartItem
 * 购物车中的一个店铺，包含满系活动和产品条目，此组件界面和数据结构都比较复杂，状态全部由组件自己管理。
 */

var CartItem = function (_Component2) {
    _inherits(CartItem, _Component2);

    function CartItem(props) {
        _classCallCheck(this, CartItem);

        var _this6 = _possibleConstructorReturn(this, (CartItem.__proto__ || Object.getPrototypeOf(CartItem)).call(this, props));

        _this6.state = {
            shopInfo: _extends({}, props.cartItem.shopInfo),
            campaigns: [].concat(_toConsumableArray(props.cartItem.campaigns))
        };
        return _this6;
    }

    _createClass(CartItem, [{
        key: "componentWillReceiveProps",
        value: function componentWillReceiveProps(nextProps) {
            this.setState({
                shopInfo: _extends({}, nextProps.cartItem.shopInfo),
                campaigns: [].concat(_toConsumableArray(nextProps.cartItem.campaigns))
            });
        }
    }, {
        key: "choseShop",
        value: function choseShop(val) {
            var info = _extends({}, this.state.shopInfo);
            info.selected = val;
            this.setState({
                shopInfo: info
            });
        }
        /**
         * @method composeShopCoupons
         * 组装店铺级的优惠券结构
         */

    }, {
        key: "composeShopCoupons",
        value: function composeShopCoupons() {
            var _a, _b;
            var onCollectCoupon = this.props.onCollectCoupon;

            return this.state.shopInfo.shopCouponList.length > 0 ? (_b = (_a = this.state.shopInfo) === null || _a === void 0 ? void 0 : _a.shopCouponList) === null || _b === void 0 ? void 0 : _b.map(function (coupon) {
                return React.createElement(
                    "div",
                    { key: coupon.id, className: "shop-coupon-list" },
                    React.createElement(
                        "div",
                        { className: "coupon-item" },
                        React.createElement(
                            "div",
                            { className: "coupon-left" },
                            React.createElement(
                                "div",
                                { className: "coupon-num" },
                                coupon.amount
                            ),
                            React.createElement(
                                "div",
                                { className: "coupon-title" },
                                coupon.desc
                            ),
                            React.createElement(
                                "div",
                                { className: "coupon-time" },
                                coupon.activeTime
                            )
                        ),
                        React.createElement(
                            "div",
                            { className: "coupon-right" },
                            coupon.collected ? React.createElement("div", { className: "collected-icon" }) : React.createElement(
                                "div",
                                { className: "collect-btn", onClick: function onClick() {
                                        onCollectCoupon && onCollectCoupon(coupon);
                                    } },
                                "Collect"
                            )
                        )
                    )
                );
            }) : React.createElement(
                "div",
                null,
                "No Coupon"
            );
        }
        /**
         * @determinShopStyle
         * 根据店铺的属性决定背景样式
         * @param item
         */

    }, {
        key: "determinShopStyle",
        value: function determinShopStyle(shopInfo) {
            var styleClass = "cart-shop-info";
            if (shopInfo.disabled) {
                styleClass += " disabled";
            }
            if (shopInfo.selected) {
                styleClass += " selected";
            }
            return styleClass;
        }
        /**
         * @method setCheckStatusAll 设置全部商品的选中状态
         */

    }, {
        key: "setCheckStatusAll",
        value: function setCheckStatusAll() {
            var info = _extends({}, this.state.shopInfo);
            info.selected = !this.state.shopInfo.selected;
            this.setState({
                shopInfo: info
            });
            if (info.selected) {
                var elements = document.getElementsByClassName("checkAll" + info.shopId);
                if ((elements === null || elements === void 0 ? void 0 : elements.length) > 0) {
                    for (var index = 0; index < elements.length; index++) {
                        var element = elements[index];
                        element.click();
                    }
                }
            } else {
                var _elements = document.getElementsByClassName("uncheck" + info.shopId);
                if ((_elements === null || _elements === void 0 ? void 0 : _elements.length) > 0) {
                    for (var _index = 0; _index < _elements.length; _index++) {
                        var _element = _elements[_index];
                        _element.click();
                    }
                }
            }
        }
        // 任一商品被选中或取消选中

    }, {
        key: "cartItemChange",
        value: function cartItemChange(val) {
            var _a;
            var itemList = [];
            (_a = this.state.campaigns) === null || _a === void 0 ? void 0 : _a.forEach(function (campaign) {
                campaign.itemList.forEach(function (item) {
                    var _a;
                    if (item.id === ((_a = val[0]) === null || _a === void 0 ? void 0 : _a.id)) {
                        itemList.push(val[0]);
                    } else {
                        itemList.push(item);
                    }
                });
            });
            this.props.onCartItemChange(val);
            var temp = false;
            itemList.map(function (item) {
                if (item.selected) {
                    temp = true;
                }
            });
            this.choseShop(temp);
        }
    }, {
        key: "render",
        value: function render() {
            var _this7 = this;

            var _a;
            return React.createElement(
                "div",
                { className: "cart-item-container" },
                React.createElement(
                    Row,
                    { className: function () {
                            return _this7.determinShopStyle(_this7.state.shopInfo);
                        }() },
                    React.createElement(
                        Col,
                        { className: "checkbox-col", span: 1 },
                        this.state.shopInfo.disabled ? "" : React.createElement(Checkbox, { checked: this.state.shopInfo.selected, onChange: function onChange() {
                                _this7.setCheckStatusAll();
                            } })
                    ),
                    React.createElement(
                        Col,
                        { className: "shop-info", span: 18 },
                        React.createElement(Icon, { className: "shop-icon", type: "shop" }),
                        React.createElement(
                            "span",
                            { className: "shop-name" },
                            this.state.shopInfo.shopName
                        ),
                        React.createElement(Icon, { className: "msg-icon", type: "message", theme: "filled" }),
                        this.state.shopInfo.disabled ? "" : React.createElement(
                            "span",
                            { className: "tip" },
                            this.state.shopInfo.tip
                        )
                    ),
                    this.state.shopInfo.disabled ? "" : this.state.shopInfo.shopCouponList ? React.createElement(
                        Col,
                        { className: "coupon", span: 5 },
                        React.createElement(
                            Popover,
                            { placement: "bottomRight", content: function () {
                                    return _this7.composeShopCoupons();
                                }(), trigger: "click" },
                            React.createElement(
                                "div",
                                { className: "shop-coupon-icon", onClick: function onClick() {
                                        _this7.props.dropDownCoupon && _this7.props.dropDownCoupon(_this7.props.cartItem);
                                    } },
                                "Coupons"
                            )
                        )
                    ) : ""
                ),
                ((_a = this.state.campaigns) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.state.campaigns.map(function (campaignItem) {
                    return React.createElement(CampaignItem, { campaignItem: campaignItem, choseShop: function choseShop(val) {
                            return _this7.choseShop(val);
                        }, onDelItem: _this7.props.onDelItem, onLikeItem: _this7.props.onLikeItem, onCartItemChange: function onCartItemChange(val) {
                            return _this7.cartItemChange(val);
                        }, onChooseGift: function onChooseGift(val) {
                            return _this7.props.onChooseGift(val);
                        }, shopId: _this7.state.shopInfo.shopId });
                }) : null
            );
        }
    }]);

    return CartItem;
}(Component);

export default CartItem;