import { Select, Flex, Input, Checkbox } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { } from 'antd';
import type { CheckboxProps } from 'antd';
import styles from './index.less';
export default () => {

  const onChangeCheck: CheckboxProps['onChange'] = (e) => {
    console.log(`checked = ${e.target.checked}`);
  };

  return (
    <Flex className={styles.container} justify='space-between' align='center'>
      <Flex gap={15}>
        <Select
          defaultValue="0"
          style={{ width: 150, height: 40 }}
          onChange={() => {

          }}
          placeholder=''
          options={[
            { value: '0', label: '全部区县' },
            { value: '1', label: '区县1' },
            { value: '2', label: '区县2' },
          ]}
        />

        <Select
          defaultValue="0"
          style={{ width: 200, height: 40 }}
          onChange={() => {

          }}
          placeholder=''
          options={[
            { value: '0', label: '全部处置单位' },
            { value: '1', label: '处置单位1' },
            { value: '2', label: '处置单位2' },
          ]}
        />

        <Select
          defaultValue="0"
          style={{ width: 150, height: 40 }}
          onChange={() => {

          }}
          placeholder=''
          options={[
            { value: '0', label: '全部状态' },
            { value: '1', label: '状态1' },
            { value: '2', label: '状态2' },
          ]}
        />

        <Input
          placeholder="输入关键字搜索"
          style={{ width: 200, height: 40 }}
          suffix={
            <SearchOutlined />
          }
        />
      </Flex>
      <div>
        <Checkbox onChange={onChangeCheck}><span className={styles.checkLabel}>看全部</span></Checkbox>
      </div>
    </Flex>
  );
};
