flow

import {FC, useEffect, useState} from "react";
import {Modal, Form, Input, message, Col, Row, Radio, Select, SelectProps, Checkbox} from "antd";
import {post} from "@/utils/axios";
import {KeyValToOptions} from "@/utils/commonUtil";

interface PropsType {
  isModalOpen: boolean;
  detailInfo: API.FlowControl;
  closeModal: Function;
  isEdit: boolean;
}

const options: SelectProps['options'] = [{value: 1, label: 1}, {value: 2, label: 2}, {value: 3, label: 3}]

const gradeOptions = KeyValToOptions([0, 1], ['线程数', 'QPS'])
const strategyOptions = KeyValToOptions([0, 1, 2], ['直接限流', '关联限流', '链路限流'])
const thresholdTypeOptions = KeyValToOptions([0, 1], ['集群单机均摊', '集群总体阈值'])
const behaviorOptions = KeyValToOptions([0, 1, 2], ['快速失败', 'Warm Up', '排队等待'])

const FlowControlEditModal: FC<PropsType> = (props) => {
  const {isModalOpen, detailInfo, closeModal, isEdit} = props;
  const [form] = Form.useForm();
  // form.setFieldsValue(detailInfo)
  const [clusterSetting, setClusterSetting] = useState<boolean>(false);
  const [strategySetting, setStrategySetting] = useState<boolean>(false);
  const [strategyLabel, setStrategyLabel] = useState<string>('关联资源');
  const [behaviorSetting, setBehaviorSetting] = useState<number>(0);
  useEffect(()=>{
    form.setFieldsValue(detailInfo)
    setClusterSetting(form.getFieldValue('clusterMode'))


    setStrategySetting(form.getFieldValue('strategy')== 0);
    setStrategyLabel(form.getFieldValue('strategy')== 1 ? '关联资源' : '入口资源')
    setBehaviorSetting(form.getFieldValue('controlBehavior'));
    console.log("strategy")
    console.log(form.getFieldValue('strategy')== 0)
    console.log("controlBehavior")
    console.log(form.getFieldValue('controlBehavior'))
  },[detailInfo])



  const handleOk = () => {
    // closeModal(false, 'succ')
    form
      .validateFields()
      .then(() => {
        if (isEdit) {
          update()
        }
      })
      .catch(() => {
        closeModal();
        message.success("修改失败")
      });
  };

  const update = () => {
    post('/api/application_user/update', form.getFieldsValue()).then((result => {
        closeModal("succ")
        message.success("修改成功")
      })
    )
  }

  const onClusterMode = (e: { target: { checked: boolean } }) => {
    setClusterSetting(form.getFieldValue('clusterMode'));

    setStrategySetting(form.getFieldValue('strategy')== 0);
    setStrategyLabel(form.getFieldValue('strategy')== 1 ? '关联资源' : '入口资源')
    setBehaviorSetting(form.getFieldValue('controlBehavior'));

  }
  const onChangeStrategy = (e: any) => {
    console.log(e.target.value,form.getFieldValue('clusterMode'))
    setStrategySetting(e.target.value == 0);
    setStrategyLabel(e.target.value == 1 ? '关联资源' : '入口资源')
  }
  const onChangeBehavior = (e: any) => {
    console.log(e.target.value,form.getFieldValue('clusterMode'))
    setBehaviorSetting(e.target.value);
  }

  const handleCancel = () => {
    form.setFieldsValue(null)
    closeModal();
  };
  return (
    <Modal
      className="testModal"
      width={880}
      title="编辑信息"
      open={isModalOpen}
      okText="更新"
      onOk={handleOk}
      onCancel={handleCancel}
      getContainer={false}
      destroyOnClose
    >
      <Form
        form={form}
        name="userForm"
        labelCol={{span: 6}}
        wrapperCol={{span: 16}}
        // initialValues={detailInfo}
      >
        <Form.Item name="resource" label="资源名" rules={[{required: true}]}>
          <Input disabled={isEdit}/>
        </Form.Item>
        <Form.Item name="limitApp" label="针对来源" rules={[{required: false}]}>
          <Input/>
        </Form.Item>
        <Row>
          <Col span={3}/>
          <Col span={9}>
            <Form.Item name="grade" label="阈值类型" rules={[{required: true}]}>
              <Radio.Group options={gradeOptions}/>
            </Form.Item>
          </Col>
          <Col span={11}>
            <Form.Item name="count" label="单机阈值" rules={[{required: true}]}>
              <Input/>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={3}/>
          <Col span={9}>
            <Form.Item name="clusterMode" label="是否集群" rules={[{required: true}]}
                       // getValueFromEvent={e => e.target.checked ? true : false}
                       valuePropName="checked"
            >
              <Checkbox onChange={onClusterMode}>是</Checkbox>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item hidden={!clusterSetting} name="clusterConfig.thresholdType" label="集群阈值模式" rules={[{required: true}]}>
              <Radio.Group options={thresholdTypeOptions}/>
            </Form.Item>
          </Col>
        </Row>

        <Form.Item hidden={!clusterSetting} name="fallbackToLocalWhenFail" label="失败退化" rules={[{required: true}]}
                   getValueFromEvent={e => e.target.checked ? true : false}
                   valuePropName="checked"
        >
          <Checkbox> !如果 Token Server 不可用是否退化到单机限流</Checkbox>
        </Form.Item>
        <Form.Item hidden={clusterSetting} name="strategy" label="流控模式" rules={[{required: true}]}>
          <Radio.Group onChange={onChangeStrategy} options={strategyOptions}/>
        </Form.Item>
        <Form.Item hidden={clusterSetting || strategySetting}  name="refResource" label={strategyLabel} rules={[{required: true}]}>
          <Input/>
        </Form.Item>
        <Form.Item hidden={clusterSetting}  name="controlBehavior" label="流控效果" rules={[{required: true}]}>
          <Radio.Group options={behaviorOptions} onChange={onChangeBehavior}/>
        </Form.Item>
        <Form.Item hidden={clusterSetting || !(behaviorSetting===1)}  name="warmUpPeriodSec" label="预热时长(秒)" rules={[{required: true}]}>
          <Input/>
        </Form.Item>
        <Form.Item hidden={clusterSetting || !(behaviorSetting===2)} name="maxQueueingTimeMs" label="超时时间(ms)" rules={[{required: true}]}>
          <Input/>
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default FlowControlEditModal;