/* eslint-disable indent */
/*
 * @Description:
 * @Author: leizhe
 * @Date: 2022-04-07 10:23:26
 * @LastEditTime: 2022-04-14 19:52:28
 * @LastEditors: leizhe
 */
import React, { useEffect, useState } from 'react';
import {
  Modal,
  Form,
  Input,
  notification,
  message,
  Upload,
  Drawer,
  Select,
  Space,
  Button,
  Row,
  Col,
} from 'antd';
import { SaveUpload } from '@/services/drawBoardManage/api';

const AddTemplate = props => {
  const { visible, treeData, pickItem, callBackSubmit = () => {} } = props;
  const [addTemplateForm] = Form.useForm();
  const [selectValue, setSelectValue] = useState('');
  const [file, setFile] = useState('');
  const { Option } = Select;

  useEffect(() => {
    console.log(pickItem);
    addTemplateForm.resetFields();
    if (pickItem) {
      addTemplateForm.setFieldsValue({ Type: pickItem.name });
      setSelectValue(pickItem.name);
    }
  }, [visible]);

  const submitAdd = () => {
    addTemplateForm.validateFields().then(validate => {
      if (validate) {
        let aa = {};
        aa.width = addTemplateForm.getFieldsValue().imageWidth.toString();
        aa.height = addTemplateForm.getFieldsValue().imageHeight.toString();
        const formData = new FormData();
        formData.append('Name', addTemplateForm.getFieldsValue().Name);
        formData.append('Type', selectValue);
        formData.append('Dimension', '二维');
        formData.append('Size', JSON.stringify(aa));
        formData.append('ModelFile', file);
        console.log(formData);
        SaveUpload(formData).then(res => {
          if (res.statusCode === '0000') {
            callBackSubmit();
            notification.success({
              message: '提示',
              duration: 3,
              description: res.info,
            });
          } else {
            notification.error({
              message: '提示',
              duration: 3,
              description: res.errMsg,
            });
          }
        });
      }
    });
  };

  const changTable = e => {
    console.log(e);
    setSelectValue(e);
  };

  const aa = {
    beforeUpload: file => {
      // const isPNG = file.type === 'image/png';
      // if (!isPNG) {
      //   message.error(`${file.name} 不是png类型的图片`);
      // } else {
      setFile(file);
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        const image = new Image();
        image.src = reader.result;
        image.onload = () => {
          addTemplateForm.setFieldsValue({
            imageWidth: `${image.width}px`,
            imageHeight: `${image.height}px`,
            ModelFile: file.name,
            Name: file.name.substring(0, file.name.lastIndexOf('.')),
          });
        };
        // };
      };
      return Upload.LIST_IGNORE;
    },
    onChange: info => {
      console.log(info);
    },
  };

  return (
    <Drawer
      title="新增模型"
      visible={visible}
      width="500px"
      destroyOnClose
      {...props}
      footer={
        <Space>
          <Button onClick={submitAdd} type="primary">
            确定
          </Button>
        </Space>
      }
    >
      <Form form={addTemplateForm} labelCol={{ span: 5 }}>
        <Form.Item name="Type" label="模板类型" rules={[{ required: true, message: '不能为空' }]}>
          <Select
            placeholder="选择模板类型"
            onChange={changTable}
            style={{ marginLeft: '-3px' }}
            showSearch
          >
            {treeData
              ? treeData.map((item, index) => (
                  <Option key={item.id} value={item.name}>
                    {item.name}
                  </Option>
                ))
              : ''}
          </Select>
        </Form.Item>
        <Row>
          <Col span={17}>
            <Form.Item
              label="模型文件"
              name="ModelFile"
              labelCol={{ span: 7 }}
              rules={[
                {
                  required: true,
                  message: '请选择模型文件',
                },
              ]}
            >
              <Input placeholder="仅支持png和svg格式" />
            </Form.Item>
          </Col>
          <Col span={7}>
            <Form.Item>
              <Upload {...aa} accept=".png, .svg">
                <Button style={{ width: '130px' }}>上传图片</Button>
              </Upload>
            </Form.Item>
          </Col>
        </Row>
        <Form.Item label="模型名称" name="Name">
          <Input placeholder="请输入菜单组名称" />
        </Form.Item>
        <Row>
          <Col span={13}>
            <Form.Item label="宽" name="imageWidth" labelCol={{ span: 9 }}>
              <Input style={{ width: '153px' }} disabled />
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item label="高" name="imageHeight" labelCol={{ span: 7 }}>
              <Input style={{ width: '146px' }} disabled />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Drawer>
  );
};
export default AddTemplate;
