flow

import {FC, useState, useEffect} from "react";
import {flushSync} from "react-dom";
import {SearchOutlined, ReloadOutlined, PlusOutlined} from "@ant-design/icons";
import {
    Card,
    Button,
    Form,
    Input,
    Select,
    Table,
    Tag,
    Popconfirm,
    Col,
    Row,
    Space,
    message, Checkbox
} from "antd";
import type {ColumnsType} from "antd/es/table";
import styles from "../demote/FlowControl.less";
import EditModal from "../demote/FlowControlEditModal";
import CustPagination from "../../components/custPagination";
import {post, get} from "../../utils/axios";
import {listToOptions, isEmptyObj} from '../../utils/commonUtil'
import cookie from 'react-cookies'


const controlBehaviorMap = new Map([[0, '快速失败'], [1, 'WARM UP'], [2, '排队等待']])
const strategyMap = new Map([[0, '直接限流'], [1, '关联限流'], [2, '链路限流']])
const gradeMap = new Map([[0, '线程数'], [1, 'QPS']])
const clusterConfigTypeMap = new Map([[0, '集群单机均摊'], [1, '集群总体阈值']])
const FlowControl: FC = () => {
    const [form] = Form.useForm();
    const data: API.FlowControl[] = [];
    const [queryInfo] = useState<API.SearchType>({note: "", gender: "", appName: "", userId: ""});
    const [dataList, setDataList] = useState<API.FlowControl[]>(data);
    const [allDataList, setAllDataList] = useState<API.FlowControl[]>(data);
    const [total, setTotal] = useState<number>(10);
    const [pageNum, setPageNum] = useState<number>(1);
    const [pageSize, setPageSize] = useState<number>(10);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isEdit, setIsEdit] = useState(false);
    const [detailInfo, setDetailInfo] = useState<API.FlowControl>(null);
    const [appList, setAppList] = useState<any>([]);
    const [auditFlag, setAuditFlag] = useState<boolean>(false);
    // 模拟查询功能
    const loadData = () => {
        // 不选应用不查询
        // if (isEmptyObj(form.getFieldValue('app'))) {
        //   message.info("请选择应用后再查询!!")
        //   return
        // }
        let queryParam = form.getFieldsValue()
        // queryParam.currentPage = pageNum
        // queryParam.pageSize = pageSize
        get("/sentinel/v2/flow/rules", queryParam).then(async (result: any) => {
            setTotal(result.data.data.length)
            setDataList([])
            setAllDataList([])
            setAllDataList(result.data.data)
            setDataList(result.data.data.slice((pageNum - 1) * pageSize, pageNum * pageSize > total ? total : pageNum * pageSize))
        })
    };
    const getAppNames = () => {
        get("/sentinel/app/briefinfos.json").then(async (result: any) => {
            setAppList(listToOptions(result.data.data, "app"))
            await loadData()
        })
    }
    const appNameChange = (val) => {
        alert(val)
        cookie.save('selectAppName', val)
    }


    useEffect(() => {
        if (!isEmptyObj(cookie.load('selectAppName'))) {
            console.log(cookie.load('seelectAppName'))
            form.setFieldsValue({app: cookie.load('selectAppName')})
        } else {
            if (appList.length > 0) {
                form.setFieldsValue({app: appList[0].value})
            }
        }
    }, [appList]);

    useEffect(() => {
        getAppNames()
        setAuditFlag(true)
    }, [])

    useEffect(() => {
        debugger
        setDataList(allDataList.slice((pageNum - 1) * pageSize, pageNum * pageSize > total ? total : pageNum * pageSize))
    }, [pageNum, pageSize]);

    useEffect(() => {
        cookie.save('selectAppName', form.getFieldValue('app'))
    }, [form])

    // 数据查询（查询按钮）
    const searchData = () => {
        loadData();
    };

    // 查询条件清空（重置按钮）
    const onReset = () => {
        form.resetFields();
    };

    // 删除确认
    // const delConfirm = (record: API.DataType) => {
    const delConfirm = (record) => {
        console.log("record:", record);
        post('/api/application_user/delete', record).then((result => {
                message.success("删除成功")
                loadData()
            })
        )
    };

    // 打开编辑弹框
    const showEditModal = (record: API.FlowControl) => {
        setIsEdit(true)
        setDetailInfo(record);
        console.log(record)
        setIsModalOpen(true);
    };
    // 打开编辑弹框
    const addInfo = () => {
        setIsEdit(false)
        setDetailInfo(null);
        setIsModalOpen(true);
    };
    // 修改table数据(模拟弹框关闭之后修改数据操作)
    const changeData = () => {
        // setTotal(1);
        loadData()
    };

    // 关闭弹框
    const closeModal = (type?: string) => {
        if (type === "succ") {
            // console.log("操作成功需重新加载数据:", type);
            changeData();
        }
        setIsModalOpen(false);
        setIsEdit(false)
    };

    const columns: ColumnsType<API.FlowControl> = [
        {
            title: ' 序号 ',
            width: 80,
            //每一页都从1开始
            // render: (text, record, index) => `${index + 1}`,
            //当前页数减1乘以每一页页数再加当前页序号+1
            render: (text, record, index) =>
                `${(pageNum - 1) * (pageSize) + (index + 1)}`

        },
        {
            title: "资源名",
            dataIndex: "resource",
            key: "resource",
        },
        {
            title: "来源应用",
            dataIndex: "limitApp",
            key: "limitApp",
        },
        {
            title: "流控模式",
            dataIndex: "strategy",
            key: "strategy",
            render: (_, record) => {
                return (
                    <>
                        {strategyMap.get(record.strategy)}
                    </>
                )
            }
        },
        {
            title: "阈值类型",
            dataIndex: "grade",
            key: "grade",
            render: (_, record) => {
                return (
                    <>
                        {gradeMap.get(record.grade)}
                    </>
                )
            }
        },
        {
            title: "阈值",
            dataIndex: "count",
            key: "count",
        },
        {
            title: "是否集群",
            dataIndex: "clusterMode",
            key: "clusterMode",
            render: (_, record) => {
                return (
                    <>
                        {
                            record.clusterMode ? (clusterConfigTypeMap.get(record.clusterConfig.thresholdType)) : '单机'
                        }
                    </>
                )
            }
        },
        {
            title: "流控效果",
            dataIndex: "controlBehavior",
            key: "controlBehavior",
            render: (_, record) => {
                let result = controlBehaviorMap.get(record.controlBehavior)
                return (<>{result}</>)
            }
        },
        {
            title: "操作",
            key: "action",
            render: (_, record) => (
                <>
                    <Popconfirm
                        title="确定删除该条数据？"
                        onConfirm={() => delConfirm(record)}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button type="link" danger>
                            删除
                        </Button>
                    </Popconfirm>
                    <Button type="link" onClick={() => showEditModal(record)}>
                        修改
                    </Button>
                </>
            ),
        },
    ];

    return (
        <div className="pageContent">
            {styles.pageContent}
            <Card style={{marginBottom: 12}}>
                <Form
                    labelCol={{span: 5}}
                    wrapperCol={{span: 19}}
                    form={form}
                    onFinish={searchData}
                    initialValues={queryInfo}
                >
                    <Row>
                        <Col sm={24} lg={6}>
                            <Form.Item name="app" label="应用名">
                                <Select allowClear options={appList} onChange={appNameChange}/>
                            </Form.Item>
                        </Col>
                        <Col sm={24} lg={6}>
                            <Form.Item name="keys" label="关键字">
                                <Input onChange={searchData}/>
                            </Form.Item>
                        </Col>
                        <Col sm={24} lg={6}>
                            <Checkbox style={{visibility:auditFlag?"visible":"hidden"}}>审核
                            </Checkbox>
                        </Col>
                        <Col sm={24} lg={6}>
                            <Form.Item wrapperCol={{offset: 8, span: 16}}>
                                <div className="search-btn">
                                    <Space>
                                        <Button
                                            type="primary"
                                            htmlType="submit"
                                            icon={<SearchOutlined/>}
                                        >
                                            查询
                                        </Button>
                                        <Button
                                            htmlType="button"
                                            onClick={addInfo}
                                            icon={<PlusOutlined/>}
                                        >
                                            新增
                                        </Button>
                                    </Space>
                                </div>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Card>
            <Card>
                <Table columns={columns}
                       dataSource={dataList}
                       pagination={false}
                       style={{minHeight: 500}}
                       scroll={{y: 500}}
                       rowKey={record => record.id}/>
                <hr/>
                <CustPagination
                    total={total}
                    pageNum={pageNum}
                    pageSize={pageSize}
                    setPageNum={setPageNum}
                    setPageSize={setPageSize}
                ></CustPagination>
            </Card>

            <EditModal
                isModalOpen={isModalOpen}
                detailInfo={detailInfo}
                closeModal={closeModal}
                isEdit={isEdit}
            ></EditModal>
        </div>
    );
};

export default FlowControl;