<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>界园投币概率计算器</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        label {
            display: block;
            margin-top: 10px;
        }
        input {
            margin-bottom: 10px;
            width: 80px;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
        }
        .title {
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>钱币概率计算器</h1>
<form id="coin-form">
    <div class="title">钱盒中已有的钱币数量</div>
    <div style="display: flex; gap: 10px;">
        <div>
            <label for="box_hua">花钱:</label>
            <input type="number" id="box_hua" name="box_hua" required>
        </div>
        <div>
            <label for="box_heng">衡钱:</label>
            <input type="number" id="box_heng" name="box_heng" required>
        </div>
        <div>
            <label for="box_li">厉钱:</label>
            <input type="number" id="box_li" name="box_li" required>
        </div>
    </div>

    <label for="pick">掷出钱币的数量:</label>
    <input type="number" id="pick" name="pick" value="3">
    <br>

    <div class="title">判定条件（没有可以不填）</div>
    <label for="req_hua_min">花钱：</label>
    <input type="number" id="req_hua_min" name="req_hua_min">
    <span>~</span>
    <input type="number" id="req_hua_max" name="req_hua_max">

    <label for="req_heng_min">衡钱:</label>
    <input type="number" id="req_heng_min" name="req_heng_min">
    <span>~</span>
    <input type="number" id="req_heng_max" name="req_heng_max">

    <label for="req_li_min">厉钱:</label>
    <input type="number" id="req_li_min" name="req_li_min">
    <span>~</span>
    <input type="number" id="req_li_max" name="req_li_max">

    <br>

    <button type="submit">计算概率</button>
</form>

<div id="result"></div>

<script>
    $(document).ready(function() {
        $('#coin-form').on('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            var box_hua = $('#box_hua').val();
            var box_heng = $('#box_heng').val();
            var box_li = $('#box_li').val();

            var req_hua_min = $('#req_hua_min').val() || 0;
            var req_hua_max = $('#req_hua_max').val() || 99;
            var req_heng_min = $('#req_heng_min').val() || 0;
            var req_heng_max = $('#req_heng_max').val() || 99;
            var req_li_min = $('#req_li_min').val() || 0;
            var req_li_max = $('#req_li_max').val() || 99;

            var pick = $('#pick').val();

            var box = [box_hua, box_heng, box_li];
            var requirement = [[req_hua_min, req_hua_max], [req_heng_min, req_heng_max], [req_li_min, req_li_max]];

            $.ajax({
                url: '/',
                type: 'POST',
                data: {
                    box: box.join(','),
                    requirement: requirement.map(req => req.join(',')).join(';'),
                    pick: pick
                },
                success: function(response) {
                    var probability = (response.probability * 100).toFixed(2); // 将概率转换为百分数并保留两位小数
                    $('#result').text('概率: ' + probability + '%');
                },
                error: function(error) {
                    $('#result').text('计算失败，请检查输入。');
                }
            });
        });
    });
</script>
</body>
</html>