import React, {useEffect} from 'react';
import { connect } from 'umi';
import { dispatchHandle } from '@/utils/publicHandle';
import useFormTable from '@/useHooks/useFormTable';
import { Form, Modal, Button, Checkbox, Select } from 'antd';
import {createSubmitForm} from "@/utils/createForm";
import styles from '../index.less';
import ModelSelect from './ModelSelect'

const BatchCreate = (props) => {
  const {dispatch, visible, loading, update,
    handleClose, onView, gateWayId,
    opsGather: {modelList}
  } = props

  const [form] = Form.useForm();

  const closeModal = () => {
    handleClose();
    form.resetFields()
  }
  const handleSubmit =  e => {
    e.preventDefault();
    form.validateFields().then(values => {
      values.gatewayId = gateWayId
      dispatchHandle(dispatch,
        'opsGather/device_service_round_robin_group_builder_batch_post',
        { ...values },
        (data) => {
        update()
        closeModal();
      });
    }).catch((err) => {
      console.log(err)
    });
  };

  const titleChange = name => {
    form.setFieldsValue({
      roundRobinGroupName: name
    })
  }

  const allFormData = [
    { require: true, label: '命令模型', name: 'meterModelId', type: 'auto',
      auto: <ModelSelect selectData={modelList} openExample={onView} onTitle={titleChange}/>
    },
    { require: true, label: '轮询组前缀', name: 'roundRobinGroupName', type: 'input'},
    { require: true, label: '轮询组开始序号', name: 'numStart', type: 'inputNumber'},
    { require: true, label: '轮询组结束序号', name: 'numEnd', type: 'inputNumber'},
    { label: '轮询间隔', name: 'interval', type: 'inputNumber'},
    { label: '离线缓存间隔', name: 'offlineInterval', type: 'inputNumber'},
  ]

  return (
    <Modal
      width={540}
      destroyOnClose
      title="批量生成轮询组"
      visible={ visible }
      onCancel={ closeModal }
      centered
      footer={null}
      getContainer={false}
      forceRender
      loading={loading}
    >
      <Form form={form} onFinish={ handleSubmit }>
        {allFormData?.length > 0 && allFormData.map(item => createSubmitForm(item))}

        <div style={{ marginTop: 32, textAlign: 'right' }}>
          <Button style={{ width: 100, marginRight: 20 }} onClick={closeModal}>
            取消
          </Button>
          <Button style={{ width: 100}} type="primary" loading={loading} onClick={handleSubmit}>
            保存
          </Button>
        </div>
      </Form>

    </Modal>
  );
};

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