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

const { Option } = Select;

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

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

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

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: 20,
      }}
    >
      <Row style={{ display: "flex", flex: 1, alignItems: 'center' }}>
        <Col span={6}>
          <Select
            placeholder="请选择商家"
            showSearch
            loading={dealerLoading}
            optionFilterProp="children"
            onChange={searchDealer}
            value={dealerId && dealerId > 0 ? dealerId : undefined}
            style={{ width: 260 }}
          >
            {dealerList.map((dealer) => (
              <Option value={dealer.id} key={dealer.id}>
                {dealer.name}
              </Option>
            ))}
          </Select>
        </Col>
        <Col span={6}>
          <Select
            placeholder="请选择品牌"
            showSearch
            loading={brandLoading}
            optionFilterProp="children"
            onChange={searchBrand}
            value={brandId && brandId > 0 ? brandId : undefined}
            style={{ width: 160 }}
          >
            {brandList.map((brand) => (
              <Option value={brand.id} key={brand.id}>
                {brand.name}
              </Option>
            ))}
          </Select>
        </Col>
      </Row>
      <Button type="primary" hidden={!dealerId} onClick={() => setVisible(true)}>
        新增
      </Button>
    </div>
  );
}