<!DOCTYPE HTML>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body th:style="${'background-color:' + backgroundColor }">
<div style="margin: 30px auto 0 30px;">
    <div id="SentinelSection">
        <label>Sentinel 限流降级场景：</label>
        <br>
        <label>被点赞的商品ID</label>
        <input id="itemId" style="width: 200px;height: 20px;" value="1">
        <br>
        <button class="btnStart">开始调用</button>
    </div>
    <div id="sentinelResultSection" style="margin-top: 30px; border-top: 1px solid #eaeaea;">
    </div>
</div>
<script charset="utf-8">
    $('.btnStart').click(() => {
        $('#sentinelResultSection').empty();
        var itemId = $('#itemId').val();
        $.ajax({
            url: "http://gateway-service:30010/praise/query",
            type: "get",
            dataType: "json",
            data: "itemId=" + itemId,
            async: false,
            success: function (res) {
                $('#sentinelResultSection').append(`<p> [${getDateTime()}] 点赞前的点赞数： ${res} </p>`);
            }
        });
        for (let i = 0; i < 10; i++) {
            $.ajax({
                url: "http://gateway-service:30010/praise/sentinel",
                type: "get",
                dataType: "json",
                data: "itemId=" + itemId,
                success: function (res) {
                    console.log(res)
                    $('#sentinelResultSection').append(`<p> [${getDateTime()}] ${getDateTime()}: ${res}</p>`);
                },
                error: function (res) {
                    console.log(res)
                    $('#sentinelResultSection').append(`<p> [${getDateTime()}]: 请求失败，接口被限流 </p>`);
                }
            });
        }
        timeoutid = setTimeout(queryRes, 1000);
        function queryRes() {
            $.ajax({
                url: "http://gateway-service:30010/praise/query",
                type: "get",
                dataType: "json",
                data: "itemId=" + $('#itemId').val(),
                success: function (res) {
                    $('#sentinelResultSection').append(`<p> [${getDateTime()}] 点赞后的点赞数： ${res} </p>`);
                }
            })
        }

    });


    const getDateTime = () => {
        const myDate = new Date;
        const year = myDate.getFullYear(); //获取当前年
        const month = myDate.getMonth() + 1; //获取当前月
        const date = myDate.getDate(); //获取当前日
        const hours = myDate.getHours();
        const minutes = myDate.getMinutes();
        const seconds = myDate.getSeconds();
        return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
    };
</script>
</body>
</html>