{% extends 'obj_form.html' %}
{% load i18n %}


{% block subtitle %}
<ol class="breadcrumb">
    <li>{% trans '宴会管理' %}</li>
    <li>{% trans '奖池布奖' %}</li>
</ol>
{% endblock %}

{% block form_content %}
<style>
    input[type=checkbox] {
        display: inline-block;
        width: auto;
        height: auto;
        margin-top: 10px;
    }
</style>
<div class="form-group">
    <label class="col-sm-2 control-label">可布奖数量</label>
    <div class="col-sm-10">
        <input type="text" id="input_num" disabled>
    </div>
</div>
<div class="form-group">
    <label class="col-sm-2 control-label">选择活动</label>
    <div class="col-sm-10">
        <select name="rule_category" id="select_activites" class="form-control" onchange="chooseActivities(this);">
            <option value="">请选择</option>
            {% for a in activites %}
            <option value="{{a.id}}">{{a.name}}</option>
            {% endfor %}
        </select>
    </div>
</div>
<div class="form-group" id="activty_awards_choose" style="display: none;">
    <label class="col-sm-2 control-label">奖品选择</label>
    <div class="col-sm-10" id="activty_awards">

    </div>
</div>
<div class="form-group ">
    <label class="col-sm-2 control-label">备注</label>
    <div class="col-sm-10">
        <input type="text" id="input_remark" maxlength="50"/>
    </div>
</div>
<input type="hidden" id="t_caps" value="{{caps}}" />
<div class="alert alert-success" role="alert" style="display: none">布奖成功！</div>
<div>
    <button class="btn btn-primary" id="btn_permit" style="float:right;">保存</button>
</div>

<script>

    $(document).ready(function () {
        var isLoading = false
        $('#btn_permit').click(function (event) {
            event.preventDefault();
            if(isLoading) return
            var activity_id = $("#select_activites option:selected").val();
            var remark = $("#input_remark").val();
            var awards = [];
            var caps = $("#t_caps").val().split(',')
            var cap_idx = 0
            $('input[name="check_award"]:checked').each(function () {
                var award_id = $(this).val();
                var idx = $(this).data("idx");
                var num = $("#input-award-" + award_id + "-" + idx).val().trim();
                if (num === "") {
                    num = "0"
                }
                var item = {
                    award_id: parseInt(award_id),
                    caps: [],
                }
                for (let i = 0; i < parseInt(num); i++) {
                    item.caps.push(caps[cap_idx])
                    cap_idx += 1
                }

                awards.push(item)
            });

            var requestNum = 0;
            if(!awards.length){
                return
            }
            isLoading = true
            $(this).attr('disabled','disabled')
            $('#ajax_loading2').show();
            $('#ajax_loading2').css({'z-index': 10000})
            for (var aw of awards) {
                $.ajax({
                    url: '/sales/activity/lottery_single/',
                    method: 'post',
                    data:{
                        label_codes: aw.caps.join(','),
                        activity: activity_id,
                        award: aw.award_id,
                        remark
                    },
                    success: function(res){
                        requestNum += 1
                        if(requestNum == awards.length){
                            // 成功
                            $('#ajax_loading2').hide();
                            $(".alert-success").show();
                            $("#btn_permit").hide();
                        }
                    },
                    error: function(){
                        alert('出现了错误，请联系管理员')
                    }
                })                
            }
        });
        $("#input_num").val($("#t_caps").val().split(',').length)
    })

    function renderAwardRowHtml(a, idx) {
        return ` 
			<p>
				<label>
					<input type="checkbox" name='check_award' value='${a.id}' data-idx="${idx}"> ${a.name}
				</label>
				<input type="number" placeholder="奖品数量" class="input-num" id="input-award-${a.id}-${idx}">
			</p> `
    }

    function chooseActivities(ele) {
        let activity_id = $(ele).val();
        if (activity_id !== '') {
            $(ele).attr('disabled', 'disabled')
            $.ajax({
                url: '/sales/activity/awards/',
                data: {
                    activity_id
                },
                success: function (res) {
                    $(ele).removeAttr('disabled')

                    console.log(res);
                    if (res.e === '') {
                        var awards = res.awards;
                        // awards.push({id:0, name: '谢谢惠顾'})
                        var html = ''
                        for (let i = 0; i < awards.length; i++) {
                            let a = awards[i];
                            html += renderAwardRowHtml(a, 0)
                        }
                        $("#activty_awards").html(html);
                        $("#activty_awards_choose").show();
                        $(".methodRadio").removeAttr('disabled')
                    }
                }
            })
        }
        else {
            $("#activty_awards_choose").hide();
            $("#activty_awards").empty();
        }
    }


</script>
{% endblock %}