/** @format */

import * as React from 'react';
import {Radio, Input,Form,InputNumber,Row,Col} from 'antd';
import {WrappedFormUtils} from 'antd/es/form/Form';

interface ControllerValues{
   count_type?: 0 | 1;
   count_code?: string; 
   count_value?: string
}
interface Iprops {
    value?: ControllerValues;
    onChange?: (values: ControllerValues) => void;
    form:WrappedFormUtils
}
export default React.forwardRef((props: Iprops, ref) => {
    const {value,onChange,form} = props;
    const {getFieldDecorator}=form
    const handleChange=(value:ControllerValues)=>{
      onChange && onChange(value)
    }
    return (
        <React.Fragment>
            <Radio.Group
                value={value?.count_type}
                onChange={e => handleChange({...value, count_type: e.target.value})}
            >
              <Radio value={0}>即查</Radio>
              <Radio value={1}>查得</Radio>
            </Radio.Group>
            {value?.count_type === 0 ? 
           <div>注意：用户成功查询即扣调用次数</div>
             : (
  <>
      <Row gutter={24} >
        <Col span={5}>
           规则：当响应参数的对应值匹配
        </Col>
        <Col span={4}>
           <Form.Item>
                {
                  getFieldDecorator("count_code",{
                    initialValue:value?.count_code,
                      rules:[{
                        required:false,
                        message:"请输入匹配错误码!"
                      }]
                  })( 
                  <Input
                    placeholder="请输入匹配错误码!"
                    onChange={e => handleChange({...value, count_code: e.target.value})}
                  />)
                }
              </Form.Item>
        
        </Col>
        <Col span={3}>
        时才扣调用次数
        </Col>
        
      </Row>
      <div>说明：输入的错误码为数字，若有多个以英文逗号隔开；不填则不扣调用次数</div>
  </>
)}
        </React.Fragment>
    );
});

