/* eslint-disable indent */
/*
 * @Description:
 * @Author: leizhe
 * @Date: 2022-04-07 10:23:26
 * @LastEditTime: 2022-04-15 14:44:54
 * @LastEditors: leizhe
 */
import React, { useEffect, useState } from 'react';
import { Modal, Form, Input, notification, message, Select } from 'antd';
import { list, Edit } from '@/services/ModelFileManage/api';

const { Option } = Select;

const EditModal = props => {
  const { visible, onCancel, pickItem, callBackSubmit = () => {} } = props;
  const [addForm] = Form.useForm();
  const [value, setValue] = useState('');
  const [select, setSelect] = useState('');

  useEffect(() => {
    console.log(pickItem);
    addForm.setFieldsValue({ name: pickItem.name });
    addForm.setFieldsValue({ type: pickItem.typeID });
    list({ _site: '' }).then(res => {
      console.log(res.getMe);
      setValue(res.getMe);
    });
  }, [visible]);

  const submitEdit = () => {
    console.log(addForm.getFieldValue('name'));
    console.log(addForm.getFieldValue('type'));
    if (addForm.getFieldValue('name') && addForm.getFieldValue('type')) {
      Edit({
        id: pickItem.id,
        Name: addForm.getFieldValue('name'),
        TypeId: addForm.getFieldValue('type'),
      })
        .then(res => {
          if (res.statusCode === '0000') {
            onCancel();
            callBackSubmit();
            notification.success({
              message: '提交成功',
              duration: 2,
              description: res.info,
            });
            // 重新获取机构树与用户表
          } else {
            notification.error({
              message: '提交失败',
              description: res.errMsg,
            });
          }
        })
        .catch(err => {
          message.error(err);
        });
    } else if (!addForm.getFieldValue('name')) {
      notification.warning({
        message: '画板名称不能为空',
        duration: 2,
      });
    } else if (!addForm.getFieldValue('type')) {
      notification.warning({
        message: '画板类型不能为空',
        duration: 2,
      });
    }
  };

  const changValue = e => {
    console.log(e);
    setSelect(e);
  };
  return (
    <Modal
      title="编辑画板"
      visible={visible}
      onCancel={onCancel}
      destroyOnClose
      onOk={submitEdit}
      afterClose={() => {
        addForm.resetFields();
      }}
      maskClosable={false}
      okText="确认"
      cancelText="取消"
    >
      <Form form={addForm} labelCol={{ span: 6 }}>
        <Form.Item name="name" label="画板名称" rules={[{ required: true, message: '不能为空' }]}>
          <Input placeholder="请输入模板类型名称" maxLength="20" style={{ width: '330px' }} />
        </Form.Item>
        <Form.Item name="type" label="画板类型" rules={[{ required: true, message: '不能为空' }]}>
          <Select placeholder="选择画板类型" onChange={changValue} style={{ width: '330px' }}>
            {value
              ? value.map((item, index) => (
                  <Option key={item.id} value={item.id}>
                    {item.name}
                  </Option>
                ))
              : ''}
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default EditModal;
