/* eslint-disable prefer-template */
/* eslint-disable indent */
/*
 * @Description:
 * @Author: leizhe
 * @Date: 2022-05-17 10:26:35
 * @LastEditTime: 2022-05-20 09:38:44
 * @LastEditors: leizhe
 */
import React, { useEffect, useState } from 'react';
import { Modal, Form, Input, notification, Button, Select, Space, Image } from 'antd';
import { UpdateParentId, modelManageListAll } from '@/services/drawBoardManage/api';

const { Option } = Select;

const AssociationModel = props => {
  const { visible, onCancel, obj, callBackSubmit = () => {} } = props;
  const { Item } = Form;
  const [form] = Form.useForm();
  const [data, setData] = useState([]);
  const [imageData, setImgData] = useState('');

  useEffect(() => {
    console.log(obj);
    if (visible) {
      modelManageListAll({
        modelName: '',
        modelType: '',
      }).then(res => {
        if (res.code === 0) {
          if (res.data.length > 0) {
            let aa = [];
            res.data.map(i => {
              aa.push(i);
            });
            let bb = aa;
            console.log(bb);
            console.log(obj);
            if (bb && bb.length > 0) {
              if (obj.RelModel != 0) {
                bb.splice(bb.findIndex(item => item.ID === obj.RelModel), 1);
              } else {
                bb.splice(bb.findIndex(item => item.ID === obj.ID), 1);
              }

              bb.map(i => {
                if (i.children && i.children.length > 0) {
                  delete i.children;
                }
              });
              console.log(bb);
              setData(bb);
            }
          }
        }
      });
    } else {
      form.resetFields();
      setImgData('');
      setData('');
    }
  }, [visible]);

  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        let obj1 = form.getFieldsValue();
        let aa = [];
        aa.push(obj.ID);
        UpdateParentId({ modelIds: aa, parentId: obj1.Name }).then(res => {
          if (res.code === 0) {
            callBackSubmit();
            onCancel();
            notification.success({
              message: '关联成功',
              duration: 2,
            });
          } else {
            notification.error({
              message: '关联失败',
              description: res.msg,
            });
          }
        });
      }
    });
  };

  const handleChange = e => {
    console.log(e);
    console.log(data);
    let aa = data.find(i => i.ID === e);
    console.log(aa);
    setImgData(aa.Path);
  };

  return (
    <Modal
      title="关联父模型"
      visible={visible}
      onCancel={onCancel}
      destroyOnClose
      width="600px"
      footer={
        <Space>
          <Button onClick={onSubmit} type="primary">
            确定
          </Button>
        </Space>
      }
    >
      <Form form={form} style={{ overflowY: 'scroll' }}>
        <Item
          labelCol={{ span: 8 }}
          name="Name"
          rules={[
            {
              required: true,
              message: '请选择父模型',
            },
          ]}
        >
          <Select
            style={{ width: '100%' }}
            placeholder="选择父模型"
            optionLabelProp="label"
            onChange={handleChange}
            optionFilterProp="label"
            showSearch
          >
            {data.length
              ? data.map((item, index) => (
                  <>
                    <Option value={item.ID} label={item.ModelName}>
                      <div className="demo-option-label-item">
                        {item.ModelName}
                        <span role="img" aria-label={item.ModelTypeName}>
                          （{item.ModelTypeName}）
                        </span>
                      </div>
                    </Option>
                  </>
                ))
              : ''}
          </Select>
        </Item>
        <Item>
          {imageData == '' ? (
            <></>
          ) : (
            <Image
              src={
                window.location.origin +
                `/Publish/Web/File/ModelManage/ModelFilePreview/${encodeURIComponent(imageData)}`
              }
              height="60px"
            />
          )}
        </Item>
      </Form>
    </Modal>
  );
};
export default AssociationModel;
