/* eslint-disable */
import React, { useState } from "react";
import { Modal, Space, Button } from "antd";
import * as commonUtils from "@/utils/utils";
import CommonViewTable from "@/components/Common/CommonViewTable";

import styles from "./index.less";

const InputMultiModalComponent = props => {
  const { visible, title, value = '', record = {}, sName, showConfig } = props;

  const [viewRow, setViewRow] = useState({
    sId: commonUtils.createSid(),
    sMemo: value.replace(/；/g, ",")
  });

  const viewConfigs = [
    {
      sId: showConfig.sId + "1",
      sName: "sMemo",
      showName: "内容",
      sControlName: "",
      iRowValue: 6,
      iColValue: 24
    },
    {
      ...showConfig,
      sName: "sSelect",
      showName: "下拉选择",
      bCanInput: true,
      iColValue: 24
    }
  ];

  const config = {
    gdsconfigformslave: viewConfigs
  };

  const viewProps = {
    ...props,
    viewConfigs,
    tableConfig: config,
    iColValueView: 24,
    viewRow,
    tableName: sName,
    onDataChange: (...args) => {
      const sFieldName = args[1];
      const value = args[2];
      if (sFieldName === "sMemo") {
        setViewRow(pre => ({ ...pre, ...value }));
      } else {
        const { sSelect } = value;
        setViewRow(pre => {
          const { sMemo = "" } = pre;
          const arr = sMemo.split(";").filter(item => item && item.trim());
          if (!arr.includes(sSelect)) {
            arr.push(sSelect);
          }
          return { ...pre, sMemo: arr.join(";") };
        });
      }
    }
  };

  const onOk = () => {
    props.handleSelectOptionEvent(viewRow.sMemo);
    props.onCancel();
  };

  return (
    <Modal
      width={600}
      className="mesCommonModal"
      maskClosable={false}
      title={title}
      open={visible}
      onCancel={props.onCancel}
      footer={
        <Space>
          <Button size="large" onClick={() => props.onCancel()}>
            取消
          </Button>
          <Button type="primary" size="large" onClick={onOk}>
            确定
          </Button>
        </Space>
      }
    >
      <div className={styles.inputMulti} key={123}>
        <CommonViewTable {...viewProps} />
      </div>
    </Modal>
  );
};

export default InputMultiModalComponent;