import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["dataList", "handleOnLoad", "handleOnSubmit", "handleOnDelete", "handleGoodUpdate", "isLogin"];
import React, { useRef, useState, useCallback, useEffect } from 'react';
import "./index.scss";
import { default as GoodItem } from "./components/good-item";
import checkboxPng from "../../assets/icon/shop/checkbox.png";

// import arrowImg from '../../assets/icon/mine/right.png'

var ShoppingCart = function ShoppingCart(_ref) {
  var dataList = _ref.dataList,
    handleOnLoad = _ref.handleOnLoad,
    handleOnSubmit = _ref.handleOnSubmit,
    handleOnDelete = _ref.handleOnDelete,
    handleGoodUpdate = _ref.handleGoodUpdate,
    isLogin = _ref.isLogin,
    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _otherProps = otherProps || {};
  dataList = dataList.map(function (item) {
    return _extends({}, item, {
      checked: item.checked || false,
      isUpdate: item.isUpdate || false,
      price: item.productPromotionPrice || item.productPrice || 0
    });
  });
  // 转换 Vue 的 ref 为 React 的 useState 和 useRef
  // const isProgrammaticallyChanging = useRef(false);
  var _useState = useState(false),
    isEdit = _useState[0],
    setIsEdit = _useState[1];
  var _useState2 = useState(dataList),
    list = _useState2[0],
    setList = _useState2[1]; // 假设 dataList 是传入的 props
  var isBeforeUnmount = useRef(false);
  var _useState3 = useState(false),
    checked = _useState3[0],
    setChecked = _useState3[1];
  var _useState4 = useState(dataList),
    items = _useState4[0],
    setItems = _useState4[1];
  useEffect(function () {
    // 初始化列表，添加 checked 和 isUpdate 属性
    var initialItems = (list || []).map(function (item) {
      return _extends({}, item, {
        checked: item.checked || false,
        isUpdate: item.isUpdate || false,
        price: item.productPromotionPrice || item.productPrice || 0
      });
    });
    setItems(initialItems);
    console.log('items', items, list);
  }, [list]);

  // 转换 Vue 的方法到 React 的函数
  var updateEdit = function updateEdit() {
    setIsEdit(!isEdit);
  };

  // 处理 item 更新
  var handleItemUpdate = useCallback(function (index, updatedItem) {
    var newList = [].concat(list);
    newList[index] = updatedItem;
    setList(newList);
  }, [list]);

  // 计算已选商品列表
  var selectDataList = useCallback(function () {
    return items.filter(function (item) {
      return item.checked;
    });
  }, [items]);

  // 计算购物车总数量
  var localTotal = useCallback(function () {
    var num = 0;
    if (selectDataList().length > 0) {
      num = selectDataList().reduce(function (sum, item) {
        return sum + item.amount;
      }, 0);
    }
    console.log('num', num);
    return num;
  }, [selectDataList]);

  // 计算总价
  var localTotalPrice = useCallback(function () {
    return selectDataList().reduce(function (sum, item) {
      return sum + item.price * item.amount;
    }, 0);
  }, [selectDataList]);

  /**
   * 商品修改事件
   * */
  var onAddOrSubtract = function onAddOrSubtract(type, item) {
    console.log('type', type);
    if (handleGoodUpdate) {
      handleGoodUpdate(type, item);
    }
  };

  // 处理 checkChange 事件
  var checkChange = useCallback(function (item) {
    // 根据 Vue 代码的上下文，这里可能需要处理一些逻辑
    // 由于没有提供 checkChange 的具体实现，这里仅作为占位符
    var shopList = items.map(function (data) {
      if (data.id == item.id) {
        data.checked = item.checked;
      }
      return data;
    });
    setItems(shopList);
    setChecked(shopList.every(function (oItem) {
      return oItem.checked === true;
    }));
  }, []);

  // 处理全选/取消全选
  var checkAllChange = useCallback(function (newValue) {
    setChecked(newValue);
    var shopList = items.map(function (data) {
      data.checked = newValue;
      return data;
    });
    setItems(shopList);
    console.log('切换', items);
  }, []);

  // 提交
  var submit = useCallback(function () {
    // 实现提交逻辑
    console.log('提交购物车', selectDataList());
    if (handleOnSubmit) {
      handleOnSubmit(selectDataList());
    }
  }, []);

  // 删除购物车商品
  var removeShopCar = useCallback(function () {
    // 实现删除逻辑，比如清空列表或调用后端接口
    console.log('删除购物车商品');
    if (handleOnDelete) {
      handleOnDelete(selectDataList());
    }
    // setItems([]); // 如果要清空购物车
  }, []);
  console.log('dataList', isBeforeUnmount);
  return /*#__PURE__*/React.createElement("div", _extends({
    className: "shopping-cart"
  }, _otherProps), /*#__PURE__*/React.createElement("div", {
    style: {
      padding: '12.5px 12.5px 68px 12.5px'
    }
  }, items.length > 0 && /*#__PURE__*/React.createElement("div", {
    className: "header"
  }, /*#__PURE__*/React.createElement("div", {
    className: "number"
  }, "\u6570\u91CF\uFF1A", list.length), /*#__PURE__*/React.createElement("div", {
    className: "text",
    onClick: updateEdit,
    style: {
      color: isEdit ? '#EC5C29' : '#333333'
    }
  }, isEdit ? '完成' : '管理')), /*#__PURE__*/React.createElement("div", null, list.map(function (item, index) {
    return /*#__PURE__*/React.createElement(GoodItem, {
      key: index // 在 React 中，列表的每个元素都应该有一个唯一的 key
      ,
      item: item // 假设 GoodItem 组件通过 props 接收 item
      ,
      isEdit: isEdit,
      onAddOrSubtract: onAddOrSubtract,
      onUpdateItem: function onUpdateItem(updatedItem) {
        return handleItemUpdate(index, updatedItem);
      } // 自定义事件处理函数，传递给 GoodItem 组件
      ,
      onCheckChange: checkChange // 假设 checkChange 是需要传递给 GoodItem 的另一个事件处理函数
    });
  }))), /*#__PURE__*/React.createElement("div", {
    className: "footer",
    style: {
      display: items.length > 0 ? 'block' : 'none'
    }
  }, !isEdit ? /*#__PURE__*/React.createElement("div", {
    className: "box"
  }, /*#__PURE__*/React.createElement("div", {
    className: "left"
  }, checked ? /*#__PURE__*/React.createElement("div", {
    className: "checkbox-img"
  }, /*#__PURE__*/React.createElement("img", {
    className: "checkbox-img",
    src: checkboxPng,
    onClick: function onClick() {
      return checkAllChange(false);
    }
  })) : /*#__PURE__*/React.createElement("div", {
    className: "checkbox2",
    onClick: function onClick() {
      return checkAllChange(true);
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "text"
  }, "\u5168\u9009")), /*#__PURE__*/React.createElement("div", {
    className: "footer-info"
  }, /*#__PURE__*/React.createElement("div", {
    className: "text"
  }, "\u5DF2\u9009", localTotal(), "\u4EF6,", /*#__PURE__*/React.createElement("span", null, "\u5408\u8BA1\uFF1A")), /*#__PURE__*/React.createElement("div", {
    className: "price"
  }, "\xA5", localTotalPrice().toFixed(2)), /*#__PURE__*/React.createElement("div", {
    className: "btn",
    onClick: submit
  }, "\u7ED3\u7B97"))) : /*#__PURE__*/React.createElement("div", {
    className: "box box2"
  }, /*#__PURE__*/React.createElement("div", {
    className: "left"
  }, checked ? /*#__PURE__*/React.createElement("div", {
    className: "checkbox-img"
  }, /*#__PURE__*/React.createElement("img", {
    className: "checkbox-img",
    src: checkboxPng,
    onClick: function onClick() {
      return checkAllChange(false);
    }
  })) : /*#__PURE__*/React.createElement("div", {
    className: "checkbox2",
    onClick: function onClick() {
      return checkAllChange(true);
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "text"
  }, "\u5168\u9009")), /*#__PURE__*/React.createElement("div", {
    className: "footer-info"
  }, /*#__PURE__*/React.createElement("div", {
    className: "btn",
    onClick: removeShopCar
  }, "\u5220\u9664")))));
};
ShoppingCart.displayName = 'ShoppingCart';
export default ShoppingCart;