import React, { useCallback, useState } from "react";
import { Row, Col, Select } from "antd";
import _ from "lodash";

interface Props {
    setParams:any;
    innerParams:any;
    cityList:any[];
    compList:BearCostSetting.Comp[];
}

interface SearchData {
    tradeCompId?:number;//往来单位id
    sendAreaNo?:string;//寄件地区编号
    arriveAreaNo?:string;//到达地区编号
}

function Filter({ compList, cityList, setParams, innerParams }:Props) {
    const [searchData, setSearchData] = useState<SearchData>({});
    return (
      <Row style={{flex: 1}}>
        <Col span={8} style={{marginRight: 10}}>
          <Select
            placeholder="请选择快递公司"
            showSearch
            optionFilterProp="children"
            allowClear
            style={{ minWidth: 260, maxWidth: 280 }}
            onChange={(tradeCompId) => {
              setSearchData({...searchData, tradeCompId});
              setParams({...innerParams, ...searchData, tradeCompId}, true);
            }}
          >
            {
                compList.map(item => (
                  <Select.Option value={item.id} key={item.id}>
                    {item.name}
                  </Select.Option>
                ))
            }
          </Select>
        </Col>
        <Col span={6} style={{marginRight: 10}}>
          <Select
            placeholder="请选择寄件地区"
            showSearch
            optionFilterProp="children"
            allowClear
            style={{ width: 200 }}
            onChange={(sendAreaNo) => {
                setSearchData({...searchData, sendAreaNo});
                setParams({...innerParams, ...searchData, sendAreaNo}, true);
            }}
          >
            {
                cityList.map(item => (
                  <Select.Option value={item.bh} key={item.bh}>
                    {item.fullName}
                  </Select.Option>
                ))
            }
          </Select>
        </Col>
        <Col span={6} style={{marginRight: 10}}>
          <Select
            placeholder="请选择到达地区"
            showSearch
            optionFilterProp="children"
            allowClear
            style={{ width: 200 }}
            onChange={(arriveAreaNo) => {
                setSearchData({...searchData, arriveAreaNo});
                setParams({...innerParams, ...searchData, arriveAreaNo}, true);
            }}
          >
            {
                cityList.map(item => (
                  <Select.Option value={item.bh} key={item.bh}>
                    {item.fullName}
                  </Select.Option>
                ))
            }
          </Select>
        </Col>
      </Row>
    );
}

export default Filter;