import React, { useCallback, useEffect, useState } from "react";
import { Button, Row, Select, Input, Col } from "antd";
import { useStore } from "../index";
import { debounce } from "lodash";
import { CapitalAccountTypeEnum, ConfigType } from "@/pages/finance/entitys";

const { Option } = Select;
const Search = Input.Search;

export default function AccountList() {
  const { triggerModal, brands, financeList, setInvestList, companys, dealers } = useStore();
  // 存储删选条件
  const [filterParams, setFilterParams] = useState({});

  useEffect(() => {
    let originList = financeList;
    let res = [];
    if (filterParams.brandId) {
      //删选品牌
      originList = originList.filter((item) => item.brandId === filterParams.brandId);
    }
    if (filterParams.mefCompId) {
      //删选主机厂
      originList = originList.filter((item) => item.mefCompId === filterParams.mefCompId);
    }
    if (filterParams.includeId) {
      //删选包含商家 includeId
      originList = originList.filter((item) => item.includeDealers?.find((y) => y.id === filterParams.includeId));
    }
    if (filterParams.creditDealerId) {
      //删选授信商家 creditDealerId
      originList = originList.filter((item) => item.creditDealerId === filterParams.creditDealerId);
    }
    if (filterParams.name) {
      // 筛选投资主体 name
      originList = originList.filter((item) => item.name?.indexOf(filterParams.name) >= 0);
    }
    res = originList;
    setInvestList([...res]);
  }, [filterParams]);
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: 20,
      }}
    >
      <div>
        <Row justify="space-between" style={{ flexWrap: "nowrap" }}>
          <Select
            allowClear
            placeholder="请选择品牌"
            style={{ width: 200 }}
            showSearch
            optionFilterProp="children"
            onChange={(brandId) => {
              setFilterParams({ ...filterParams, brandId });
            }}
          >
            {brands.map((brand) => (
              <Option key={brand.id} value={brand.id}>
                {brand.name}
              </Option>
            ))}
          </Select>
          <Select
            allowClear
            placeholder="请选择主机厂"
            style={{ width: 200, marginLeft: 50 }}
            showSearch
            optionFilterProp="children"
            onChange={(mefCompId) => {
              setFilterParams({ ...filterParams, mefCompId });
            }}
          >
            {companys.map((comp) => (
              <Option key={comp.id} value={comp.id}>
                {comp.name}
              </Option>
            ))}
          </Select>
          <Input
            placeholder="请输入投资主体"
            style={{ width: 200, marginLeft: 50 }}
            onChange={(e) => {
              setFilterParams({ ...filterParams, name: e.target.value });
            }}
          />
        </Row>
        <Row  style={{ flexWrap: "nowrap", marginTop: 10 }}>
          <Select
            allowClear
            placeholder="请选择包含商家"
            style={{ width: 200 }}
            showSearch
            optionFilterProp="children"
            onChange={(includeId) => {
              setFilterParams({ ...filterParams, includeId });
            }}
          >
            {dealers.map((dealer) => (
              <Option key={dealer.id} value={dealer.id}>
                {dealer.name}
              </Option>
            ))}
          </Select>
          <Select
            allowClear
            placeholder="请选择授信商家"
            style={{ width: 200,marginLeft:50 }}
            showSearch
            optionFilterProp="children"
            onChange={(creditDealerId) => {
              setFilterParams({ ...filterParams, creditDealerId });
            }}
          >
            {dealers.map((dealer) => (
              <Option key={dealer.id} value={dealer.id}>
                {dealer.name}
              </Option>
            ))}
          </Select>
        </Row>
      </div>

      <Button type="primary" onClick={() => triggerModal({}, true)}>
        新增
      </Button>
    </div>
  );
}