import React from "react";
import { Button, Col, Popconfirm, Row, Select, Input, message } from "antd";
import { useStore } from "../index";
import { CompanyCategoryTypeEnum } from "@/pages/finance/entitys";
import { debounce } from "lodash";
import { deleteCompanyRelationApi } from '@/pages/finance/CompanyRelationAuth/api';
import { history } from 'umi';

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

export default function Filter() {
  const {
    setVisible,
    dealerList,
    setCompanyParams,
    dealerLoading,
    disabled,
    setDisabled,
    setSelected,
    companyList,
    comBussinessList,
    selectedRelation,
    submitLoading,
    setSubmitLoading,
    companyParams,
    setLoading,
  } = useStore();
  const searchDealer = (dealerId: number) => {
    setCompanyParams({ ...companyParams, dealerId }, true);
  };

  function searchType(compCategory: number) {
    setCompanyParams({ ...companyParams, compCategory }, true);
  }

  function searchCompanyType(companyType: number) {
    setCompanyParams({ ...companyParams, companyType }, true);
  }

  const fetchListByName = debounce((value) => {
    setCompanyParams({ ...companyParams, keywords: value }, true);
  }, 500);

  function onCancel() {
    setDisabled(true);
    setSelected([...companyList]);
  }

  function onEdit() {
    setDisabled(false);
  }

  // 新增
  function onAdd() {
    history.push("/finance2/companyRelationAuth/create");
  }
  /**
   * @param compId
   */
  async function onDelete() {
    const compIdList = selectedRelation.map((item) => item.compId);
    try {
      const pa = { ...companyParams, compIdList};
      setSubmitLoading(true);
      const { success, result } = await deleteCompanyRelationApi(pa);
      setSubmitLoading(false);

      if (!success) {
        return message.error(result);
      } else {
        message.success(result);
        setLoading(true);
      }
    } catch (e) {
      setSubmitLoading(false);
      message.error(e.message);
    }
  }

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: 20,
      }}
    >
      <Row style={{ display: "flex", flex: 1 }}>
        <Col span={9}>
          <Select
            placeholder="请选择商家"
            showSearch
            loading={dealerLoading}
            disabled={!disabled}
            optionFilterProp="children"
            onChange={searchDealer}
            value={companyParams.dealerId}
            style={{ width: "80%" }}
          >
            {dealerList.map((dealer) => (
              <Option value={dealer.id} key={dealer.id}>
                {dealer.name}
              </Option>
            ))}
          </Select>
        </Col>
        <Col span={5}>
          <Search
            allowClear
            disabled={!disabled}
            placeholder="搜索单位名称"
            onChange={(e) => fetchListByName(e.target.value || undefined)}
            style={{ width: 200 }}
          />
        </Col>
        <Col span={3}>
          <Select
            placeholder="搜索单位类别"
            disabled={!disabled}
            onChange={searchType}
            value={companyParams.compCategory}
            style={{ width: 100 }}
          >
            {[1, 2].map((i) => (
              <Option value={i} key={i}>
                {CompanyCategoryTypeEnum[i]}
              </Option>
            ))}
          </Select>
        </Col>
        <Col>
          <Select placeholder="搜索类型" disabled={!disabled} onChange={searchCompanyType} style={{ width: 150 }}>
            {comBussinessList.map((item) => (
              <Option key={item.id} value={item.id}>
                {item.name}
              </Option>
            ))}
          </Select>
        </Col>
      </Row>
      <div style={{ display: "flex", flexDirection: "row-reverse" }}>
        <Button type="primary" onClick={onAdd}>
          新增
        </Button>

        <Popconfirm title="确定删除？" onConfirm={onDelete}>
          <Button style={{marginRight:10}} hidden={!selectedRelation.length} danger  loading={submitLoading}>
            删除
          </Button>
        </Popconfirm>
      </div>
    </div>
  );
}