import IconFont from '@/components/icon-font';
import { BfSearchBar } from '@bud-fe/react-taro-ui';
import { View } from '@tarojs/components';
import React, { useState } from 'react';
import styles from './index.module.less';

export default () => {
  const [queryProps, setQueryProps] = useState({ pocName: '', pageNo: 1 });

  const handleOnChange = (value) => {
    console.log('handleOnChange', value);
    setQueryProps({ ...queryProps, pocName: value });
  };

  const renderSlot = () => {
    return (
      <View className={styles['slot-right']}>
        <IconFont type="icon-wodeshenpi" style={{ marginRight: 4 }} />
        我的审批
      </View>
    );
  };

  return (
    <>
      <View className="group-title">基础用法</View>
      <BfSearchBar placeholder="请输入售点名称/售点地址" onChange={handleOnChange} value={queryProps.pocName} />

      <View className="group-title">带搜索按钮</View>
      <BfSearchBar
        placeholder="请输入售点名称/售点地址"
        searchBtn
        onSearch={(val) => {
          console.log('onSearch', val);
        }}
      />

      <View className="group-title">禁用防抖</View>
      <BfSearchBar
        placeholder="请输入售点名称/售点地址"
        onChange={(value) => {
          console.log('handleOnChange', value);
        }}
        disableDebounce
      />

      <View className="group-title">rightSlot </View>
      <BfSearchBar placeholder="请输入审批名称" rightSlot={renderSlot()} />
      <BfSearchBar placeholder="请输入审批名称" rightSlot={<View style={{ color: 'red' }}>custom</View>} />
    </>
  );
};