import React, {useEffect} from 'react';
import { connect } from 'umi';
import { Form, Card, Button, Row, Col, Input } from 'antd';
import { dispatchHandle } from '@/utils/publicHandle';
import { DescriptionForm } from '@/components/Customized/Description';

const isBigScreenScale = window.innerWidth / 1600 > 1;

const AddInstrument = (props) => {
  const {id} = props?.match?.params;
  const {
    dispatch,
    opsGather: {attarInfo, meterSelect, roundRobinSelect, attrSelectData}
  } = props;
  /**
   * @表单提交
   */
  const [form] = Form.useForm();

  const handleSubmit =  e => {
    e.preventDefault();
    form.validateFields().then(values => {
      console.log(values)
      // dispatchHandle(dispatch, 'opsGather/device_service_type_post', values);
    }).catch((err) => {
      console.log(err)
    });
  };

  /**
   * @页面方法
   */
  const goBack = () => {
    closeCurrentPage('/ops/gather/attar')
  }

  /**
   * @页面数据
   */

  const getSelectData = () => {
    dispatchHandle(dispatch, 'opsGather/device_service_meter_post');
    dispatchHandle(dispatch, 'opsGather/device_service_round_robin_post');
    dispatchHandle(dispatch, 'opsGather/device_service_meter_attr_data_type_get');
  }
  useEffect(() => {
    if (id) {
      dispatchHandle(dispatch, 'opsGather/device_service_type_post', {id}, res => {
        console.log(res)
      });
    }
    getSelectData()
  }, [])

  const JsonData = JSON.stringify(meterSelect)
  const newJson = JsonData
    .replace(/\bname\b/g, "label")
    .replace(/\bid\b/g, "value")
  const mSelect = JSON.parse(newJson)

  const rSelect = roundRobinSelect.map(item => ({
    label: `id: ${item.id} command: ${item.command}`,
    value: item.pollingId
  }))

  const JsonAttar = JSON.stringify(attrSelectData)
  const newAttar = JsonAttar
    .replace(/\bname\b/g, "label")
    .replace(/\bid\b/g, "value")
  const aSelect = JSON.parse(newAttar)

  const infoData = [
    { label: '属性名称', name: 'name', type: 'input'},
    { label: '偏移地址', name: 'offsetAddress', type: 'input'},
    { label: '系数', name: 'coefficient', type: 'input'},
    { label: '比特位', name: 'bit', type: 'input'},


    { label: '计量器id', name: 'meterId', type: 'select', selectData: mSelect},
    { label: '数据类型id', name: 'dataTypeId', type: 'select', selectData: rSelect},
    { label: '轮询id', name: 'pollingId', type: 'select', selectData: aSelect},

    { label: '是否是计量属性', name: 'measureIs', type: 'switch'},
    { label: '是否大端模式', name: 'bigEndianIs', type: 'switch'},

  ];
  return (
    <Card size="small">
      <Form form={form} onFinish={ handleSubmit } initialValues={{measureIs: false, bigEndianIs: false}}>
        <DescriptionForm
          columns={isBigScreenScale ? 4 : 3}
          data={infoData}
        />
        <div style={{ marginTop: 32, textAlign: 'right' }}>
          <Button style={{ width: 100, height: 30, marginRight: 20 }} onClick={goBack}>
            取消
          </Button>
          <Button style={{ width: 100, height: 30 }} type="primary" onClick={handleSubmit}>
            保存
          </Button>
        </div>
      </Form>
    </Card>
  );
};

export default connect(({ opsGather, loading }) => ({
  opsGather,
  loading: loading.models.opsGather,
}))(AddInstrument);