import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import useEngineContext from "../../../hooks/useEngineContext.js";
import { request } from "../../../utils/index.js";
import { getCustomerList } from "./serve.js";
import CustomerList from "./List/index.js";
import AddClient from "./Add/index.js";
import React, { useEffect, useMemo, useState } from "react";
import { locales } from "@pisell/utils";
import PlusCircle from "@pisell/icon/es/PlusCircle";
import classNames from "classnames";
import { useRequest } from "ahooks";
import ChevronLeft from "@pisell/icon/es/ChevronLeft";
import "./index.less";
//#region src/components/pisellSelectCustomerModal/RightPanel/index.tsx
const defaultParams = {
	skip: 1,
	num: 10,
	sort_by: "id",
	search: ""
};
const RightPanel = (props) => {
	const { value, onChange, phone } = props;
	const [page, setPage] = useState("list");
	const context = useEngineContext();
	request.setRequest(context.appHelper.utils.request);
	const [customerOrigin, setCustomerOrigin] = useState({
		skip: 1,
		count: 0,
		list: []
	});
	const [params, setParams] = useState(defaultParams);
	const _getCustomerList = useRequest(getCustomerList, {
		manual: true,
		onSuccess: (res, param) => {
			const _params = param[0];
			setParams(_params);
			let list = [];
			if (_params.skip === 1) list = res.list;
			else list = customerOrigin.list.concat(res.list);
			setCustomerOrigin(_objectSpread2(_objectSpread2({}, res), {}, { list }));
		}
	});
	useEffect(() => {
		if (page !== "list") return;
		_getCustomerList.run(_objectSpread2(_objectSpread2({}, defaultParams), {}, { search: phone }));
	}, [phone, page]);
	const header = useMemo(() => {
		if (page === "list") return /* @__PURE__ */ React.createElement("div", { className: "select-customer-right-panel-header" }, /* @__PURE__ */ React.createElement("span", null, phone ? locales.getText("pisell2.text.result-found") : locales.getText("pisell2.text.personnel-list")), /* @__PURE__ */ React.createElement("span", {
			className: "select-customer-right-panel-header-create-btn",
			onClick: () => {
				setPage("create");
			}
		}, /* @__PURE__ */ React.createElement(PlusCircle, { className: "select-customer-right-panel-header-icon" }), locales.getText("pisell2.text.create")));
		return /* @__PURE__ */ React.createElement("div", { className: classNames("select-customer-right-panel-header", { "select-customer-right-panel-header-create": page === "create" }) }, /* @__PURE__ */ React.createElement(ChevronLeft, {
			className: "select-customer-right-panel-header-icon select-customer-right-panel-header-icon-back",
			onClick: () => {
				setPage("list");
			}
		}), locales.getText("pisell2.text.create-new-client"));
	}, [phone, page]);
	/**
	* @title: 创建客户
	* @description:
	* @param {any} values
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-11-02 09:31
	*/
	const addChange = (values) => {
		setPage("list");
		if (values === null || values === void 0 ? void 0 : values.is_checked) onChange === null || onChange === void 0 || onChange(values);
		setCustomerOrigin(_objectSpread2(_objectSpread2({}, customerOrigin), {}, {
			count: customerOrigin.count + 1,
			list: [values].concat(customerOrigin.list)
		}));
	};
	return /* @__PURE__ */ React.createElement("div", { className: "select-customer-right-panel" }, /* @__PURE__ */ React.createElement("div", { className: "select-customer-right-panel-header" }, header), page === "list" ? /* @__PURE__ */ React.createElement(CustomerList, {
		loading: _getCustomerList.loading,
		phone,
		customerOrigin,
		value,
		onChange,
		onLoadMore: () => {
			if (customerOrigin.list.length >= customerOrigin.count) return;
			_getCustomerList.run(_objectSpread2(_objectSpread2({}, params), {}, { skip: params.skip + 1 }));
		},
		setPage
	}) : null, page === "create" ? /* @__PURE__ */ React.createElement(AddClient, {
		phone,
		onChange: addChange
	}) : null);
};
//#endregion
export { RightPanel as default };
