import React, { useCallback, useState } from "react";
import { Row, Col, Select } from "antd";
import * as common from "@/typing/common";
import _ from "lodash";
import * as API from '../../api';

interface Props{
    contractTypesList?:any[],
    setParams:any,
    innerParams?:any,
}

function Filter({ contractTypesList, innerParams, setParams }:Props) {
    const onChange = _.debounce((contractTypeName: string) => {
        setParams({...innerParams, contractTypeName}, true);
    }, 350);
    return (
      <Row
        style={{ display: 'flex', flex: 1 }}
      >
        <Col span={12}>
          <Select
            placeholder="请选择合同类型"
            showSearch
            optionFilterProp="children"
            allowClear
            style={{ width: 200 }}
            onChange={(contractTypeName) => onChange(contractTypeName)}
          >
            {
                contractTypesList && contractTypesList.map((item:any) => (
                  <Select.Option value={item.name} key={item.id}>
                    {item.name}
                  </Select.Option>
                ))
            }
          </Select>
        </Col> 
      </Row>
    );
}

export default Filter;