/** @format */

import * as React from 'react';
import {InputNumber, Form,Radio ,Input as AntdInput,Switch} from 'antd';
import Input from "../../../../components/input"
import {FormComponentProps} from 'antd/es/form';
import {ModifiableProps,TotalLimitParams,DayLimitParams} from "../../../../service/permission"
import ModalForm from '../../../../components/modalForm';
interface Iprops {
    visible?:boolean;
    name?: string;
    onCancle?:()=>void;
    onSubmit?:(values:DayLimitParams|TotalLimitParams,type:"time"|"count")=>void;
    type?:"time"|"count";
    values?: ModifiableProps;
    loading?:boolean;
}
const formItemLayout = {
    labelCol: {
        xs: {span: 24},
        sm: {span: 6},
    },
    wrapperCol: {
        xs: {span: 24},
        sm: {span: 18},
    },
};
const Limit: React.FC<Iprops & FormComponentProps> = props => {
    const {form, name,loading=false, values,onCancle,visible=false,type="time",onSubmit} = props;
    const {getFieldDecorator,getFieldValue,validateFieldsAndScroll} = form;
    const handleSubmit=()=>{
      validateFieldsAndScroll((error,values)=>{
          if(error) return;
          const type=values.type;
          delete values.type
          onSubmit&& onSubmit(values,type)
      })
    }
    const currenttType=getFieldValue("type")||type
    if(currenttType==="time"){
      getFieldDecorator("day_combo_id",{initialValue:values?.day_info.day_combo_id})
    }else{
      getFieldDecorator("total_combo_id",{initialValue:values?.total_info.total_combo_id})
    }
    return (
        <ModalForm loading={loading} onOk={handleSubmit} width={800} title={`修改(${name})`} visible={visible} onCancel={onCancle}>
            <Form {...formItemLayout}>
              <Form.Item label='套餐类型'>
                {getFieldDecorator("type",{
                      initialValue:type
                  })(
                  <Radio.Group  buttonStyle="solid">
                    <Radio.Button value="count" disabled={values?.total_info.total_combo_id===0}>按次</Radio.Button>
                    <Radio.Button value="time" disabled={values?.day_info.day_combo_id===0}>按时</Radio.Button>
                  </Radio.Group>)
                  }
              </Form.Item>
                <h3 style={{fontWeight:"bold"}}>套餐量</h3>
                {
                  currenttType==="time" ?
                  
                  <React.Fragment>
                    <Form.Item label='日调用量上限' 
                      help={`当前量：(${values?.day_info.day_combo_count}),操作后(${values?.day_info.day_combo_count+(getFieldValue("day_combo_increase_count")||0)})`}
                    >
                        {getFieldDecorator('day_combo_increase_count',{
                          initialValue:0
                        })(<InputNumber  style={{width:240}} placeholder="请设置日调用量上限!" />)}
                    </Form.Item>
                    <Form.Item 
                     label='剩余有效天数'
                     help={`当前天数:(${values?.day_info.effective_day})天,操作后:(${values?.day_info.effective_day+(getFieldValue("day_combo_increase_days")||0)})天`} 
                     >
                        {getFieldDecorator('day_combo_increase_days',{
                          initialValue:0
                        })(<InputNumber style={{width:240}}  placeholder="请设置剩余有效天数!"/>)}
                    </Form.Item>
                  </React.Fragment>
                  : <React.Fragment>
                      <Form.Item 
                      label='总调用量上限' 
                      help={`当前量:(${values?.total_info.total_combo_count}),操作后:${values?.total_info.total_combo_count+(getFieldValue("total_combo_increase_count")||0)}`} 
                      >
                          {getFieldDecorator('total_combo_increase_count',{
                            initialValue:0
                          })(<InputNumber style={{width:240}} placeholder="请设置总调用量上限!"/>)}
                      </Form.Item>
                  </React.Fragment>
                }
                <h3 style={{fontWeight:"bold"}}>套餐提示</h3>
                {
                  currenttType==="time" ?
                  <React.Fragment>
                    <Form.Item label='是否开启阈值'>
                      {getFieldDecorator('count_thresholds_enable',{
                        initialValue:values?.day_info.count_thresholds_enable||false,
                        valuePropName:"checked"
                      })(<Switch />)}
                   </Form.Item>
                    <Form.Item label='日调用量阈值' >
                        {getFieldDecorator('count_thresholds',{
                          initialValue:values?.day_info.count_thresholds
                        })(<Input placeholder="请设置日调用量阈值!" />)}
                    </Form.Item>
                    <Form.Item label='剩余有效天数阈值' >
                        {getFieldDecorator('day_thresholds',{
                            initialValue:values?.day_info.day_thresholds
                        })(<Input  placeholder="请设置剩余有效天数阈值!" />)}
                    </Form.Item>
                  </React.Fragment>
                  : 
                  <React.Fragment>
                  <Form.Item label='是否开启阈值'>
                    {getFieldDecorator('count_thresholds_enable',{
                        initialValue:values?.total_info.count_thresholds_enable||false,
                        valuePropName:"checked"
                    })(<Switch />)}
                   </Form.Item>
                  <Form.Item label='总调用量阈值' >
                        {getFieldDecorator('count_thresholds',{
                              initialValue:values?.total_info.count_thresholds,
                        })(<Input placeholder="请设置总调用量阈值!" />)}
                    </Form.Item>
                  </React.Fragment>
                }
                <h3 style={{fontWeight:"bold"}}>内部管控</h3>
                <Form.Item label='日可调用量上限(即查)'>
                      {getFieldDecorator('day_total_count',{
                          initialValue:values?.total_info.day_total_count
                      })(<InputNumber style={{width:240}} placeholder="请设置日可调用量上限(即查)!" />)}
                </Form.Item>
                {
                   currenttType!=="time" &&  <Form.Item label='日调用量上限'>
                   {getFieldDecorator('total_combo_day_count',{
                       initialValue:values?.total_info.total_combo_day_count
                   })(<InputNumber style={{width:240}} placeholder="请设置日调用量上限" />)}
                   </Form.Item>
                }
                <Form.Item label='开启白名单'>
                    {getFieldDecorator('ip_whitelist_enable',{
                        initialValue:values?.day_info.ip_whitelist_enable||false,
                        valuePropName:"checked"
                    })(<Switch />)}
                </Form.Item>
                <Form.Item label='Ip白名单'>
                    {getFieldDecorator('ip_whitelist',{
                        initialValue:values?.day_info.ip_whitelist
                    })(<AntdInput.TextArea placeholder="请设置IP白名单!" rows={4}/>)}
                </Form.Item>
            </Form>
        </ModalForm>
    );
};
export default Form.create<Iprops & FormComponentProps>({name: 'limit'})(Limit);
