AddModal.jsx

import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Select, notification, DatePicker, Spin, Button, Card, Row, Col } from 'antd';
import styles from '../policiesIssued.less'
// import moment from 'moment';
// import locale from 'antd/es/date-picker/locale/zh_CN';
// import 'moment/locale/zh-cn';

import moment from 'moment'
import locale from 'antd/lib/date-picker/locale/zh_CN'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
import {
  getEquipmentInfo, getQutaList, addStrategyOptions, editStrategyOptions, getPredictDevice, getPredictDevicePoint, getPredictInfo
} from '@/services/intelligence/api';
import { DeleteOutlined } from '@ant-design/icons';



const { TextArea } = Input;
const AddModal = props => {
  const { callBackSubmit = () => { }, type, formObj, visible, deviceType } = props;
  const [loading, setLoading] = useState(false);
  const [isloading, setIsLoading] = useState(false);
  const [deviceCodes, setDeviceCode] = useState([]); //设备编码列表
  const [predictCode, setPredictCode] = useState([]); //预测编码列表
  const [deviceList, setDeviceList] = useState([]); //设备列表
  const [card, setCard] = useState([]); //卡片列表值
  const [source, setSource] = useState([])
  const [PredictID, setPredictID] = useState()
  const [form] = Form.useForm();
  const { Item } = Form;
  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        let obj = form.getFieldsValue();
        let api = addStrategyOptions
        let query = {
          DeviceType: obj.DeviceType,
          StrategyDes: obj.StrategyDes,
          StrategyName: obj.StrategyName,
          StrategyType: obj.StrategyType,
          DetailInfos: card,
          CreateTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
          PredictID
        }
        type === 'edit' ? (query.ID = formObj.ID) && (api = editStrategyOptions) : delete query.ID && (api = addStrategyOptions)
        setLoading(true);
        api(query).then(res => {
          setLoading(false);
          if (res.errMsg === '') {
            form.resetFields();
            callBackSubmit();
            prompt('success', `${type === 'add' ? "增加成功" : res.errMsg}`)
          } else {
            prompt('fail', `${type === 'add' ? "增加失败" : res.errMsg}`)
          }
        }).catch(e => {
          setLoading(false);
        })
      }
    });
  };
  const prompt = (type, content) => {
    if (type == 'success') {
      notification.success({
        message: '提示',
        duration: 3,
        description: content,
      });
    }
    else {
      notification.error({
        message: '提示',
        duration: 3,
        description: content,
      });
    }
  }
  const onFinish = value => { };
  useEffect(() => {
    switch (type) {
      case 'add':
        initData()
        break;
      case 'edit':
        initData()
        break;
      default:
        break;
    }
  }, [visible]);

  //页面初始化
  const initData = () => {
    getPredictInfo().then(res => {
      res.getMe && res.getMe.length && setSource(res.getMe)
    })
    if (type === 'add') {
      form.resetFields();
      setCard([])
      setDeviceList([])
    }
    else {
      form.setFieldsValue({ time: moment(formObj.CreateTime, "YYYYMMDDHHmmss"), ...formObj });
      if (formObj.DetailInfos.length) {
        let req1 = getEquipmentInfo(formObj.DeviceType)
        let req2 = getPredictDevice(formObj.DeviceType)
        Promise.all([req1, req2]).then(respone => {
          console.log('respone', respone);
          respone[0].getMe.length && respone[0].getMe[0].DeviceList.length && setDeviceCode(respone[0].getMe[0].DeviceList)
          respone[1].getMe.length && setPredictCode(respone[1].getMe)
          let arr = []
          formObj.DetailInfos.map((item, index) => {
            console.log(1);
            arr[index] = {}
            arr[index].code = respone[0].getMe.length ? respone[0].getMe[0].DeviceList : []
            arr[index].predictCode = respone[1].getMe.length ? respone[1].getMe : []
            form.setFieldsValue({
              [`deviceCode${index}`]: item.ControlCode,
              [`indextr${index}`]: item.ControlPoint,
              [`max${index}`]: item.PredictCode,
              [`min${index}`]: item.PredictPoint
            })
          })
          setCard(formObj.DetailInfos)
          setDeviceList(arr)
          setLoading(false)
        })
      }

    }

  }
  //获取设备编码
  const getDeviceCode = () => {
    setLoading(false)
    let obj = form.getFieldsValue();
    let req1 = getEquipmentInfo(obj.DeviceType)
    let req2 = getPredictDevice(obj.DeviceType)
    Promise.all([req1, req2]).then(respone => {
      respone[0].getMe.length && respone[0].getMe[0].DeviceList.length && setDeviceCode(respone[0].getMe[0].DeviceList)
      respone[1].getMe.length && setPredictCode(respone[1].getMe)
      if (deviceList.length) {
        let arr = [...deviceList]
        arr.map((item, index) => {
          arr[index].code = respone[0].getMe.length ? respone[0].getMe[0].DeviceList : []
          arr[index].predictCode = respone[1].getMe.length ? respone[1].getMe : []
          arr[index].indexStr = ''
          arr[index].predictStr = ''
          clearInput(index)
        })
        setDeviceList(arr)
      }
      setLoading(false)
    })

  }
  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };
  //选择设备类型
  const handleDeviceType = (value) => {
    getDeviceCode()
  }

  //选择设备编码
  const handleChange = (value, option) => {
    let cardList = [...card]
    cardList[+option.index].ControlCode = value
    setCard(cardList)
    let obj = form.getFieldsValue();
    getQutaList({ accountName: obj.DeviceType, AddrSchemeID: option.pointid }).then(res => {
      if (res.getMe && res.getMe.length) {
        let arr = [...deviceList]
        arr[+option.index].indexStr = res.getMe
        setDeviceList(arr)
      }
    })
  }
  //选择预测编码
  const handleChange1 = (value, option) => {
    let cardList = [...card]
    cardList[+option.index].PredictCode = value
    setCard(cardList)
    let obj = form.getFieldsValue();
    getPredictDevicePoint({ deviceType: obj.DeviceType, DeviceCode: value }).then(res => {
      console.log('res', res);
      if (res.getMe && res.getMe.length) {
        let arr = [...deviceList]
        arr[+option.index].predictStr = res.getMe
        setDeviceList(arr)
      }
    })
  }
  //选择设备指标
  const handleChangeIndex = (value, option) => {
    let cardList = [...card]
    cardList[+option.index].ControlPoint = value
    setCard(cardList)
  }
  //选择预测指标
  const handleChangeIndex1 = (value, option) => {
    let cardList = [...card]
    cardList[+option.index].PredictPoint = value
    setCard(cardList)
  }

  const add = () => {
    let obj = form.getFieldsValue();
    if (!obj.DeviceType) {
      notification.error({
        message: '提示',
        duration: 3,
        description: '请选择设备类型',
      });
    } else {
      let cardList = [...card]
      let arr = [...deviceList]
      cardList.push({})
      setCard(cardList)
      arr.push({ code: deviceCodes, predictCode })
      setDeviceList(arr)
    }
  }
  //清除卡片删除一项的值
  const clearInput = (index) => {
    form.setFieldsValue({
      [`deviceCode${index}`]: undefined,
      [`indextr${index}`]: undefined,
      [`max${index}`]: undefined,
      [`min${index}`]: undefined
    })
  }
  //删除卡片
  const deleteDevice = (index) => {
    let cardList = [...card]
    let arr = [...deviceList]
    cardList.splice(index, 1)
    arr.splice(index, 1)
    clearInput(index)
    setCard(cardList)
    setDeviceList(arr)
  }
  const handleOrgin =(value,option) =>{
    setPredictID(option.id)
  }

  return (
    <Modal
      title={`${type === 'add' ? '策略下发新增' : '编辑'}`}
      bodyStyle={{ width: '100%', minHeight: '100px' }}
      style={{ top: '150px' }}
      width="800px"
      destroyOnClose
      maskClosable={false}
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      confirmLoading={loading}
      forceRender={true}
      getContainer={false}
    >
      <Spin spinning={isloading} delay={300}>
        {visible && (
          <Form form={form} {...layout} onFinish={onFinish}>
            <Item
              label="策略名称"
              name="StrategyName"
              rules={[{ required: true, message: '请输入策略名称' }]}
            >
              <Input placeholder="请输入任务名称" allowClear />
            </Item>
            <Item
              label="策略类型"
              name="StrategyType"
              rules={[{ required: true, message: '请选择策略类型' }]}
            >
              <Select >
                <Select.Option value='实时控制'>实时控制</Select.Option>
                <Select.Option value='时段控制'>时段控制</Select.Option>

              </Select>
            </Item>
            <Item
              label="数据来源"
              name="PredictName"
              rules={[{ required: true, message: '请选择数据来源' }]}
            >
              <Select  onChange={(value, option) => handleOrgin(value, option)}>
                {source.length ? source.map((item, index) => { return <Select.Option key={index} id={item.ID} value={item.PredictName}>{item.PredictName}</Select.Option> }) : ''}
              </Select>
            </Item>
            <Item
              label="设备类型"
              name="DeviceType"
            >
              <Select onChange={handleDeviceType} >
                {deviceType.length ? deviceType.map((item, index) => { return <Select.Option key={index} value={item.DeviceType}>{item.DeviceType}</Select.Option> }) : ''}
              </Select>
            </Item>
            <Item
              label="描述"
              name="StrategyDes"
            >
              <TextArea placeholder="可输入描述信息" rows={4} allowClear />
            </Item>
            <Button size="small" onClick={() => { add() }}>
              新增
            </Button>
            <div className={styles.deviceList}>
              {deviceList.length ? deviceList.map((item, index) => {
                return <Card key={index} style={{ marginTop: '0.5rem' }}>
                  <Row gutter='36' justify='space-between'>
                    <Col span={12}>
                      <Item
                        label="控制编码"
                        name={'deviceCode' + index}
                        rules={[{ required: true, message: '请选择设备编码' }]}
                      >
                        <Select
                          placeholder="请选择控制编码"
                          onChange={(value, option) => handleChange(value, option)}
                        >
                          {item.code.length ? item.code.map((item, codeIndex) => { return <Select.Option index={index} key={codeIndex} value={item.Code} pointid={item.PointAddressID}>{item.Code}</Select.Option> }) : ''}
                        </Select>
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item
                        label="控制指标"
                        name={'indextr' + index}
                        rules={[{ required: true, message: '请选择指标名称' }]}
                      >
                        <Select
                          placeholder="请选择控制指标"
                          onChange={(value, option) => handleChangeIndex(value, option)}
                        >
                          {item.indexStr && item.indexStr.length ? item.indexStr.map((item, zindex) => { return <Select.Option key={zindex} index={index} value={item.Name}>{item.Name}</Select.Option> }) : ''}
                        </Select>
                      </Item>
                    </Col>
                  </Row>
                  <Row gutter='24' justify='space-between'>
                    <Col span={12}>
                      <Item
                        label="预测编码"
                        name={'max' + index}
                        rules={[{ required: true, message: '请输入预测编码' }]}
                      >
                        <Select
                          placeholder="请选择预测编码"
                          onChange={(value, option) => handleChange1(value, option)}
                        >
                          {item.predictCode.length ? item.predictCode.map((item, codeIndex) => { return <Select.Option index={index} key={codeIndex} value={item} >{item}</Select.Option> }) : ''}
                        </Select>
                        {/* <Input placeholder="请输入最大值" onChange={(value) => inputMax(value, index)} index={index} allowClear /> */}
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item
                        label="预测指标"
                        name={'min' + index}
                        rules={[{ required: true, message: '请输入预测指标' }]}
                      >
                        <Select
                          placeholder="请选择预测指标"
                          onChange={(value, option) => handleChangeIndex1(value, option)}
                        >
                          {item.predictStr && item.predictStr.length ? item.predictStr.map((item, zindex) => { return <Select.Option key={zindex} index={index} value={item}>{item}</Select.Option> }) : ''}
                        </Select>
                      </Item>
                    </Col>
                  </Row>
                  <DeleteOutlined
                    className={styles.deleteItem}
                    onClick={() => deleteDevice(index)}
                    style={{ fontSize: '16px', color: '#e86060' }}
                  />
                </Card>
              }) : ''}
            </div>
          </Form>
        )}
      </Spin>

    </Modal>
  );
};
export default AddModal;