import { useMemo, useState } from 'react';
import styles from './index.less';
import { Input, Select } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
const TableRender = ({ value, onChange, onlyShow = false }) => {
  const defaultItem = { type: '', scale: '' };
  const options = ['UF', 'RO', 'NF', 'MF', 'MBR'];

  const list = useMemo(() => {
    return value ? JSON.parse(value) : [defaultItem];
  }, [value]);

  const handleChange = (idx, item) => {
    const newList = JSON.parse(JSON.stringify(list));
    newList[idx] = item;
    const result = JSON.stringify(newList);
    onChange(result);
  };

  const handleAddClick = () => {
    const result = JSON.stringify([...list, defaultItem]);
    onChange(result);
  };

  const handleDelClick = idx => {
    const newList = JSON.parse(JSON.stringify(list));
    newList.splice(idx, 1);
    const result = JSON.stringify(newList);
    onChange(result);
  };

  const renderItems = (item, idx) => {
    const { type, scale } = item;
    return (
      <div className={styles.item} key={`${idx}`}>
        <Select
          value={type}
          className={styles.itemLeft}
          style={{ width: '100%' }}
          onChange={e => handleChange(idx, { ...item, type: e })}
        >
          {options.map(value => (
            <Option key={value}>{value}</Option>
          ))}
        </Select>
        <Input
          value={scale}
          onChange={e => handleChange(idx, { ...item, scale: e.target.value })}
        />
        <DeleteOutlined className={styles.deleteIcon} onClick={() => handleDelClick(idx)} />
      </div>
    );
  };
  const renderOnlyShowItems = (item, idx) => {
    const { type, scale } = item;
    return (
      <div className={styles.item} key={`${type}_${scale}_${idx}`}>
        <span>{type}</span>
        <div className={styles.line}></div>
        <span>{scale}</span>
      </div>
    );
  };
  return (
    <div>
      {onlyShow ? (
        <div className={styles.content} style={{ width: '60%' }}>
          {list.map((item, idx) => renderOnlyShowItems(item, idx))}
        </div>
      ) : (
        <>
          <div className={styles.titleContent}>
            <div>工艺技术</div>
            <div>项目规模</div>
          </div>

          <div className={styles.content}>
            {list.map((item, idx) => renderItems(item, idx))}

            <div className={styles.addBtn} onClick={handleAddClick}>
              + 添加
            </div>
          </div>
        </>
      )}
    </div>
  );
};
export default TableRender;