import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["item", "isEdit", "onUpdateItem", "onCheckChange", "onAddOrSubtract"];
import React, { useCallback, useState, useMemo, useEffect } from 'react';
import "./good-item.scss";
import subtractPng from "../../../assets/icon/shop/subtract.png";
import addPng from "../../../assets/icon/shop/add.png";
import checkboxPng from "../../../assets/icon/shop/checkbox.png";

/**
 * 数据
 */

var GoodItem = function GoodItem(_ref) {
  var item = _ref.item,
    isEdit = _ref.isEdit,
    onUpdateItem = _ref.onUpdateItem,
    onCheckChange = _ref.onCheckChange,
    onAddOrSubtract = _ref.onAddOrSubtract,
    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _otherProps = otherProps || {};
  var _useState = useState(item),
    localItem = _useState[0],
    setLocalItem = _useState[1];
  useEffect(function () {
    console.log('修改', localItem.id, localItem.checked);
  }, [item.checked]);
  var isUndercarriage = useMemo(function () {
    return localItem.productGrounding === '已下架' || localItem.productGrounding === '1';
  }, [localItem]);

  // const localCover = useMemo(() => {
  //   return localItem.imgUrl || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg';
  // }, [localItem]);

  var handleSubtract = useCallback(function () {
    if (localItem.amount <= 1) return;
    var prevItem = _extends({}, localItem, {
      amount: localItem.amount - 1,
      isUpdate: true
    });
    setLocalItem(prevItem);
    onUpdateItem(_extends({}, localItem, {
      amount: localItem.amount - 1,
      isUpdate: true
    }));
    onAddOrSubtract('subtract', prevItem);
  }, [localItem, onUpdateItem]);
  var handleAdd = useCallback(function () {
    var prevItem = _extends({}, localItem, {
      amount: localItem.amount + 1,
      isUpdate: true
    });
    setLocalItem(prevItem);
    onUpdateItem(prevItem);
    onAddOrSubtract('add', prevItem);
  }, [localItem, onUpdateItem]);

  // const handleCheckChange = useCallback((e: CheckboxChangeEvent) => {
  //   const prevItem = {...localItem, checked: e.target.checked}
  //   setLocalItem(prevItem)
  //   onCheckChange(prevItem);
  // }, [onCheckChange]);

  var handleCheckChange = useCallback(function () {
    var prevItem = _extends({}, localItem, {
      checked: !localItem.checked
    });
    setLocalItem(prevItem);
    onCheckChange(prevItem);
  }, [onCheckChange]);
  return /*#__PURE__*/React.createElement("div", _extends({
    className: "view"
  }, _otherProps), /*#__PURE__*/React.createElement("div", {
    className: "left"
  }, item.checked ? /*#__PURE__*/React.createElement("div", {
    className: "checkbox-img"
  }, /*#__PURE__*/React.createElement("img", {
    className: "checkbox-img",
    src: checkboxPng,
    onClick: handleCheckChange
  })) : /*#__PURE__*/React.createElement("div", {
    className: "checkbox2",
    onClick: handleCheckChange
  }), /*#__PURE__*/React.createElement("div", {
    className: "cover-box"
  }, isUndercarriage && /*#__PURE__*/React.createElement("div", {
    className: "overlay"
  }, /*#__PURE__*/React.createElement("span", null, "\u5DF2\u4E0B\u67B6")), /*#__PURE__*/React.createElement("img", {
    className: "cover",
    src: localItem.imgUrl,
    alt: "cover",
    style: {
      objectFit: 'cover'
    }
  }))), /*#__PURE__*/React.createElement("div", {
    className: "info"
  }, /*#__PURE__*/React.createElement("div", {
    className: "title"
  }, localItem.productName), /*#__PURE__*/React.createElement("div", {
    className: "good-item-footer"
  }, /*#__PURE__*/React.createElement("div", {
    className: "price"
  }, "\xA5", /*#__PURE__*/React.createElement("span", null, localItem.productPromotionPrice || localItem.productPrice), localItem.productPromotionPrice && /*#__PURE__*/React.createElement("span", {
    className: "line-through"
  }, "\xA5", localItem.productPrice)), !isUndercarriage && /*#__PURE__*/React.createElement("div", {
    className: "actions"
  }, /*#__PURE__*/React.createElement("div", {
    className: "subtract",
    onClick: handleSubtract
  }, /*#__PURE__*/React.createElement("img", {
    className: "icon",
    src: subtractPng,
    alt: "subtract"
  })), /*#__PURE__*/React.createElement("div", {
    className: "text"
  }, localItem.amount), /*#__PURE__*/React.createElement("div", {
    className: "add",
    onClick: handleAdd
  }, /*#__PURE__*/React.createElement("img", {
    className: "icon",
    src: addPng,
    alt: "add"
  }))))));
};
GoodItem.displayName = 'GoodItem';
export default GoodItem;