<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增用户会员卡')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-card-add">
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">用户：</label>
                <div class="col-sm-8">
                    <select name="userId" class="form-control" id="userSelect" required></select>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">卡种：</label>
                <div class="col-sm-8">
                    <select name="cardId" class="form-control" id="cardSelect" required></select>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">总次数：</label>
                <div class="col-sm-8">
                    <input name="totalNumber" class="form-control" type="text" disabled>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">剩余次数：</label>
                <div class="col-sm-8">
                    <input name="remainingNumber" class="form-control" type="number" min="0" step="1" maxlength="8" required>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var prefix = ctx + "card"
    $("#form-card-add").validate({
        focusCleanup: true
    });

    //用户列表
    const userSelect = document.getElementById('userSelect');
    const userrequestData = {
        status: "0",
        delFlag: "0"
    };
    $.ajax({
        url: "/system/member/list",
        type: "POST",
        dataType: "json",
        data: userrequestData,
        success: function (data) {
            // 在这里处理成功获取到的数据
            data.rows.forEach(cardType => {
                const option = document.createElement('option');
                option.value = cardType.id;
                option.text = cardType.realName;
                userSelect.appendChild(option);
            });
        },
        error: function (xhr, status, error) {
            // 在这里处理请求出错的情况
            console.log("Error: " + error);
        }
    });

    //卡种列表
    const cardSelect = document.getElementById('cardSelect');
    const totalNumberInput = document.getElementsByName("totalNumber")[0];
    const requestData = {
        state: "0"
    };
    $.ajax({
        url: "/information/list",
        type: "POST",
        dataType: "json",
        data: requestData,
        success: function (data) {
            totalNumberInput.value = data.rows[0].totalNumber
            // 在这里处理成功获取到的数据
            data.rows.forEach(cardType => {
                const option = document.createElement('option');
                option.value = cardType.id;
                option.text = cardType.name;
                cardSelect.appendChild(option);
            })
            cardSelect.addEventListener('change', function () {
                const selectedOption = cardSelect.options[cardSelect.selectedIndex];
                const selectedCardType = data.rows.find(card => card.id === parseInt(selectedOption.value));
                if (selectedCardType && totalNumberInput) {
                    totalNumberInput.value = selectedCardType.totalNumber;
                }
            });
        },
        error: function (xhr, status, error) {
            // 在这里处理请求出错的情况
            console.log("Error: " + error);
        }
    });

    function submitHandler() {
        if ($.validate.form()) {
            const totalNumber = parseInt(totalNumberInput.value)
            const remainingNumber = parseInt(document.getElementsByName("remainingNumber")[0].value);
            if (remainingNumber>totalNumber){
                alert("剩余次数不能大于总次数")
            }else {
                const request =  $('#form-card-add').serialize() + '&totalNumber=' + totalNumber
                $.operate.save(prefix + "/add", request);
            }
        }
    }
</script>
</body>
</html>
