import React, {useEffect} from 'react';
import { connect } from 'umi';
import { Form, Modal, Button, Row, Col, Select, Spin } from 'antd';
import {createSubmitForm} from "@/utils/createForm";
import {dispatchHandle} from "@/utils/publicHandle";
import CommandList from '../AutoForm/CommandList'

const Command = (props) => {
  const { visible, loading, dispatch,
    handleClose, onSubmit, modelId
  } = props
  const [form] = Form.useForm();

  const handleSubmit =  e => {
    e.preventDefault();
    form.validateFields().then(values => {
      dispatchHandle(dispatch,
        'opsGather/device_service_meter_model_patch',
        {...values, id: modelId},
        () => {
        closeModal()
      })
    }).catch((err) => {
      console.log(err)
    });
  };
  const closeModal = () => {
    handleClose();
    form.resetFields()
  }

  useEffect(() => {
    if (visible && modelId) {
      dispatchHandle(dispatch,
        'opsGather/device_service_meter_model_id_get',
        {id: modelId},
        (data) => {
          form.setFieldsValue(data)
        }
      )
    }
  }, [visible, modelId])
  return (
    <Modal
      width={1200}
      title='指令配置'
      visible={ visible }
      onCancel={ closeModal }
      centered
      footer={null}
      forceRender
      getContainer={false}
      loading={loading}
      bodyStyle={{padding: 12}}
    >
      <Form form={form} onFinish={ handleSubmit }>
        <Spin spinning={loading || false}>
          <Form.Item name="commandTemplate" style={{marginBottom: 0}}>
            <CommandList form={form}/>
          </Form.Item>
        </Spin>
        <div style={{ marginTop: 15, textAlign: 'right' }}>
          <Button style={{marginRight: 20 }} onClick={closeModal}>
            取消
          </Button>
          <Button type="primary" loading={loading} onClick={handleSubmit}>
            保存
          </Button>
        </div>
      </Form>
    </Modal>
  );
};

export default connect(({ opsGather, loading }) => ({
  opsGather,
  loading: loading.effects['opsGather/device_service_meter_model_id_get'],
}))(Command);