//空间台账编辑

import React, { useEffect } from 'react';
import { connect } from 'dva';
import { Modal, Form, Input, Select, Upload } from 'antd';
import styles from './LimitedSpace.less';
const { Option } = Select;

function EditModal(props) {
  const {
    form,
    loading,
    config,
    currentItem,
    visible,
    onOk,
    onCancel,
    uploadProps,
    groupId,
  } = props;
  const { getFieldDecorator } = form;

  const handleOk = () => {
    form.validateFields((error, values) => {
      if (error) return;
      let data = Object.keys(values)
        .map(k => {
          let value = values[k].v;
          //处理上传图片的数据
          if (typeof values[k].v != 'string') {
            const datas = values[k].v?.fileList
              ?.map(cur => {
                return cur.response?.data || cur.url;
              })
              .filter(item => item);
            value = JSON.stringify(datas);
          }
          let item = {
            key: k,
            val: value,
          };
          return item;
        })
        .filter(item => item.val);
      onOk(data);
    });
  };

  useEffect(() => {
    form.resetFields();
  }, [currentItem]);

  const renderFormItem = item => {
    let dom,
      option = [];
    switch (item.query_type) {
      case 'select':
        option = item.query_option.split(',');
        dom = (
          <Select allowClear>
            {option.map(item => (
              <Option key={item}>{item}</Option>
            ))}
          </Select>
        );
        break;
      case 'multi-select':
        option = item.query_option.split(',');
        dom = (
          <Select allowClear mode="multiple">
            {option.map(item => (
              <Option key={item}>{item}</Option>
            ))}
          </Select>
        );
        break;
      case 'input':
        if (item.type == 'string') dom = <Input />;
        else {
          //将图片数据转换成默认已上传的图片列表数据
          const defaultFileList = currentItem ? JSON.parse(currentItem[item.en_name])?.map((cur, idx) => {
            let index = cur.lastIndexOf("\/");
            let fileName = cur.substring(index + 1,cur.length);
            return {
              uid: idx,
              name: fileName,
              status: 'done',
              url: cur,
            }
          }):[]
          dom = <Upload {...uploadProps} defaultFileList={defaultFileList}>
            <a style={{ color: "#7BFFFB", fontSize:'22px' }}>上传</a>
          </Upload>;
        }
        break;
    }

    return form.getFieldDecorator(`${item.en_name}.v`, {
      initialValue: currentItem ? currentItem[item.en_name] : null,
    })(dom);
  };

  return (
    <Modal
      title="编辑台账"
      width="95%"
      visible={visible}
      onOk={handleOk}
      onCancel={onCancel}
      confirmLoading={loading}
      destroyOnClose
    >
      <Form
        labelCol={groupId ? { span: 8 } : { span: 6 }}
        wrapperCol={groupId ? { span: 16 } : { span: 16 }}
        layout="horizontal"
      >
        {config
          .filter(item => item.is_edit)
          .map(item => (
            <Form.Item key={item.en_name} label={item.cn_name}>
              {renderFormItem(item)}
            </Form.Item>
          ))}
      </Form>
    </Modal>
  );
}

export default Form.create()(EditModal);
