/* eslint-disable react/jsx-boolean-value */
import React, { useState, useEffect } from 'react';
import {
  Form,
  Modal,
  Input,
  notification,
  Radio,
  InputNumber,
  Checkbox,
  Switch,
  Tooltip,
  Row,
  Col,
} from 'antd';
import { SaveRoutes } from '@/services/hostmanager/hostmanager';
import { InfoCircleOutlined } from '@ant-design/icons';

const { Item } = Form;
const { TextArea } = Input;
const AddModal = props => {
  const { callBackSubmit = () => {}, type, pickItem, visible, onCancel, keepData } = props;
  const [loading, setLoading] = useState(false);
  const [current, setCurrent] = useState(false);
  const [advanced, setAdvanced] = useState(0);
  const [hidden, setHidden] = useState(false);
  const [form] = Form.useForm();

  useEffect(() => {
    if (visible) {
      if (type === 'edit') {
        if (pickItem.remark) {
          setHidden(true);
        }
        let aa = pickItem.methods.replace(/\s/g, '');
        form.setFieldsValue({
          UpstreamPathTemplate: pickItem.upstreamPathTemplate,
          DownstreamPathTemplate: pickItem.downstreamPathTemplate,
          Methods: aa.split(','),
          Url: pickItem.url,
          IsAuthentication: pickItem.isAuthentication,
          Key: pickItem.key,
          Priority: pickItem.priority,
          Remark: pickItem.remark,
          UpstreamHost: pickItem.upstreamHost,
          AddHeasersToRequest: pickItem.addHeasersToRequest,
          UpstreamHeaderTransform: pickItem.upstreamHeaderTransform,
          DownstreamHeaderTransform: pickItem.downstreamHeaderTransform,
          Timeout: pickItem.timeout,
          QoSOptions: pickItem.qoSOptions,
          RateLimitOptions: pickItem.rateLimitOptions,
          CacheOptions: pickItem.cacheOptions,
          LoadBalancerOptions: pickItem.loadBalancerOptions,
          SecurityOptions: pickItem.securityOptions,
          RequestIdKey: pickItem.requestIdKey,
          ServiceName: pickItem.serviceName,
          ServiceNamespace: pickItem.serviceNamespace,
          DelegatingHandlers: pickItem.delegatingHandlers,
          ReRouteIsCaseSensitive: pickItem.reRouteIsCaseSensitive,
          DownstreamHttpMethod: pickItem.downstreamHttpMethod,
        });
        if (
          pickItem.upstreamHost ||
          pickItem.addHeasersToRequest ||
          pickItem.upstreamHeaderTransform ||
          pickItem.downstreamHeaderTransform ||
          pickItem.timeout ||
          pickItem.qoSOptions ||
          pickItem.rateLimitOptions ||
          pickItem.cacheOptions ||
          pickItem.loadBalancerOptions ||
          pickItem.securityOptions ||
          pickItem.requestIdKey ||
          pickItem.serviceName ||
          pickItem.serviceNamespace ||
          pickItem.delegatingHandlers ||
          pickItem.reRouteIsCaseSensitive ||
          pickItem.downstreamHttpMethod
        ) {
          setAdvanced(1);
          setCurrent(true);
        }
      } else {
        form.setFieldsValue({ IsAuthentication: true, Priority: 1, Methods: ['GET', 'POST'] });
      }
    } else {
      setHidden(false);
      form.resetFields();
      setAdvanced(0);
      setCurrent(false);
    }
  }, [visible]);
  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        setLoading(true);
        let obj = form.getFieldsValue();
        let aa = obj.Methods.toString();
        obj.Methods = aa.replace(/\s/g, '');
        let data = {
          UpstreamPathTemplate: obj.UpstreamPathTemplate || null,
          DownstreamPathTemplate: obj.DownstreamPathTemplate || null,
          Methods: obj.Methods || null,
          Url: obj.Url || null,
          IsAuthentication: obj.IsAuthentication,
          Key: obj.Key || null,
          Remark: obj.Remark || null,
          Priority: obj.Priority || 0,
          UpstreamHost: obj.UpstreamHost || null,
          AddHeasersToRequest: obj.AddHeasersToRequest || null,
          UpstreamHeaderTransform: obj.UpstreamHeaderTransform || null,
          DownstreamHeaderTransform: obj.DownstreamHeaderTransform || null,
          Timeout: obj.Timeout || null,
          QoSOptions: obj.QoSOptions || null,
          RateLimitOptions: obj.RateLimitOptions || null,
          CacheOptions: obj.CacheOptions || null,
          LoadBalancerOptions: obj.LoadBalancerOptions || null,
          SecurityOptions: obj.SecurityOptions || null,
          RequestIdKey: obj.RequestIdKey || null,
          ServiceName: obj.ServiceName || null,
          ServiceNamespace: obj.ServiceNamespace || null,
          DelegatingHandlers: obj.DelegatingHandlers || null,
          ReRouteIsCaseSensitive: obj.ReRouteIsCaseSensitive || null,
          DownstreamHttpMethod: obj.DownstreamHttpMethod || null,
        };
        let str = type === 'add' ? '新增' : '编辑';
        SaveRoutes([
          {
            ...data,
            IsEnable: 1,
          },
        ])
          .then(res => {
            setLoading(false);
            if (res.code === 0) {
              onCancel();
              callBackSubmit();
              notification.success({
                message: '提示',
                duration: 3,
                description: res.msg || `${str}成功`,
              });
            } else {
              notification.error({
                message: '提示',
                duration: 3,
                description: res.msg || `${str}失败`,
              });
            }
          })
          .catch(err => {
            setLoading(false);
          });
      }
    });
  };

  const layout = {
    layout: 'horizontal',
    labelCol: { span: 4 },
    wrapperCol: { span: 18 },
  };

  const plainOptions = ['GET', 'POST', 'PUT', 'DELETE'];

  const change = (e, event) => {
    if (e) {
      setAdvanced(1);
      setCurrent(true);
    } else {
      setAdvanced(0);
      setCurrent(false);
    }
  };

  return (
    <Modal
      title={type === 'add' ? '新增网关配置' : '编辑网关配置'}
      bodyStyle={{ width: '100%', maxHeight: '600px', overflow: 'scroll', minHeight: '360px' }}
      width="700px"
      destroyOnClose
      maskClosable={false}
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      confirmLoading={loading}
      forceRender={true}
      getContainer={false}
    >
      <Form form={form} {...layout}>
        <Item
          label="上游路由模板"
          name="UpstreamPathTemplate"
          rules={[
            {
              validator: (rule, value) => {
                let aa = form.getFieldValue().UpstreamPathTemplate;
                console.log(aa.indexOf('/PandaCore/GateWay'));
                if (!aa.startsWith('/')) {
                  return Promise.reject('必须以/开头');
                }
                if (aa.indexOf('/PandaCore/GateWay') != -1) {
                  return Promise.reject('无需添加/PandaCore/GateWay');
                }

                return Promise.resolve();
              },
            },
            {
              required: true,
              message: '请输入上游路由模板',
            },
          ]}
        >
          <Input
            allowClear
            style={{ width: '100%' }}
            placeholder="示例:/CivData/{url}"
            disabled={hidden}
          />
        </Item>
        <Item
          label="下游路由模板"
          name="DownstreamPathTemplate"
          rules={[
            {
              validator: (rule, value) => {
                let aa = form.getFieldValue().DownstreamPathTemplate;
                console.log(aa.startsWith('/'));
                if (!aa.startsWith('/')) {
                  return Promise.reject('必须以/开头');
                }
                return Promise.resolve();
              },
            },
            {
              required: true,
              message: '请输入下游路由模板',
            },
          ]}
        >
          <Input allowClear placeholder="示例:/{url}" disabled={hidden} />
        </Item>
        <Item
          label="上游请求方式"
          name="Methods"
          rules={[
            {
              required: true,
              message: '请选择上游请求方式',
            },
          ]}
        >
          <Checkbox.Group options={plainOptions} style={{ display: 'flex' }} />
        </Item>
        <Item
          label="下游服务地址"
          name="Url"
          rules={[
            {
              required: true,
              message: '请输入下游服务地址',
            },
          ]}
        >
          <Input allowClear placeholder="示例:http://localhost:8050" />
        </Item>
        <Item label="身份认证" name="IsAuthentication">
          <Radio.Group>
            <Radio value={true}>开启</Radio>
            <Radio value={false}>关闭</Radio>
          </Radio.Group>
        </Item>
        <Item
          label="关键字"
          name="Key"
          rules={[
            {
              validator: (rule, value) => {
                let val = form.getFieldValue().Key;
                if (/[\u4E00-\u9FA5]/.test(val)) {
                  return Promise.reject('不允许输入中文');
                }
                if (type === 'edit') {
                  if (keepData.indexOf(val) !== -1 && pickItem.key !== val) {
                    return Promise.reject('关键字已存在');
                  }
                } else if (keepData.indexOf(val) !== -1) {
                  return Promise.reject('关键字已存在');
                }

                return Promise.resolve();
              },
            },
          ]}
        >
          <Input allowClear disabled={hidden} />
        </Item>
        <Item
          label="备注"
          name="Remark"
          rules={[
            {
              required: true,
              message: '请填写备注',
            },
          ]}
        >
          <TextArea placeholder="请填写备注" allowClear />
        </Item>
        <Row>
          <Col span={8}>
            <Item
              // label={
              //   <div>
              //     <Tooltip title="0默认级别最低，10最高，优先级越高越先匹配">
              //       <InfoCircleOutlined
              //         style={{
              //           color: 'rgb(24, 144, 255)',
              //           marginLeft: '0px',
              //           marginRight: '5px',
              //         }}
              //       />
              //     </Tooltip>
              //     <span>优先级</span>
              //   </div>
              // }
              label="优先级"
              name="Priority"
              labelCol={{ span: 12 }}
            >
              <InputNumber
                min={0}
                max={10}
                defaultValue={0}
                disabled={pickItem.remark === '万能模板'}
              />
            </Item>
          </Col>
          <Col span={16}>
            <Item>
              <span style={{ color: 'red' }}>0默认级别最低，10最高，优先级越高越先匹配</span>
            </Item>
          </Col>
        </Row>
        {/* <Switch
          checkedChildren="高级设置"
          unCheckedChildren="高级设置"
          onChange={change}
          checked={current}
          style={{ marginLeft: '40px', marginBottom: '15px' }}
        />
        {advanced === 1 ? (
          <>
            <Item label="上游host" name="UpstreamHost">
              <Input allowClear />
            </Item>
            <Item label="头部信息" name="AddHeasersToRequest">
              <Input allowClear />
            </Item>
            <Item label="上游头信息转发" name="UpstreamHeaderTransform">
              <Input allowClear />
            </Item>
            <Item label="下游头信息转发" name="DownstreamHeaderTransform">
              <Input allowClear />
            </Item>

            <Item label="超时设置" name="Timeout">
              <Input allowClear />
            </Item>
            <Item label="服务质量与熔断" name="QoSOptions">
              <Input allowClear />
            </Item>
            <Item label="限流配置" name="RateLimitOptions">
              <Input allowClear />
            </Item>
            <Item label="缓存" name="CacheOptions">
              <Input allowClear />
            </Item>
            <Item label="负载均衡" name="LoadBalancerOptions">
              <Input allowClear />
            </Item>
            <Item label="安全配置" name="SecurityOptions">
              <Input allowClear />
            </Item>
            <Item label="请求Id Key" name="RequestIdKey">
              <Input allowClear />
            </Item>
            <Item label="服务名" name="ServiceName">
              <Input allowClear />
            </Item>
            <Item label="服务空间" name="ServiceNamespace">
              <Input allowClear />
            </Item>
            <Item label="委托配置" name="DelegatingHandlers">
              <Input allowClear />
            </Item>
            <Item label="路由大小写敏感" name="ReRouteIsCaseSensitive">
              <Radio.Group>
                <Radio value={0}>否</Radio>
                <Radio value={1}>是</Radio>
              </Radio.Group>
            </Item>
            <Item label="下游请求方式" name="DownstreamHttpMethod">
              <Checkbox.Group options={plainOptions} />
            </Item>
          </>
        ) : (
          ''
        )} */}
      </Form>
    </Modal>
  );
};
export default AddModal;
