FEV2 / fw-cms

import React, { useEffect, useState } from "react";
import {
  Button,
  Card,
  Table,
  Modal,
  Form,
  Select,
  Space,
  Spin,
  message,
} from "antd";
import {
  CarOptionVo,
  getOnsaleSeriesApi,
  getOnsaleSpecApi,
} from "@/pages/stock/Components/api";
import { PlusOutlined } from '@ant-design/icons';
import { ColumnsType } from 'antd/lib/table';
import SelectSpec from './SelectSpec';
import { CarAuthList } from './entity';
import { getBrandFilterApi } from '@/common/api';

interface Props {
  onChange?: (pa: any) => void;
  value?: CarAuthList[];
  disabled?: boolean;
  brandList?: CommonApi.OptionVO[];
  /**品牌是否多选，默认true */
  brandMultiple?: boolean;
}

interface Item {
  label: string;
  value: number;
  key?: number;
}
const { Column } = Table;
const { Option } = Select;

export default function index({ onChange, value, disabled, brandMultiple = true, brandList }: Props) {
  const [form] = Form.useForm();
  // 控制Modal是否可见
  const [visible, setVisible] = useState<boolean>(false);
  // 控制是否可见车型下拉框
  const [level, setLevel] = useState<number>(1);
  //存储表格当前车系
  const [currentItem, setCurrentItem] = useState<any>();
  const [brandData, setBrandData] = useState<CommonApi.OptionVO[]>([]);
  //存储Modal中可选的车系
  const [series, setSeries] = useState<any>([]);
  //存储接口返回的车型
  const [specList, setSpecList] = useState<any>([]);
  //存储Modal选择的品牌和车系作为表格的数据源
  const [savaData, setSavadata] = useState<any>([]);
  // 存储已经选中的车系
  const [selectedSeries, setSelectedSeries] = useState<any[]>([]);
  const [fetchLoading, setFetchLoading] = useState(false);

  useEffect(() => {
    if (value && value.length) {
      setSelectedSeries([...value]);
      setSavadata([...value]);
    }
  }, [value]);

  useEffect(() => {
    if (brandList && Array.isArray(brandList)) {
      setBrandData(brandList || []);
    }
  }, [brandList]);

  function getBrands() {
    if (brandData.length) {
      return;
    }
    setFetchLoading(true);
    getBrandFilterApi().then(res => {
      setBrandData(res.data || []);
      setFetchLoading(false);
    }).catch(err => {
      message.error(err.message);
      setFetchLoading(false);
    });
  }

  const _onOk = () => {
    form
      .validateFields()
      .then((fileds) => {
        if (level === 2) {
          const { series } = fileds;
          const _series = series.map((item: Item) => ({
            seriesId: item.value,
            seriesName: item.label,
            authType: 1,
          }));

          const currentSeries = (savaData.filter((i: any) => i.brandId === currentItem.brandId)[0] || {}).children || [];
          /**判断已有数据保留 */
          if (currentSeries.length) {
            const selectedIds = currentSeries.map(i => i.seriesId);
            let newAuthSeries: any[] = [];
            _series.forEach((item: any) => {
              if (selectedIds.includes(item.seriesId)) {
                newAuthSeries = newAuthSeries.concat(currentSeries.filter((list: any) => list.seriesId === item.seriesId));
              } else {
                newAuthSeries.push(item);
              }
            });
            currentItem.children = newAuthSeries;
          } else {
            currentItem.children = _series;
          }

          const tempData = savaData.map((item: any) => (item.brandId === currentItem.brandId ? { ...currentItem, authType: series.length ? 2 : 1 } : { ...item, authType: 1 }));
          setSavadata([...tempData]);
          onChange && onChange(tempData);
          setVisible(false);
          return;
        }
        if (level === 3) {
          const { spec } = fileds;
          const _spec = spec.map((item: any) => ({
            specId: item.id,
            specName: item.name,
          }));
          currentItem.children = _spec;
          currentItem.authType = 2;
          const tempData = savaData.map((item: any) => {
            if (item.children) {
              const newChildren = item.children.map((i: any) => (i.seriesId === currentItem.seriesId ? { ...currentItem, authType: spec.length ? 2 : 1 } : i));
              item.children = newChildren;
            }
            return { ...item, authType: 1 };
          });
          setSavadata([...tempData]);
          onChange && onChange(tempData);
          setVisible(false);
          return;
        }
        const { brand } = fileds;
        const tempArray = (brandMultiple ? brand : [brand]).map((item: any) => ({
          brandName: item.label,
          brandId: item.value,
          authType: 1, //1全部2部分
        }));
        const selectedBrands: number[] = savaData.map((i: any) => i.brandId);
        let newAuthCar: any[] = [];
        tempArray.forEach((item: any) => {
          if (selectedBrands.includes(item.brandId)) {
            newAuthCar = newAuthCar.concat(savaData.filter(list => list.brandId === item.brandId));
          } else {
            newAuthCar.push(item);
          }
        });
        setSavadata(newAuthCar);
        onChange && onChange(newAuthCar);
        setVisible(false);
      })
      .catch((err) => console.log(err.message));
  };

  // 选择部分车辆表格==》删除车系
  const onDelete = (record: any) => {
    const _savaData = savaData.filter(
      (item: any) => item.seriesId != record.seriesId
    );
    const _selectedSeries = selectedSeries.filter(
      (item) => item.seriesId != record.seriesId
    );
    setSavadata([..._savaData]);
    onChange && onChange(_savaData);
    setSelectedSeries([..._selectedSeries]);
  };

  // 选择部分车辆表格==》编辑选择部分车系、车型
  const onSelectSpec = async (record: any) => {
    setCurrentItem(record);
    setVisible(true);
    if (record.brandId) {
      setLevel(2);
      setFetchLoading(true);
      try {
        const { data } = await getOnsaleSeriesApi(record.brandId);
        const selectedSeries = savaData.filter((brand: any) => brand.brandId === record.brandId)[0].children;
        selectedSeries && form.setFieldValue("series", selectedSeries.map(i => ({ value: i.seriesId, label: i.seriesName })));
        setSeries(data);
        setFetchLoading(false);
      } catch (err: any) {
        message.error(err.message);
        setFetchLoading(false);
      }
    }
    if (record.seriesId) {
      setLevel(3);
      setFetchLoading(true);
      try {
        const { data } = await getOnsaleSpecApi(record.seriesId);
        record.children && form.setFieldValue("spec", record.children.map(i => ({ id: i.specId, name: i.specName })));
        setSpecList(data);
        setFetchLoading(false);
      } catch (err: any) {
        message.error(err.message);
        setFetchLoading(false);
      }
    }
  };

  return (
    <>
      <Card>
        {!disabled && (
          <div style={{ display: "flex", justifyContent: "flex-end" }}>
            <Button
              type="link"
              disabled={disabled}
              icon={<PlusOutlined />}
              onClick={() => {
                getBrands();
                setVisible(true);
                setLevel(1);
                savaData.length && form.setFieldValue("brand", savaData.map((i: any) => ({ value: i.brandId, label: i.brandName })));
                // form.resetFields();
              }}
            >
              新增
            </Button>
          </div>
        )}

        <Table
          dataSource={value}
          rowKey={(record) => String(record.brandId || record.seriesId || record.specId)}
        >
          <Column
            title="品牌"
            dataIndex="brandName"
            key="brandId"
          />
          <Column
            title="车系"
            dataIndex="seriesName"
            key="seriesId"
            render={(text, record: any) => {
              return (text || record.specName || (record.children && record.children.length !== 0) ? (
                <span>
                  {text}
                </span>
              ) : (
                <span style={{ color: "#999" }}>全部车系</span>
              ));
            }}
          />
          <Column
            title="车型"
            dataIndex="specName"
            key="specId"
            render={(text, record: any) => {
              return (text || (record.children && record.children.length !== 0) ? (
                <span>
                  {text}
                </span>
              ) : (
                <span style={{ color: "#999" }}>全部车型</span>
              ));
            }}
          />
          {!disabled && (
            <Column
              title="操作"
              render={(_, record: any, index) => {
                return (
                  <Space>
                    <Button
                      type={record.brandId ? "primary" : "link"}
                      style={{ padding: 2 }}
                      onClick={() => onSelectSpec(record)}
                      disabled={disabled}
                    >
                      {record.brandId ? "编辑车系" : (record.seriesId ? "编辑车型" : "")}
                    </Button>
                    {/* <Popconfirm
                      title="确定删除？"
                      okText="确定"
                      style={{ padding: 0 }}
                      cancelText="取消"
                      onConfirm={() => onDelete(record)}
                    >
                      <Button type="link" danger disabled={disabled}>
                        删除
                      </Button>
                    </Popconfirm> */}
                  </Space>
                );
              }}
            />
          )}
        </Table>
      </Card>

      {/* 选择品牌和车系 */}
      <Modal
        title="选择车辆信息"
        visible={visible}
        onOk={() => form.submit()}
        onCancel={() => {
          setVisible(false);
        }}
        maskClosable={false}
        afterClose={() => {
          form.resetFields();
          setCurrentItem({});
        }}
      >
        <Spin spinning={fetchLoading}>
          <Form onFinish={_onOk} form={form}>
            {level === 1 ? (
              <Form.Item
                label="品牌"
                name="brand"
              >
                <Select
                  labelInValue
                  mode={brandMultiple ? "multiple" : undefined}
                  placeholder="选择品牌"
                >
                  {brandData.map((item) => (
                    <Option value={item.id} key={item.id}>
                      {item.name}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            ) : null}

            {/* 车系 */}
            {level === 2 && (
              <Form.Item
                label="车系"
                name="series"
              // rules={[{ required: true, message: "请选择车系" }]}
              >
                <Select labelInValue mode="multiple" placeholder="选择车系" allowClear>
                  {series.map((item: any) => (
                    <Option value={item.id} key={item.id}>
                      {item.name}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            )}
            {level === 3 ? (
              <Form.Item
                label=""
                name="spec"
              >
                {/* <Select labelInValue mode="multiple" placeholder="选择车型" allowClear>
                  {specList.map((item: any) => (
                    <Option value={item.id} key={item.id}>
                      {item.name}
                    </Option>
                  ))}
                </Select> */}
                <SelectSpec specList={specList} />
              </Form.Item>
            ) : null}
          </Form>
        </Spin>
      </Modal>
    </>
  );
}