{% load tj_filters %}

{% block form_content %}

<div style="padding:0 20px">
    <ol class="breadcrumb">
        <li>康年皇冠功能</li>
        <li class="active">在线核销</li>
    </ol>

    <div style="padding:8px 15px">

        <div class="form-group">
            <label class="control-label">标签序号</label>
            <input type="text" class="form-control" placeholder="标签序号" id="input_code" onchange="inputCodeChange(this)">
        </div>
        <div class="form-group ">
            <input type="button" value="核销" class="btn btn-primary" onclick="btnWriteClick();">
        </div>


        <div class="row">

            <div class="col-xs-8 col-md-8">
                <table class="table table-bordered table-condensed table-hover" style="margin-top: 20px;">
                    <tbody id="tableCode">
                        <tr class="b">
                            <td></td>
                            <td>序号</td>
                            <td>产品</td>
                            <td>时间</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-xs-4">

                <table class="table table-bordered table-condensed table-hover" style="margin-top: 20px;">
                    <tbody id="tableNum">
                        <tr class="b">
                            <td>产品</td>
                            <td>数量</td>
                        </tr>
                    </tbody>
                </table>



                <table class="table table-bordered table-condensed table-hover" style="margin-top: 20px;">
                    <thead>库存</thead>
                    <tbody id="tableStock">
                        <tr class="b">
                            <td>产品</td>
                            <td>数量</td>
                        </tr>
                    </tbody>
                </table>

            </div>

        </div>

        <div>

            <input type="button" value="完成" class="btn btn-primary" onclick="finish();">

        </div>


    </div>


    <audio controls="controls" preload="auto" style="position: fixed;top:-100px;left: -100px;" id="audioSuccess">
        <source src="/static/MP3/mp3-success.mp3" type="audio/mpeg" />
    </audio>
</div>

<script>
    var codeList = [];
    var user_id = '{{user_id}}';
    var terminal_id = '{{company_id}}';
    var isLoading = false;
    function inputCodeChange(ele) {
        var url = ele.value.trim();
        if (url === '') {
            return;
        }

        //ele.value = '';
        if (isLoading) {
            return;
        }

        if (url.indexOf('tj1.me') >= 0) {
            var code = url.split('t=')[1];
            if (codeList.indexOf(code) === -1) {
                isLoading = true;
                writeOff(code);
            }
            else {
                toastErr('已核销')
                ele.value = '';
            }
        }
        else if (url.length == 12) {
            //writeOff(code);
        }
        else {
            toastErr('扫描标签错误！')
            ele.value = '';
        }
    }

    function btnWriteClick() {
        var code = $("#input_code").val().trim();
        console.log(parseFloat(code).toString());
        if (code.length === 12 && parseFloat(code).toString() != "NaN") {
            if (codeList.indexOf(code) === -1) {
                isLoading = true;
                writeOff(code);
            }
            else {
                toastErr('已核销')
            }
        }
        else {
            toastErr('输入标签序号错误')
        }
    }

    function writeOff(code) {
        $.ajax({
            url: '/wx/kangnian/writeoff/',
            type: 'post',
            data: {
                user_id: user_id,
                terminal_id: terminal_id,
                labelcode: code,
                scan_mode: '1',
                reserve_id: ''
            },
            success: function (res) {
                isLoading = false;
                //输入框清空
                $("#input_code").val('')
                if (res.e === '') {
                    codeList.push(code);
                    document.getElementById('audioSuccess').play();
                    addRow(res.b_code, res.product);
                }
                else {
                    toastErr(res.e);
                }
            },
            error: function () {
                toastErr('网络超时！请稍后再试！');
                isLoading = false;
                //输入框清空
                $("#input_code").val('')
            }
        })

    }


    function addRow(bcode, product) {
        var html = `<tr>
                        <td>${codeList.length}</td>
                        <td>${bcode}</td> 
                        <td>${product}</td> 
                        <td>${new Date().toLocaleString()}</td> 
                    </tr> `
        $("#tableCode").append(html);

        var num = $("#num_" + product).text();
        if (num) {
            num = parseInt(num) + 1;
            $("#num_" + product).text(num);
        }
        else {
            html = `<tr>
                    <td>${product}</td>
                    <td id="num_${product}">${1}</td>
                </td>
            `
            $("#tableNum").append(html);
        }

        getStock();


    }

    function toastErr(title) {
        toastr.error(title, "操作错误：",
            { timeOut: 800, positionClass: "toast-center-center" }
        );
    }

    function finish() {
        clearTable();
    }
    function clearTable() {
        $("#tableCode tr:not(:first-child)").remove();
        $("#tableNum tr:not(:first-child)").remove();

    }

    $(document).keyup(function (e) {
        var key = e.which;
        if (key == 13) {
            //finish();
        }
    });
    getStock();
    function getStock() {
        $.ajax({
            url: '/wx/kangnian/stock/', 
            data: { 
                terminal_id: terminal_id, 
            },
            success: function (res) {  
                if (res.e === '') { 
                    var record = res.record;
                    var html = `<tr class="b">
                            <td>产品</td>
                            <td>数量</td>
                        </tr>`;
					var allnum = 0;
                    for (var i = 0; i < record.length; i++) { 
                        html += `<tr>
                                <td>${record[i].product_name}</td>
                                <td>${record[i].num}</td>
                            </td>
                        `   
						allnum += record[i].num;
                    }
					html += `<tr>
                                <td><b>总数</b></td>
                                <td><b>${allnum}</b></td>
                            </td>
                        `   
                    $("#tableStock").html(html);

                } 
            },
            error: function () { 
            }
        })

    }
</script>
{% endblock %}