import React, { useCallback } from "react";
import { Button, Row, Select } from "antd";
import { useStore } from "../index";

const { Option } = Select;

export default function Filter() {
  const { setVisible, dealerList, setDealerId, dealerId, brandList, brandLoading, brandId, setBrandId } = useStore();

  const searchDealer = useCallback((dealerId) => {
    setDealerId(dealerId);
  }, []);

  const searchBrand = useCallback((brandId) => {
    setBrandId(brandId);
  }, []);

  return (
    <Row justify="space-between" style={{ marginBottom: 10 }}>
      <Row justify="start">
        <Select
          placeholder="请选择商家"
          showSearch
          optionFilterProp="children"
          onChange={searchDealer}
          style={{ width: 200 }}
        >
          {dealerList.map((dealer) => (
            <Option value={dealer.id} key={dealer.id}>
              {dealer.name}
            </Option>
          ))}
        </Select>
        <Select
          placeholder="请选择品牌"
          loading={brandLoading}
          allowClear
          optionFilterProp="children"
          onChange={searchBrand}
          value={brandId && brandId > 0 ? brandId : undefined}
          style={{ width: 200,marginLeft:100 }}
        >
          {brandList.map((brand) => (
            <Option value={brand.id} key={brand.id}>
              {brand.name}
            </Option>
          ))}
        </Select>
      </Row>

      <Button type="primary" hidden={!dealerId} onClick={() => setVisible(true)}>
        新增
      </Button>
    </Row>
  );
}
