import React, { useEffect, useState } from "react";
import { Modal, Form, Input, Select, message } from "antd";
import { useStore } from "../index";
import { saveApitalAccountApi } from "../api";

const FormItem = Form.Item;
const { Option } = Select;

export default function CreateModal() {
  const { visiData, dealers, brands, setLoading, triggerModal, companys } = useStore();
  const [form] = Form.useForm();
  const [saveLoading, setSaveLoading] = useState(false);

  useEffect(() => {
    if (visiData.visible) {
      form.setFieldsValue({
        name: visiData.row.name,
        includeDealers: visiData.row.includeDealers ? visiData.row.includeDealers.map((item) => item.id) : [],
        brand: visiData.row.brandId ? { key: visiData.row.brandId, label: visiData.row.brandName } : undefined,
        creditDealer: visiData.row.creditDealerId
          ? { key: visiData.row.creditDealerId, label: visiData.row.creditDealerName }
          : undefined,
        company: visiData.row.mefCompId ? { key: visiData.row.mefCompId, label: visiData.row.mefCompName } : undefined,
      });
    }
  }, [visiData.visible]);

  function submit(item: any) {
    setSaveLoading(true);
    const params = {
      ...visiData.row,
      ...item,
      brandId: item.brand && item.brand.key,
      brandName: item.brand && item.brand.label,
      creditDealerId: item.creditDealer && item.creditDealer.key,
      creditDealerName: item.creditDealer && item.creditDealer.label,
      mefCompId: item.company && item.company.key,
      mefCompName: item.company && item.company.label,
    };
    saveApitalAccountApi(params)
      .then((res) => {
        message.success(res.result || "保存成功");
        triggerModal();
        setSaveLoading(false);
        setLoading(true);
      })
      .catch((err) => {
        message.error(err.message);
        setSaveLoading(false);
      });
  }

  return (
    <Modal
      title={`${visiData.row.id ? "编辑" : "新增"}投资主体`}
      visible={visiData.visible}
      onOk={form.submit}
      onCancel={() => triggerModal()}
      maskClosable={false}
      confirmLoading={saveLoading}
    >
      <Form form={form} onFinish={submit} labelCol={{ span: 6 }} wrapperCol={{ span: 15 }}>
        <FormItem name="brand" label="品牌" rules={[{ required: true, message: "请选择品牌" }]}>
          <Select placeholder="请选择品牌" labelInValue style={{ width: "100%" }} optionFilterProp="children">
            {brands.map((brand) => (
              <Option key={brand.id} value={brand.id}>
                {brand.name}
              </Option>
            ))}
          </Select>
        </FormItem>
        <FormItem name="company" label="主机厂" rules={[{ required: true, message: "请选择主机厂" }]}>
          <Select placeholder="请选择主机厂" labelInValue style={{ width: "100%" }} optionFilterProp="children">
            {companys.map((comp) => (
              <Option key={comp.id} value={comp.id}>
                {comp.name}
              </Option>
            ))}
          </Select>
        </FormItem>
        <FormItem name="name" label="投资主体" rules={[{ required: true, message: "请填入投资主体" }]}>
          <Input placeholder="请填入投资主体" />
        </FormItem>
        <FormItem name="includeDealers" label="商家" rules={[{ required: true, message: "请选择商家" }]}>
          <Select
            allowClear
            placeholder="请选择商家"
            style={{ width: "100%" }}
            mode="multiple"
            showSearch
            optionFilterProp="children"
          >
            {dealers.map((dealer) => (
              <Option key={dealer.id} value={dealer.id}>
                {dealer.name}
              </Option>
            ))}
          </Select>
        </FormItem>
        <FormItem name="creditDealer" label="授信商家" rules={[{ required: true, message: "请选择授信商家" }]}>
          <Select
            placeholder="请选择授信商家"
            labelInValue
            style={{ width: "100%" }}
            showSearch
            optionFilterProp="children"
          >
            {dealers.map((dealer) => (
              <Option key={dealer.id} value={dealer.id}>
                {dealer.name}
              </Option>
            ))}
          </Select>
        </FormItem>
      </Form>
    </Modal>
  );
}