<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>南京康贝诺食品有限公司</title>
    <script src="/static/js/public/reset.js"></script>
    <link href="/static/css/public/reset.css" rel="stylesheet" />
    <link href="/static/css/public/public.css" rel="stylesheet" />
    <link href="/static/css/public/Activity.css" rel="stylesheet" />
    <link href="/static/32633/css/main.css" rel="stylesheet" />
</head>

<body>

    <div class="container">


        {% ifequal award.code 200 %}
        <div id="award">
            <h5 class="title">恭喜您</h5>
            <div class="roll">
                <p class="roll-content" id="award_name"></p>
            </div>

            <div class="btn" id="btnGet">立即领取</div>
        </div>
        {% endifequal %}


        {% ifnotequal award.code 200%}

        <div id="ylq">
            <div class="divide"></div>
            <div class="box">
                <p class="tip" id="ylq_tip">{{award.reason}}</p>
            </div>
            <div class="btn" onclick="showUserRecord();">查看我的奖品</div>
        </div>


        {% endifnotequal %}

        <div id="finish" style="display: none;">
            <div class="divide"></div>
            <div class="box">
                <p class="tip">领取成功！</p>
                <p class="tip">请保存好中奖瓶盖到门店兑奖！</p>
            </div>
            <div class="btn" onclick="showUserRecord();">查看我的奖品</div>
        </div>

        <div id="input" style="display: none;">
            <div class="divide"></div>
            <div class="box">
                <p class="subtitle">————&nbsp; 填 写 信 息 &nbsp;————</p>

                <div class="input-row">
                    <div class="label">您的姓名：</div>
                    <input class="input" id="input_name" type="text" placeholder="请输入您的姓名" maxlength="6">
                </div>
                <div class="input-row">
                    <div class="label">联系电话：</div>
                    <input class="input" id="input_phone" type="text" placeholder="请输入11位手机号">
                </div>

                <div class="btn" id="btnSubmit" data-winnerid="{{award.winner_id}}">立即提交</div>
            </div>
        </div>


        <div id="record" style="display: none;">
            <h5 class="title">————&nbsp; 我的奖品 &nbsp;————</h5>
            <div class="box record-box" id="recordBox">
                <!-- <div class="record-row">
                    <div>1、</div>
                    <div class="content">盒马礼品卡</div>
                    <div class="record-btn btn-disabled">已兑奖</div>
                </div> -->
            </div>
        </div>

        <img class="bottle" src="/static/32633/img/bottle.png" alt="瓶子">
        <input type="hidden" id="Taward" value="{{award.data}}" />
    </div>

    <div id="popup_qrcode" style="display: none;">
        <div class="popup-qrcode">
            <p class="title">请凭以下兑换码到附近门店<br />进行核销领取奖品！</p>
            <div id="qrcode"></div>
        </div>
    </div>

    <script src="/static/js/jquery-2.1.0.min.js"></script>
    <script src="/static/js/public/public.js"></script>
    <script src="/static/js/public/Activity.js"></script>
    <script src="/static/js/public/qrcode.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script>
        (function () {
            var award = JSON.parse($("#Taward").val());
            console.log(award);


            {% ifequal award.code 200 %}
            $("#award_name").text(award.name);

            $("#btnGet").click(function () {
                var winner_id = '{{award.winner_id}}';
                if (award.awardcat_id === 1) {
                    $("#award").hide();
                    $("#input").fadeIn();
                }
                else {
                    _GetAward(winner_id, "", "");
                }
            });



            {% endifequal %}

            _GetUserRecords();


        })();


        $("#btnSubmit").click(function () {
            var name = $("#input_name").val().trim();
            var phone = $("#input_phone").val().trim();
            var winner_id = $(this).data('winnerid');
            if (name.length > 1) {
                if (phone.length === 11) {
                    _GetAward(winner_id, name, phone)
                }
                else {
                    alert('请输入正确的手机号码！');
                }
            }
            else {
                alert('请输入正确的姓名！');
            }

        });

        function GetAwardSuccess() {
            $("#input").hide();
            $("#finish").fadeIn();
        }

        // 领取奖品
        function _GetAward(winner_id, name, phone) {
            tj_public.showLoading();
            $.ajax({
                type: 'GET',
                data: {
                    winner_id,
                    name,
                    phone
                },
                url: '/sales/ajax/winner/redeem/',
                success: function (res) {
                    tj_public.hideLoading();
                    if (res.e === '') {
                        //alert('领取成功！');
                        GetAwardSuccess();
                        _GetUserRecords();
                    }
                    else {
                        alert(res.e);
                    }

                },
                error: function () {
                    tj_public.hideLoading();
                    alert('连接服务器失败');
                }
            });
        }

        // 获取用户的中奖记录
        function _GetUserRecords() {
            $.ajax({
                type: 'GET',
                data: {
                    consumer_id: '{{consumer_id}}',
                    company_id: 32633
                },
                url: '/wx/consumer/winner/record/',
                success: function (res) {
                    console.log(res);
                    if (res.e === '') {
                        var records = res.records;
                        var html = '';
                        for (let i = 0; i < records.length; i++) {
                            var btnName = '';
                            var className = '';
                            var r = records[i];
                            if (r.tm_redeemed) {
                                if (r.is_need_hexiao) {
                                    if (r.is_hexiao) {
                                        btnName = '已领取';
                                        className = 'btn-disabled';
                                    }
                                    else {
                                        btnName = '核销'
                                        className = 'btn-hexiao'
                                    }
                                }
                                else {
                                    btnName = '已领取';
                                    className = 'btn-disabled';
                                }
                            }
                            else {
                                btnName = '领取';
                                className = 'btn-get'
                            }

                            html += `
                                <div class="record-row">
                                    <div>${i + 1}、</div>
                                    <div class="content">${r.award_name}</div>
                                    <div class="record-btn ${className}" data-winnerid="${r.id}" data-cat="${r.award_cat}">${btnName}</div>
                                </div>
                                `;

                        }

                        $("#recordBox").html(html);
                        $(".btn-get").click(function () {
                            var winner_id = $(this).data('winnerid');
                            var cat = $(this).data('cat');
                            if (cat === '实物') {
                                $("#btnSubmit").data("winnerid", winner_id);
                                $("#record").hide();
                                $("#input").fadeIn();
                            }
                            else {
                                _GetAward(winner_id, "", "");
                            }
                        })
                        $(".btn-hexiao").click(function () {
                            var winner_id = $(this).data('winnerid');
                            //先置空DIV
                            $("#qrcode").html('');
                            new QRCode(document.getElementById("qrcode"), winner_id, function () {

                            });
                            $("#popup_qrcode").fadeIn();
                            _GetHeXiaoStatus(winner_id, $(this));
                        })
                    }
                    else {
                        alert(res.e);
                    }

                },
                error: function () {
                    alert('连接服务器失败');
                }
            });
        }


        function showUserRecord() {
            $("#ylq").hide();
            $("#finish").hide();
            $("#record").fadeIn();
        }

        $("#popup_qrcode").click(function () {
            $(this).fadeOut();
        });



        function _GetHeXiaoStatus(winner_id, ele) {
            $.ajax({
                url: '/wx/consumer/winner/hexiao/',
                data: {
                    winner_id,
                    company_id: 32633
                },
                success: function (res) {
                    if (res.e === '') {
                        var is_hexiao = res.is_hexiao;
                        if (is_hexiao) {
                            ele.addClass('btn-disabled');
							ele.unbind();
                            ele.text('已领取')
                            alert("核销成功！");
							$("#popup_qrcode").fadeOut();
                        }
                        else {


                            setTimeout(() => {
                                if ($("#popup_qrcode").css('display') !== 'none') {
                                    _GetHeXiaoStatus(winner_id, ele);
                                }
                            }, 3000);
                        }
                    }
                    else {
                        setTimeout(() => {
                            if ($("#popup_qrcode").css('display') !== 'none') {
                                _GetHeXiaoStatus(winner_id, ele);
                            }
                        }, 3000);

                    }
                },
                error: function () {

                }
            })
        }
    </script>
</body>

</html>