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


const AddConfig = (props) => {
  const {dispatch, visible, loading,
    handleClose, update, groupId, gatewayId,
    opsGather: {gatewayList, robinGroupInfo}
  } = props
  const [form] = Form.useForm();

  const handleSubmit =  e => {
    e.preventDefault();
    form.validateFields().then(values => {
      values.id =  groupId;
      // values.roundRobinGroupNum = values.groupNum
      values.gatewayId =gatewayId
      // delete values.groupNum
      dispatchHandle(dispatch, 'opsGather/device_service_round_robin_group_patch', values, () => {
        update()
        closeModal();
      });
    }).catch((err) => {
      console.log(err)
    });
  };
  const closeModal = () => {
    handleClose();
    form.resetFields()
  }


  const JsonGateway = JSON.stringify(gatewayList)
  const newGateway = JsonGateway
    .replace(/\bcode\b/g, "label")
    .replace(/\bid\b/g, "value")
  const gateWayData = JSON.parse(newGateway)

  const allFormData = [
    { label: '轮询组名称', name: 'name', type: 'input'},
    // { label: '网关', name: 'gatewayId', type: 'select', selectData: gateWayData},
    { label: '轮询组序号', name: 'groupNum', type: 'inputNumber'},
  ]
  const formTailLayout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 15 },
  };

  useEffect(() => {
    if (groupId && visible){
      dispatchHandle(dispatch, 'opsGather/device_service_round_robin_group_id_get', {id: groupId},res => {
        form.setFieldsValue(res)
      })
    }
  }, [groupId, visible])

  return (
    <Modal
      width={500}
      title={`${!groupId && '添加' || '编辑'}轮询组`}
      visible={ visible }
      onCancel={ closeModal }
      centered
      footer={null}
      getContainer={false}
      forceRender
      loading={loading}
    >
      <Form form={form} {...formTailLayout}  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.models.opsGather,
}))(AddConfig);