/** @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 type="flex" justify="start">
        <Col span={6}>
           规则：当响应参数的对应值匹配
        </Col>
        <Col span={14}>
          <Row>
            <Col span={8}>
                <Form.Item >
                    {
                      getFieldDecorator("count_code",{
                        initialValue:value?.count_code,
                          rules:[{
                            required:true,
                            message:"请输入响应参数!"
                          }]
                      })( 
                      <Input
                        placeholder="请输入响应参数!"
                        onChange={e => handleChange({...value, count_code: e.target.value})}
                      />)
                    }
                  </Form.Item>
            </Col>
            {
              value?.count_value!==undefined &&  
              <>
              <Col span={6}>
              的对应值匹配
              </Col>
              <Col span={10}>
               <Form.Item labelCol={{sm:{span:0}}} wrapperCol={{sm:{span:17}}} >
               {
                 getFieldDecorator("count_value",{
                   initialValue:value?.count_value,
                     rules:[{
                       required:true,
                       message:"请输入匹配值!"
                     }]
                 })( 
                 <Input
                   placeholder="请输入匹配值!"
                   onChange={e => handleChange({...value, count_value: e.target.value})}
                 />)
               }
             </Form.Item>
             </Col>
              </>
            }
          </Row>
        </Col>
        <Col span={4}>
        时才扣调用次数
        </Col>
      </Row>
      <div>说明：输入的错误码为数字，若有多个以英文逗号隔开；不填则不扣调用次数</div>
  </>
)}
        </React.Fragment>
    );
});

