function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useState, useRef } from 'react';
import { PisellLookup } from "./PisellLookup";
import { SearchOutlined } from '@ant-design/icons';
import { Card, Space, List, Tag, Button } from 'antd';

/**
 * PisellLookup 组件 Storybook
 * 搜索交互协议组件，提供统一的搜索入口、状态管理和结果承载能力
 */
var meta = {
  title: 'Pro Components/PisellLookup',
  component: PisellLookup,
  parameters: {
    layout: 'padded',
    docs: {
      description: {
        component: '搜索交互协议组件，支持多种触发器类型和展示方式。'
      }
    }
  },
  tags: ['autodocs'],
  argTypes: {
    triggerType: {
      control: 'radio',
      options: ['input', 'button', 'icon', 'text'],
      description: '触发器类型'
    },
    searchMode: {
      control: 'radio',
      options: ['realtime', 'confirm'],
      description: '搜索模式'
    },
    displayType: {
      control: 'select',
      options: ['inline', 'popup', 'modal', 'drawer', 'detached'],
      description: '展示类型'
    },
    size: {
      control: 'radio',
      options: ['large', 'middle', 'small'],
      description: '输入框尺寸'
    }
  }
};
export default meta;
/**
 * 模拟搜索结果数据
 */
var mockProducts = [{
  id: 1,
  name: 'iPhone 15 Pro',
  price: 7999,
  category: '手机'
}, {
  id: 2,
  name: 'MacBook Pro',
  price: 12999,
  category: '电脑'
}, {
  id: 3,
  name: 'iPad Air',
  price: 4799,
  category: '平板'
}, {
  id: 4,
  name: 'AirPods Pro',
  price: 1899,
  category: '耳机'
}, {
  id: 5,
  name: 'Apple Watch',
  price: 2999,
  category: '手表'
}];

/**
 * 模拟热门搜索
 */
var mockHotWords = ['iPhone', 'MacBook', 'iPad', 'AirPods', 'Apple Watch'];

/**
 * 模拟联想词
 */
var getMockSuggestions = function getMockSuggestions(keyword) {
  if (!keyword) return [];
  return mockProducts.filter(function (p) {
    return p.name.toLowerCase().includes(keyword.toLowerCase());
  }).map(function (p) {
    return p.name;
  }).slice(0, 5);
};

/**
 * 搜索结果渲染组件
 */
var SearchResults = function SearchResults(_ref) {
  var keyword = _ref.keyword;
  var results = mockProducts.filter(function (p) {
    return p.name.toLowerCase().includes(keyword.toLowerCase());
  });
  if (results.length === 0) {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        padding: 20,
        textAlign: 'center'
      }
    }, "\u672A\u627E\u5230\u76F8\u5173\u5546\u54C1");
  }
  return /*#__PURE__*/React.createElement(List, {
    dataSource: results,
    renderItem: function renderItem(item) {
      return /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement(List.Item.Meta, {
        title: item.name,
        description: /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Tag, {
          color: "blue"
        }, item.category), /*#__PURE__*/React.createElement("span", {
          style: {
            color: '#ff4d4f',
            fontWeight: 'bold'
          }
        }, "\xA5", item.price))
      }));
    }
  });
};

/**
 * 基础示例 - Input 触发器 + Inline 展示
 */
export var Basic = {
  args: {
    placeholder: '搜索商品',
    triggerType: 'input',
    displayType: 'inline',
    onSearch: function onSearch(keyword) {
      console.log('搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement(SearchResults, {
        keyword: keyword
      });
    }
  }
};

/**
 * Input 触发器 - 默认尺寸（Middle）
 */
export var InputTriggerMiddle = {
  args: {
    triggerType: 'input',
    size: 'middle',
    placeholder: '请输入搜索内容',
    showPrefixIcon: true,
    showClear: true,
    showConfirmButton: true,
    confirmButtonText: 'Lookup',
    showScan: true,
    displayType: 'inline',
    onSearch: function onSearch(keyword) {
      return console.log('搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement(SearchResults, {
        keyword: keyword
      });
    }
  }
};

/**
 * Input 触发器 - 大号尺寸
 */
export var InputTriggerLarge = {
  args: {
    triggerType: 'input',
    size: 'large',
    placeholder: '请输入搜索内容',
    showPrefixIcon: true,
    showClear: true,
    showConfirmButton: true,
    confirmButtonText: 'Lookup',
    displayType: 'inline',
    onSearch: function onSearch(keyword) {
      return console.log('搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement(SearchResults, {
        keyword: keyword
      });
    }
  }
};

/**
 * Button 触发器 + Modal 展示
 */
export var ButtonTrigger = {
  args: {
    triggerType: 'button',
    buttonText: '搜索商品',
    displayType: 'modal',
    modalWidth: 834,
    onSearch: function onSearch(keyword) {
      return console.log('搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement(SearchResults, {
        keyword: keyword
      });
    }
  }
};

/**
 * Icon 触发器 + Modal 展示
 */
export var IconTrigger = {
  args: {
    triggerType: 'icon',
    triggerIcon: /*#__PURE__*/React.createElement(SearchOutlined, {
      style: {
        fontSize: 24
      }
    }),
    displayType: 'modal',
    onSearch: function onSearch(keyword) {
      return console.log('搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement(SearchResults, {
        keyword: keyword
      });
    }
  }
};

/**
 * Text 触发器 + Modal 展示
 */
export var TextTrigger = {
  args: {
    triggerType: 'text',
    triggerText: '点击搜索',
    displayType: 'modal',
    onSearch: function onSearch(keyword) {
      return console.log('搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement(SearchResults, {
        keyword: keyword
      });
    }
  }
};

/**
 * 自定义触发器 + Modal 展示
 */
export var CustomTrigger = {
  args: {
    trigger: /*#__PURE__*/React.createElement(Card, {
      hoverable: true,
      style: {
        width: 200
      }
    }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(SearchOutlined, null), /*#__PURE__*/React.createElement("span", null, "\u9AD8\u7EA7\u641C\u7D22"))),
    displayType: 'modal',
    onSearch: function onSearch(keyword) {
      return console.log('搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement(SearchResults, {
        keyword: keyword
      });
    }
  }
};

/**
 * Drawer 展示模式
 */
export var DrawerDisplay = {
  args: {
    triggerType: 'button',
    buttonText: '打开搜索',
    displayType: 'drawer',
    drawerWidth: 500,
    drawerPlacement: 'right',
    onSearch: function onSearch(keyword) {
      return console.log('搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement(SearchResults, {
        keyword: keyword
      });
    }
  }
};

/**
 * 搜索历史功能
 */
export var WithSearchHistory = {
  args: {
    triggerType: 'input',
    placeholder: '搜索商品（带历史记录）',
    displayType: 'inline',
    showHistory: true,
    historyKey: 'demo_search_history',
    maxHistoryCount: 10,
    onSearch: function onSearch(keyword) {
      return console.log('搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement(SearchResults, {
        keyword: keyword
      });
    }
  }
};

/**
 * 联想词功能
 */
export var WithSuggestions = {
  args: {
    triggerType: 'input',
    placeholder: '输入内容查看联想词',
    displayType: 'inline',
    showSuggestions: true,
    onLoadSuggestions: function onLoadSuggestions(keyword) {
      return getMockSuggestions(keyword);
    },
    onSearch: function onSearch(keyword) {
      return console.log('搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement(SearchResults, {
        keyword: keyword
      });
    }
  }
};

/**
 * 热门搜索功能
 */
export var WithHotWords = {
  args: {
    triggerType: 'input',
    placeholder: '查看热门搜索',
    displayType: 'inline',
    showHotWords: true,
    onLoadHotWords: function onLoadHotWords() {
      return mockHotWords;
    },
    onSearch: function onSearch(keyword) {
      return console.log('搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement(SearchResults, {
        keyword: keyword
      });
    }
  }
};

/**
 * 完整功能 - 历史 + 联想词 + 热门搜索
 */
export var FullFeatures = {
  args: {
    triggerType: 'input',
    placeholder: '搜索商品（完整功能）',
    displayType: 'inline',
    showHistory: true,
    historyKey: 'demo_full_history',
    maxHistoryCount: 10,
    showSuggestions: true,
    onLoadSuggestions: function onLoadSuggestions(keyword) {
      return getMockSuggestions(keyword);
    },
    showHotWords: true,
    onLoadHotWords: function onLoadHotWords() {
      return mockHotWords;
    },
    onSearch: function onSearch(keyword) {
      return console.log('搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement(SearchResults, {
        keyword: keyword
      });
    }
  }
};

/**
 * 实时搜索模式
 */
export var RealtimeSearch = {
  args: {
    triggerType: 'input',
    placeholder: '输入即搜索（300ms 防抖）',
    displayType: 'inline',
    searchMode: 'realtime',
    debounceTime: 300,
    onSearch: function onSearch(keyword) {
      return console.log('实时搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement(SearchResults, {
        keyword: keyword
      });
    }
  }
};

/**
 * 确认触发模式
 */
export var ConfirmSearch = {
  args: {
    triggerType: 'input',
    placeholder: '点击按钮或按 Enter 搜索',
    displayType: 'inline',
    searchMode: 'confirm',
    showConfirmButton: true,
    confirmButtonText: 'Search',
    onSearch: function onSearch(keyword) {
      return console.log('确认搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement(SearchResults, {
        keyword: keyword
      });
    }
  }
};

/**
 * 受控模式示例
 */
export var Controlled = {
  render: function render() {
    var _useState = useState('iPhone'),
      _useState2 = _slicedToArray(_useState, 2),
      keyword = _useState2[0],
      setKeyword = _useState2[1];
    var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      visible = _useState4[0],
      setVisible = _useState4[1];
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Space, {
      direction: "vertical",
      style: {
        width: '100%'
      }
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "\u5916\u90E8\u63A7\u5236\uFF1A"), /*#__PURE__*/React.createElement("button", {
      onClick: function onClick() {
        return setKeyword('MacBook');
      }
    }, "\u8BBE\u7F6E\u4E3A MacBook"), /*#__PURE__*/React.createElement("button", {
      onClick: function onClick() {
        return setKeyword('');
      },
      style: {
        marginLeft: 8
      }
    }, "\u6E05\u7A7A"), /*#__PURE__*/React.createElement("button", {
      onClick: function onClick() {
        return setVisible(!visible);
      },
      style: {
        marginLeft: 8
      }
    }, visible ? '关闭' : '打开')), /*#__PURE__*/React.createElement(PisellLookup, {
      value: keyword,
      onChange: setKeyword,
      visible: visible,
      onVisibleChange: setVisible,
      triggerType: "input",
      placeholder: "\u53D7\u63A7\u6A21\u5F0F",
      displayType: "inline",
      onSearch: function onSearch(kw) {
        return console.log('搜索:', kw);
      },
      resultRender: function resultRender(kw) {
        return /*#__PURE__*/React.createElement(SearchResults, {
          keyword: kw
        });
      }
    })));
  }
};

/**
 * 加载状态
 */
export var Loading = {
  args: {
    triggerType: 'input',
    placeholder: '加载中...',
    displayType: 'inline',
    defaultVisible: true,
    loading: true
  }
};

/**
 * 禁用状态
 */
export var Disabled = {
  args: {
    triggerType: 'input',
    placeholder: '禁用状态',
    disabled: true,
    displayType: 'inline'
  }
};

/**
 * Modal 自定义宽度
 */
export var ModalCustomWidth = {
  args: {
    triggerType: 'button',
    buttonText: '打开宽屏搜索',
    displayType: 'modal',
    modalWidth: 1200,
    onSearch: function onSearch(keyword) {
      return console.log('搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement(SearchResults, {
        keyword: keyword
      });
    }
  }
};

/**
 * Modal 显示遮罩层
 */
export var ModalWithMask = {
  args: {
    triggerType: 'button',
    buttonText: '搜索（带遮罩）',
    displayType: 'modal',
    mask: true,
    onSearch: function onSearch(keyword) {
      return console.log('搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement(SearchResults, {
        keyword: keyword
      });
    }
  }
};

/**
 * Modal 挂载到容器并使用 100% 宽度
 */
export var ModalFullWidth = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      id: "custom-modal-container",
      style: {
        width: 600,
        height: 400,
        border: '2px solid #ccc',
        position: 'relative',
        // 必须设置定位
        overflow: 'hidden'
      }
    }, /*#__PURE__*/React.createElement("p", {
      style: {
        padding: 20
      }
    }, "\u8FD9\u662F\u81EA\u5B9A\u4E49\u5BB9\u5668\u533A\u57DF\uFF08600px \u5BBD\uFF09"), /*#__PURE__*/React.createElement("p", {
      style: {
        padding: '0 20px',
        color: '#999'
      }
    }, "Modal \u4F1A\u586B\u6EE1\u6B64\u5BB9\u5668\uFF08100% \u5BBD\u5EA6\uFF09")), /*#__PURE__*/React.createElement("div", {
      style: {
        marginTop: 20
      }
    }, /*#__PURE__*/React.createElement(PisellLookup, {
      triggerType: "button",
      buttonText: "\u6253\u5F00\u641C\u7D22\uFF08100% \u5BBD\u5EA6\uFF09",
      displayType: "modal",
      getContainer: function getContainer() {
        return document.getElementById('custom-modal-container');
      },
      modalWidth: "100%",
      onSearch: function onSearch(keyword) {
        return console.log('搜索:', keyword);
      },
      resultRender: function resultRender(keyword) {
        return /*#__PURE__*/React.createElement(SearchResults, {
          keyword: keyword
        });
      }
    })));
  }
};

/**
 * Drawer 不同方向
 */
export var DrawerPlacements = {
  render: function render() {
    return /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(PisellLookup, {
      triggerType: "button",
      buttonText: "\u53F3\u4FA7 Drawer",
      displayType: "drawer",
      drawerPlacement: "right",
      onSearch: function onSearch(kw) {
        return console.log('搜索:', kw);
      },
      resultRender: function resultRender(kw) {
        return /*#__PURE__*/React.createElement(SearchResults, {
          keyword: kw
        });
      }
    }), /*#__PURE__*/React.createElement(PisellLookup, {
      triggerType: "button",
      buttonText: "\u5DE6\u4FA7 Drawer",
      displayType: "drawer",
      drawerPlacement: "left",
      onSearch: function onSearch(kw) {
        return console.log('搜索:', kw);
      },
      resultRender: function resultRender(kw) {
        return /*#__PURE__*/React.createElement(SearchResults, {
          keyword: kw
        });
      }
    }), /*#__PURE__*/React.createElement(PisellLookup, {
      triggerType: "button",
      buttonText: "\u9876\u90E8 Drawer",
      displayType: "drawer",
      drawerPlacement: "top",
      onSearch: function onSearch(kw) {
        return console.log('搜索:', kw);
      },
      resultRender: function resultRender(kw) {
        return /*#__PURE__*/React.createElement(SearchResults, {
          keyword: kw
        });
      }
    }), /*#__PURE__*/React.createElement(PisellLookup, {
      triggerType: "button",
      buttonText: "\u5E95\u90E8 Drawer",
      displayType: "drawer",
      drawerPlacement: "bottom",
      onSearch: function onSearch(kw) {
        return console.log('搜索:', kw);
      },
      resultRender: function resultRender(kw) {
        return /*#__PURE__*/React.createElement(SearchResults, {
          keyword: kw
        });
      }
    }));
  }
};

/**
 * 自定义空状态
 */
export var CustomEmpty = {
  args: {
    triggerType: 'input',
    placeholder: '搜索商品',
    displayType: 'inline',
    defaultVisible: true,
    emptyRender: function emptyRender() {
      return /*#__PURE__*/React.createElement("div", {
        style: {
          padding: 40,
          textAlign: 'center'
        }
      }, /*#__PURE__*/React.createElement(SearchOutlined, {
        style: {
          fontSize: 48,
          color: '#ccc'
        }
      }), /*#__PURE__*/React.createElement("div", {
        style: {
          marginTop: 16,
          color: '#999'
        }
      }, "\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9"));
    }
  }
};

/**
 * 移动端场景
 */
export var MobileScenario = {
  args: {
    triggerType: 'button',
    buttonText: '搜索',
    size: 'large',
    displayType: 'drawer',
    drawerWidth: '100%',
    drawerPlacement: 'bottom',
    showHistory: true,
    showHotWords: true,
    onLoadHotWords: function onLoadHotWords() {
      return mockHotWords;
    },
    onSearch: function onSearch(keyword) {
      return console.log('搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement(SearchResults, {
        keyword: keyword
      });
    }
  },
  parameters: {
    viewport: {
      defaultViewport: 'mobile1'
    }
  }
};

/**
 * 保留搜索内容（默认行为）
 */
export var PreserveKeyword = {
  args: {
    triggerType: 'button',
    buttonText: '搜索（默认保留内容）',
    displayType: 'modal',
    clearOnClose: false,
    onSearch: function onSearch(keyword) {
      return console.log('搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement("div", {
        style: {
          padding: 20
        }
      }, /*#__PURE__*/React.createElement("p", null, "\u641C\u7D22\u5173\u952E\u8BCD: ", keyword), /*#__PURE__*/React.createElement("p", {
        style: {
          color: '#999',
          marginTop: 8
        }
      }, "\u63D0\u793A\uFF1A\u9ED8\u8BA4\u884C\u4E3A\uFF0C\u5173\u95ED\u540E\u4F1A\u4FDD\u7559\u641C\u7D22\u5185\u5BB9\uFF0C\u518D\u6B21\u6253\u5F00\u65F6\u81EA\u52A8\u9009\u4E2D\u6587\u5B57"));
    }
  }
};

/**
 * 关闭时清空内容
 */
export var ClearOnClose = {
  args: {
    triggerType: 'button',
    buttonText: '搜索（关闭时清空）',
    displayType: 'modal',
    clearOnClose: true,
    onSearch: function onSearch(keyword) {
      return console.log('搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement("div", {
        style: {
          padding: 20
        }
      }, /*#__PURE__*/React.createElement("p", null, "\u641C\u7D22\u5173\u952E\u8BCD: ", keyword), /*#__PURE__*/React.createElement("p", {
        style: {
          color: '#999',
          marginTop: 8
        }
      }, "\u63D0\u793A\uFF1A\u8BBE\u7F6E clearOnClose=true\uFF0C\u5173\u95ED\u540E\u4F1A\u6E05\u7A7A\u641C\u7D22\u5185\u5BB9"));
    }
  }
};

/**
 * 隐藏 Lookup 按钮（输入即搜索）
 */
export var NoConfirmButton = {
  args: {
    triggerType: 'input',
    placeholder: '输入即搜索（无按钮）',
    displayType: 'inline',
    showConfirmButton: false,
    debounceTime: 300,
    onSearch: function onSearch(keyword) {
      return console.log('实时搜索:', keyword);
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement(SearchResults, {
        keyword: keyword
      });
    }
  }
};

/**
 * 监听打开和关闭事件
 */
export var WithOpenCloseEvents = {
  render: function render() {
    var _useState5 = useState([]),
      _useState6 = _slicedToArray(_useState5, 2),
      log = _useState6[0],
      setLog = _useState6[1];
    var addLog = function addLog(message) {
      setLog(function (prev) {
        return [].concat(_toConsumableArray(prev), ["".concat(new Date().toLocaleTimeString(), ": ").concat(message)]);
      });
    };
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PisellLookup, {
      triggerType: "button",
      buttonText: "\u641C\u7D22\uFF08\u67E5\u770B\u4E8B\u4EF6\u65E5\u5FD7\uFF09",
      displayType: "modal",
      onOpen: function onOpen() {
        return addLog('✅ Modal 已打开');
      },
      onClose: function onClose() {
        return addLog('❌ Modal 已关闭');
      },
      onSearch: function onSearch(keyword) {
        return addLog("\uD83D\uDD0D \u641C\u7D22: ".concat(keyword));
      },
      resultRender: function resultRender(keyword) {
        return /*#__PURE__*/React.createElement(SearchResults, {
          keyword: keyword
        });
      }
    }), /*#__PURE__*/React.createElement("div", {
      style: {
        marginTop: 20,
        padding: 16,
        background: '#f5f5f5',
        borderRadius: 8
      }
    }, /*#__PURE__*/React.createElement("h4", null, "\u4E8B\u4EF6\u65E5\u5FD7\uFF1A"), /*#__PURE__*/React.createElement("div", {
      style: {
        maxHeight: 200,
        overflow: 'auto'
      }
    }, log.map(function (item, index) {
      return /*#__PURE__*/React.createElement("div", {
        key: index,
        style: {
          padding: '4px 0',
          fontSize: 12
        }
      }, item);
    })), /*#__PURE__*/React.createElement(Button, {
      size: "small",
      onClick: function onClick() {
        return setLog([]);
      },
      style: {
        marginTop: 8
      }
    }, "\u6E05\u7A7A\u65E5\u5FD7")));
  }
};

/**
 * 使用 Ref 控制
 */
export var WithRef = {
  render: function render() {
    var lookupRef = useRef(null);
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Space, {
      style: {
        marginBottom: 16
      }
    }, /*#__PURE__*/React.createElement(Button, {
      onClick: function onClick() {
        var _lookupRef$current;
        return (_lookupRef$current = lookupRef.current) === null || _lookupRef$current === void 0 ? void 0 : _lookupRef$current.open();
      }
    }, "\u6253\u5F00\u641C\u7D22"), /*#__PURE__*/React.createElement(Button, {
      onClick: function onClick() {
        var _lookupRef$current2;
        return (_lookupRef$current2 = lookupRef.current) === null || _lookupRef$current2 === void 0 ? void 0 : _lookupRef$current2.close();
      }
    }, "\u5173\u95ED\u641C\u7D22"), /*#__PURE__*/React.createElement(Button, {
      onClick: function onClick() {
        var _lookupRef$current3;
        return (_lookupRef$current3 = lookupRef.current) === null || _lookupRef$current3 === void 0 ? void 0 : _lookupRef$current3.setKeyword('iPhone');
      }
    }, "\u8BBE\u7F6E\u4E3A iPhone"), /*#__PURE__*/React.createElement(Button, {
      onClick: function onClick() {
        var _lookupRef$current4;
        var keyword = (_lookupRef$current4 = lookupRef.current) === null || _lookupRef$current4 === void 0 ? void 0 : _lookupRef$current4.getKeyword();
        alert("\u5F53\u524D\u5173\u952E\u8BCD: ".concat(keyword));
      }
    }, "\u83B7\u53D6\u5173\u952E\u8BCD")), /*#__PURE__*/React.createElement(PisellLookup, {
      ref: lookupRef,
      triggerType: "button",
      buttonText: "\u641C\u7D22",
      displayType: "modal",
      onSearch: function onSearch(kw) {
        return console.log('搜索:', kw);
      },
      resultRender: function resultRender(kw) {
        return /*#__PURE__*/React.createElement(SearchResults, {
          keyword: kw
        });
      }
    }));
  }
};

/**
 * 仅触发搜索（不展示结果）
 */
export var OnlyTriggerSearch = {
  render: function render() {
    var _useState7 = useState([]),
      _useState8 = _slicedToArray(_useState7, 2),
      results = _useState8[0],
      setResults = _useState8[1];
    var _useState9 = useState(''),
      _useState10 = _slicedToArray(_useState9, 2),
      keyword = _useState10[0],
      setKeyword = _useState10[1];
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PisellLookup, {
      triggerType: "input",
      placeholder: "\u641C\u7D22\u5546\u54C1\uFF08\u7ED3\u679C\u5C55\u793A\u5728\u4E0B\u65B9\uFF09",
      showConfirmButton: false,
      onSearch: function onSearch(kw) {
        setKeyword(kw);
        var filtered = mockProducts.filter(function (p) {
          return p.name.toLowerCase().includes(kw.toLowerCase());
        });
        setResults(filtered);
      }
    }), keyword && /*#__PURE__*/React.createElement("div", {
      style: {
        marginTop: 20,
        padding: 16,
        background: '#f5f5f5',
        borderRadius: 8
      }
    }, /*#__PURE__*/React.createElement("h4", null, "\u641C\u7D22\u7ED3\u679C\uFF08", results.length, " \u4E2A\uFF09"), /*#__PURE__*/React.createElement(List, {
      dataSource: results,
      renderItem: function renderItem(item) {
        return /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement(List.Item.Meta, {
          title: item.name,
          description: "\xA5".concat(item.price)
        }));
      }
    })));
  }
};

/**
 * Playground - 自由配置
 */
export var Playground = {
  args: {
    triggerType: 'input',
    placeholder: '请输入搜索内容',
    size: 'middle',
    displayType: 'inline',
    searchMode: 'realtime',
    debounceTime: 300,
    showPrefixIcon: false,
    showClear: true,
    showConfirmButton: true,
    confirmButtonText: 'Lookup',
    showScan: true,
    showHistory: true,
    maxHistoryCount: 10,
    showSuggestions: true,
    showHotWords: true,
    disabled: false,
    loading: false,
    maskClosable: true,
    onSearch: function onSearch(keyword) {
      return console.log('搜索:', keyword);
    },
    onLoadSuggestions: function onLoadSuggestions(keyword) {
      return getMockSuggestions(keyword);
    },
    onLoadHotWords: function onLoadHotWords() {
      return mockHotWords;
    },
    resultRender: function resultRender(keyword) {
      return /*#__PURE__*/React.createElement(SearchResults, {
        keyword: keyword
      });
    }
  }
};