import React, { useMemo } from 'react';
import classNames from 'classnames';
import { Skeleton, Button } from 'antd';
import CustomerCard from "../../CustomerCard";
import CheckCircle from '@pisell/icon/es/CheckCircle';
import { PisellEmpty } from '@pisell/materials';
import PlusCircle from '@pisell/icon/es/PlusCircle';
import "./index.less";
import { locales } from '@pisell/utils';
var CustomerList = function CustomerList(props) {
  var value = props.value,
    onChange = props.onChange,
    phone = props.phone,
    customerOrigin = props.customerOrigin,
    onLoadMore = props.onLoadMore,
    loading = props.loading,
    setPage = props.setPage;
  var list = useMemo(function () {
    var _list = (customerOrigin === null || customerOrigin === void 0 ? void 0 : customerOrigin.list) || [];
    return _list;
    // return _list.filter((item: any) => {
    //   // 本地筛选字段,   区号+手机号+邮箱
    //   const searchStr = `${item.country_calling_code || ''}${
    //     item.phone || ''
    //   }_${item.email || ''}`;

    //   if (searchStr.indexOf(phone) > -1) {
    //     return true;
    //   }

    //   return false;
    // });
  }, [customerOrigin, phone]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, list.length ? /*#__PURE__*/React.createElement("div", {
    className: "select-customer-right-panel-list"
  }, list.map(function (item) {
    var active = item.id === (value === null || value === void 0 ? void 0 : value.id);
    return /*#__PURE__*/React.createElement(CustomerCard, {
      key: item.id,
      className: classNames('select-customer-right-panel-item', {
        'select-customer-right-panel-item-active': active
      }),
      customer: item,
      showIcon: active,
      customIcon: /*#__PURE__*/React.createElement(CheckCircle, {
        style: {
          fontSize: 28,
          color: '#079455'
        }
      }),
      onClickItem: function onClickItem() {
        onChange(item);
      }
    });
  }), customerOrigin.list.length < customerOrigin.count ? /*#__PURE__*/React.createElement("div", {
    className: "select-customer-right-panel-load-more"
  }, /*#__PURE__*/React.createElement(Button, {
    onClick: onLoadMore,
    loading: loading
  }, locales.getText('pisell2.text.load-more'))) : null) : !loading ? /*#__PURE__*/React.createElement(PisellEmpty, {
    description: locales.getText('pisell2.text.no-results-found'),
    imageStyle: {
      height: 'auto'
    },
    extraDescription: /*#__PURE__*/React.createElement("div", {
      className: "select-customer-right-panel-add",
      onClick: function onClick() {
        setPage('create');
      }
    }, /*#__PURE__*/React.createElement(PlusCircle, {
      className: "select-customer-right-panel-header-icon"
    }), /*#__PURE__*/React.createElement("span", null, locales.getText('pisell2.text.create-new-client')))
  }) : /*#__PURE__*/React.createElement(Skeleton, {
    round: true,
    active: true
  }));
};
export default CustomerList;