@extends('layouts.father')
@section('style')
    <style>
        body{
            position: relative;
        }
        .layui-form-item{
            clear: none!important;
        }
        #layui-laydate7{
            top: 170px!important;
        }
        .info_tr a{
            text-decoration: underline!important;
        }
        .info_tr a:hover{
            color: red!important;
        }
    </style>
    <style>
        @media print {
            @page {
                size: auto;
                margin: 0;{{--这些设置在谷歌浏览器预览那边不是很明显，但是pda打印有效果，可能和浏览器有关系--}}
            }
            body {
                margin: 0;
                padding: 0;
                border: 1px solid #000;
            }
        }

    </style>
@endsection
@section('title', '入库单列表')
@section('body')

    {{--查看库存量开始--}}
    <div class="wrap">
        <div class="x-nav">
      <span class="layui-breadcrumb">
        <a onclick="goindex()"></a>

        <a>
          <cite></cite></a>
      </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em; margin-top:3px; float:left" onclick="history.back()" title="返回">
                <i class="layui-icon" style="line-height:30px">&#xe65a;</i></a>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon" style="line-height:30px">&#xe669;</i></a>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="sprint('reel',1)" title="打印">
                <i class="layui-icon" style="line-height:30px"></i>码</a>
        </div>
        <div class="x-body">
            <form action="" class="layui-form-item layui-form" style="height: 170px;position: relative;width: 100%;">
                {{csrf_field()}}
                <div class="layui-form">
                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <div class="btn_three " style="float: left">
                                <label class="layui-form-label">货号 :</label>
                                <div class="layui-input-block">
                                    <input type="text" name="number" @if(isset($req['number']) && $req['number'] != '') value="{{$req['number']}}" @endif lay-verify="" autocomplete="off" placeholder="" class="layui-input li_input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">卷号 :</label>
                            <div class="layui-input-block">
                                <input type="text" name="reel"  @if(isset($req['reel']) && $req['reel'] != '') value="{{$req['reel']}}" @endif lay-verify="" autocomplete="off" placeholder="" class="layui-input li_input">
                            </div>
                        </div>



                    </div>
                </div>
                <div style="margin-bottom: 20px;display: flex">
                    <div style="margin: 10px 10px 0 0">
                        <input type="checkbox" name="all" title="全选" id="all" lay-filter="all">
                    </div>
                    
                    <div class="layui-btn" onclick="sprint('number')">货号打印</div>
                    {{--<div class="layui-btn" onclick="sprint('number,batch')">批次条码打印</div>--}}
                    <div class="layui-btn" onclick="sprint('reel')">卷号打印</div>
                    <button class="layui-btn"  lay-filter="sreach" style="margin: 1"><i class="layui-icon">&#xe615;</i></button>
                </div>
            </form>
            <table class="layui-table">
                <thead>
                <tr class="tr_head">
                    <th>选择</th>
                    <th>货号</th>
                    <th>卷号</th>
                    <th>现存量</th>
                </tr>
                </thead>
            </table>
            <table class="layui-table">
                <tbody id="x-img">
                @foreach($standing as $k=>$s)
                    <tr class="info_tr">
                        <td class="checkboxId">
                            <input type="checkbox" name="select" lay-skin="primary" class="selectTd" lay-filter="selectTd">
                        </td>

                        <td class="number">{{$s['number']}}</td>
                        <td class="reel">{{$s['reel']}}</td>
                        <td>{{$s['store']}}</td>

                    </tr>
                @endforeach
                </tbody>
            </table>
            <div class="page">
                <div>
                    @if($standing)
                        {{$standing->appends($req)->links()}}
                    @endif
                </div>
            </div>
        </div>
    </div>
    {{--查看库存量结束--}}
    <script src="/js/qrcode.min.js"></script>
    <script>
        var gck_number_obj = {}
        var aml_code = {}
        async function sprint(name,dy){
            let nameAll = name.split(',')
            let data = {}
            for(let i of nameAll){
                let num = 0
                $('.selectTd').each(function () {
                    // console.log(`${$(this).parent().parent().find(`.${i}`)[0].innerText}`)
                    if($(this)[0].checked === true){
                        if(data[num] === undefined){
                            data[num] = `${$(this).parent().parent().find(`.${i}`)[0].innerText}`
                        }else if($(this).parent().parent().find(`.${i}`)[0].innerText !== ''){
                            data[num] += `,${$(this).parent().parent().find(`.${i}`)[0].innerText}`
                        }
                        num++
                    }
                })
            }
            if(dy === 1){

                var urls = code_print(data , name);
                $('body').html(urls)  //根据code_print(data , name)`函数的返回结果，将生成的标签内容赋值给页面的`<body>`元素，即`$('body').html(urls)`。

                setTimeout(function(){
                    alert("printPreview")
                    document.body.style.border = 'none'; // 设置边框为无
                    //window.print()
                    //window.location.reload()//最后，通过`setTimeout()`函数延迟0.01秒，然后调用`window.print()`来触发打印操作，并在打印完成后刷新页面(`window.location.reload()`)。
                } , 10)

            }else {layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                //陈冰注释，为了手机端查看方便area: ['12cm', '15cm'], //宽高
                content: code_print(data , name)
            });}

            for (let gck in gck_number_obj){
                $('.'+ gck).JsBarcode(gck_number_obj[gck])
            }

            for(let amlCode in aml_code){
                if(aml_code[amlCode].toString().length >= 13){
                    let qrCode = new QRCode(document.getElementById(amlCode),{
                        text:aml_code[amlCode],
                        width:80,
                        height:80,
                        colorDark : "#000000",
                        colorLight : "#ffffff",
                        correctLevel : QRCode.CorrectLevel.H
                    })
                }else{
                    $('.'+ amlCode).JsBarcode(aml_code[amlCode])
                }

            }
        }
        function padLeftZero(str) {
            return ("00" + str).substr(str.length); //是否加00
        }
        function formatDate(date, fmt) {
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
            }

            let o = {
                "M+": date.getMonth() + 1,
                "d+": date.getDate(),
                "h+": date.getHours(),
                "m+": date.getMinutes(),
                "s+": date.getSeconds()
            };

            for (let k in o) {
                if (new RegExp(`(${k})`).test(fmt)) {
                    let str = o[k] + "";
                    fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str));
                }
            }

            return fmt;
        }


        function code_print(data , name) {

            let url = "";
            url += '<div id="order-dy-id">'
            url += '<!--startprint1--><!--打印内容开始-->'
            let i_num = 'txm-img'
            let aml_num = 't-img'
            if(name === 'reel'){
                // 卷号
                $.ajaxSettings.async = false
                Object.values(data).forEach(number => {
                    $.get(`/admin/standingSP/${number}` , function(res){
                        if(res.hasOwnProperty('data')){
                            let reel_data = res.data[0];
                            console.log(reel_data)
                            url += '<div style="width:7.5cm;height:14.12cm;border: 0.5px solid #000000;padding: 5px;font-size:22px">'
                            url += `<div>编号: ${formatDate(new Date() , 'yyyyMMdd')}${nonull(reel_data.supplier_xh)}@</div>`
                            if (reel_data.hasOwnProperty('supplier_name') && reel_data.supplier_name !== null) {
                                url += `<div>供应商: ${nonull(reel_data.supplier_name)}</div>`
                            }
                            url += `<div>货号: ${nonull(reel_data.number)}</div>`
                            if (reel_data.hasOwnProperty('arrival_num') && reel_data.arrival_num !== null) {
                                url += `<div>到货单号: ${nonull(reel_data.arrival_num)}</div>`
                            }
                            if (reel_data.hasOwnProperty('num') && reel_data.num !== null) {
                                url += `<div>到货数量: ${nonull(reel_data.num)}${nonull(reel_data.unit)}</div>`
                            }
                            if (reel_data.hasOwnProperty('weight') && reel_data.weight !== null) {
                                url += `<div>到货重量（千克）: ${nonull(reel_data.weight)}</div>`
                            }
                            url += `<div>标准克重: ${nonull(reel_data.weights)}克/米</div>`
                            url += `<div>货位: ${nonull(reel_data.goods)}</div>`
                            url += `<div>检验米数: ${nonull(reel_data.meter)}</div>`
                            url += `<div>称重员: _______</div>`
                            url += `<div>检验员: _______</div>`
                            url += `<div style="right: 0"><img src="" style="width: 4.4cm;height: 2.2cm" class="${i_num}"></div>`
                            gck_number_obj[i_num] = number

                            url += `<div>卷号: ${nonull(number)}</div>`
                            if (reel_data.hasOwnProperty('reel_detail') && reel_data.reel_detail !== null) {
                                url += `<div>卷号描述: ${nonull(reel_data.reel_detail)}</div>`
                            }
                            url += `<div>现存量: ${nonull(reel_data.store)}</div>`
                            url += `<div>门幅: ${nonull(reel_data.menfu)}</div>`

                            if (reel_data.hasOwnProperty('cylinder_number') && reel_data.cylinder_number !== null) {
                                url += `<div>缸号: ${nonull(reel_data.cylinder_number)}</div>`
                            }
                            //window.location.href.indexOf('aml') !== -1
                            if(window.location.href.indexOf('192') !== -1){
                                // 如果有 aml
                                let aml_data_code = `${reel_data.number}%%%${number}`
                                aml_code[aml_num] = aml_data_code
                                 // 使用 二维码
                                    url += `<div id="${aml_num}" style="right: 0"></div>`
                            }
                            i_num = i_num + 'n'
                            aml_num = aml_num + 'n'
                            url += '</div>'
                        }
                    })
                })

                $.ajaxSettings.async = true;
            }else{
                // 货号
                for(let i in data){
                    url += `<div style="right: 0"><img src="" style="width: 2.4cm;height: 1.2cm" class="${i_num}"></div>`
                    url += `<div class="dy-order-lang">${data[i]}</div>`
                    gck_number_obj[i_num] = data[i]
                    i_num = i_num + 'n'
                }
            }

            url += '<!--打印内容结束--><!--endprint1-->'
            url += '</div>'
            url += '<div onclick="dayin()" class="dayin" style="margin-left: 222px;margin-top: 1px">'
            url += '<a class="layui-btn" style="z-index: 1000">打印</a>'
            url += '</div>'

            return url

        }
        function dayin(){
            $('.dayin').remove()
            alert("printPreview"); // 添加alert语句,安卓监听
            wrapHtml = document.querySelector('.x-body').innerHTML
            bdhtml = document.querySelector('#order-dy-id').innerHTML;//获取当前页的html代码
            sprnstr = "<!--startprint" + 1 + "-->";//设置打印开始区域
            eprnstr = "<!--endprint" + 1 + "-->";//设置打印结束区域
            prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html
            prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));//从结束代码向前取html
            window.document.body.innerHTML = prnhtml;
            //window.print();
            //location.reload()
        }
        layui.use('form', function(){
            var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
            form.render();
            form.on('checkbox(all)', function (data) {
                var a = data.elem.checked;
                if (a === true) {
                    $(".selectTd").prop("checked", true);
                    form.render('checkbox');
                } else {
                    $(".selectTd").prop("checked", false);
                    form.render('checkbox');
                }
            })
        });
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //日期范围
            laydate.render({
                elem: '#test6'
                ,range: '~'
            });
        });
        layui.use(['laydate', 'element', 'laypage', 'layer','upload','form'], function () {
            $ = layui.jquery;//jquery
            laydate = layui.laydate;//日期插件
            upload = layui.upload;
            //以上模块根据需要引入
            var form = layui.form
            form.on('checkbox(all)', function (data) {
                var a = data.elem.checked;
                if (a === true) {
                    dayAll = true
                    $(".selectTd").prop("checked", true);
                    form.render('checkbox');
                } else {
                    dayAll = false
                    $(".selectTd").prop("checked", false);
                    form.render('checkbox');
                }
            })
            form.on('checkbox(selectTd)', function (data) {
                var a = data.elem.checked;
                if (a === true) {
                    dayAllNum ++
                    dayAll = true
                } else {
                    dayAllNum --
                    if(dayAllNum === 0){
                        dayAll = false
                    }
                }
            })
            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });
            /** 上传规格 */
            upload.render({
                elem: '.importBom' //绑定元素
                ,size: 2000
                ,accept: "file"
                , data: {
                    '_token': $("input[name=_token]").val()
                }
                , url: '/admin/drStanding' //上传接口
                , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    loadIndex = layer.load(); //上传loading
                }
                , done: function (res, index, upload) {
                    //上传完毕回调
                    layer.close(loadIndex); //关闭加载loading
                    if(res.status == 1) {
                        layer.msg(res.msg, {icon: 6, time: 1000}, function () {

                            location.reload();
                        });
                    } else {
                        layer.alert(res.msg,{icon: 5});
                    }
                }
                , error: function (error, upload) {
                    //请求异常回调
                    console.log(error);
                    layer.close(loadIndex); //关闭加载loading
                }
            });

        });
    </script>
    <script type="text/javascript" src="/js/tableContentRoll.js"></script>
    <link rel="stylesheet" href="/css/tableContentRoll.css">
@endsection