<!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-reason-add">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">退款理由名称：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="name" id="name"
                       maxlength="100" placeholder="展示给用户的文案" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">是否需补充说明：</label>
            <div class="col-sm-8">
                <div class="radio check-box">
                    <label>
                        <input type="radio" value="0" name="needDetail" checked> 否（仅选择）
                    </label>
                </div>
                <div class="radio check-box">
                    <label>
                        <input type="radio" value="1" name="needDetail"> 是（选择后需输入）
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group" id="placeholderGroup" style="display:none;">
            <label class="col-sm-3 control-label is-required">二级输入 placeholder：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="placeholder" id="placeholder"
                       maxlength="200" placeholder="请输入补充说明的提示文案">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">排序：</label>
            <div class="col-sm-8">
                <input class="form-control" type="number" name="sort" id="sort" value="0">
                <span class="help-block m-b-none">
                    <i class="fa fa-info-circle"></i>
                    数值越大越靠前，相同则后添加的靠前
                </span>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script type="text/javascript">
    var prefix = ctx + "kylin/refundReasons";

    function togglePlaceholderGroup() {
        if ($('input[name="needDetail"]:checked').val() == '1') {
            $('#placeholderGroup').show();
        } else {
            $('#placeholderGroup').hide();
            $('#placeholder').val('');
        }
    }

    function submitHandler() {
        var name = $('#name').val().trim();
        if (!name) {
            $.modal.alertWarning("请填写退款理由名称");
            return false;
        }
        var needDetail = $('input[name="needDetail"]:checked').val();
        if (needDetail == '1' && !$('#placeholder').val().trim()) {
            $.modal.alertWarning("请填写二级输入 placeholder");
            return false;
        }
        if ($.validate.form()) {
            var data = $('#form-reason-add').serializeArray();
            $.operate.save(prefix + "/create", data);
        }
    }

    $(function () {
        // 本页 radio 走 iCheck，必须用 ifChecked，否则选「是」不会展示 placeholder
        $('input[name="needDetail"]').on('ifChecked change', togglePlaceholderGroup);
        togglePlaceholderGroup();
    });
</script>
</body>
</html>
