@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>
@endsection
@section('title', '入库单列表')
@section('body')

    {{--查看库存量开始--}}
    <div class="wrap">
        <div class="x-nav">
      <span class="layui-breadcrumb">
        <a onclick="goindex()">首页</a>
        <a href="#">库存管理</a>
        <a>
          <cite>现存量</cite></a>
      </span>
            <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>
               <div class="layui-btn"   onclick="sprint('reel')">码</div>
        </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">
                            <label class="layui-form-label">批次号 :</label>
                            <div class="layui-input-block">
                                <input type="text" name="batch" @if(isset($req['batch']) && $req['batch'] != '') value="{{$req['batch']}}" @endif lay-verify="" autocomplete="off" placeholder="" class="layui-input li_input">
                            </div>
                        </div>
                        <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 class="layui-btn x-right importBom"><i class="layui-icon"></i>导入</div>

                        <div class="layui-inline">
                            <label class="layui-form-label">货品类目:</label>
                            <div class="layui-input-inline li_input">
                                <select name="category">
                                    <option value=""></option>
                                    @foreach($category as $c)
                                        <option @if(isset($req['category']) && $req['category'] != '' && $req['category'] == $c['id']) selected @endif value="{{ $c['id'] }}">{{ $c['name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <label class="layui-form-label">仓库:</label>
                            <div class="layui-input-inline li_input">
                                <select name="warehouse">
                                    <option value=""></option>
                                    @foreach($warehouse as $w)
                                        <option @if(isset($req['warehouse']) && $req['warehouse'] != '' && $req['warehouse'] == $w) selected @endif value="{{$w}}">{{$w}}</option>
                                    @endforeach
                                </select>
                            </div>
                            {{--<a href=""><div class="layui-btn" style="float: left"><i class="layui-icon" style="">&#xe615;</i> 查询</div></a>--}}
                            <button class="layui-btn"  lay-filter="sreach" style="margin: 0"><i class="layui-icon">&#xe615;</i></button>

                        </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">删除</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>
                </div>
            </form>
            <table class="layui-table">
                    <thead>
                    <tr class="tr_head">
                        <th>选择</th>
                        <th>序号</th>
                        <th>货号</th>
                        <th>产品名称</th>
                        <th>批次</th>
                        <th>规格</th>
                        <th>现存量</th>
                        <th>计量单位</th>
                        <th>仓库</th>
                        <th>卷号</th>
                        <th>门幅</th>
                        <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>{{$k}}</td>
                            <td class="number">{{$s['number']}}</td>
                            <td>{{$s['name']}}</td>
                            <td class="batch">{{$s['batch']}}</td>
                            <td>{{$s['size']}}</td>
                            <td>{{$s['store']}}</td>
                            <td>{{$s['unit']}}</td>
                            <td>{{$s['warehouse']}}</td>
                            <td class="reel"><a onclick="x_admin_show('现存量详情','/admin/normswareAdd?reel={{ $s->reel }}')" href="javascript:">{{$s['reel']}}</a></td>
                            <td>{{$s['menfu']}}</td>
                            <td>{{$s['reel_detail']}}</td>
                            <td>{{$s['jhkz']}}</td>
                            <td>{{$s['goods']}}</td>
                            <td></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){
            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( name === 'reel'){
                printx(data)
            }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])
                let qrCode = new QRCode(document.getElementById(gck),{
                    text:gck_number_obj[gck],
                    width:60,
                    height:60,
                    colorDark : "#000000",
                    colorLight : "#ffffff",
                    correctLevel : QRCode.CorrectLevel.H
                })
            }

          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])
            }

          }
        }
        var gck_number_obj = {}
        function printx(reeldata) {

            let data = {}
            let num = 0
            $.ajaxSettings.async = false
              Object.values(reeldata).forEach(number => {
                if(number){
                    $.get(`/admin/standingSP/${number}` , function(res){
                    if(res.hasOwnProperty('data')){
                      let r = res.data[0];
                        data[num] = r;
                     num++
                    }
                  })
                }
              })
            layui.use('jquery', function(){
                var $ = layui.$;
                let i_num = 'txm-img'
                for(let i in data){
                    if(data[i][0] !== ''){
                        data[i].i_num = i_num
                        data[i].time = formatDate(new Date(),'yyyyMMdd')
                        //data[i].push($('input[name=arrival_num]').val()) //到货单编号
                        gck_number_obj[i_num] = data[i].reel
                        i_num = i_num + 'n'
                    }
                }
                var pp = 'XC';  //预防不同卷号打印需求的区分
                let widthValue = window.localStorage.getItem('widthValueXC') ? window.localStorage.getItem('widthValueXC') : 7.5; //获取缓存的宽高 没有则取默认值
                let heightValue = window.localStorage.getItem('heightValueXC') ? window.localStorage.getItem('heightValueXC') : 14.12;
                let token = $("input[name='_token']").val() ;
                $.ajax({                // 发起 Ajax 请求加载页面
                  url: 'printReel',
                  type: 'POST',
                  data:  { data: data, pp: pp , widthValue: widthValue, heightValue: heightValue ,_token:token }, // 将要发送的数据添加到请求中
                  success: function(res) {// 将返回的页面内容填充到指定的容器中
                      $('#resultContainer').html(res);
                      var data2 = $(res).filter('.wrap').prop('outerHTML');// 提取HTML内容
                      var ddcValue = '1'  //暂时跳过 关闭或开启打印预览 的功能
                      if (ddcValue === '1') {
                        layer.open({
                          type: 1,
                          skin: 'layui-layer-rim', //加上边框
                          area: ['11cm', '18cm'], //宽高
                          content: data2
                        });
                      }
                      else{
                        $('body').html(data2)
                        setTimeout(function(){
                          dayin()
                        } , 10)
                      }

                    // for (let gck in gck_number_obj){  //循环显示条形码
                    //     if(gck_number_obj[gck]){
                    //        $('.'+ gck).JsBarcode(gck_number_obj[gck])
                    //     }
                    // }
                  },
                  error: function(xhr, status, error) {
                    console.error(error);
                  }
                });
            });
        }
        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 widthValue = window.localStorage.getItem('widthValueXC') ? window.localStorage.getItem('widthValueXC') : 7.5;
            let heightValue = window.localStorage.getItem('heightValueXC') ? window.localStorage.getItem('heightValueXC') : 14.12;

            let url = "";
            url += `宽度:<input type="number" value="${widthValue}" style="margin-bottom:10px;width:100px;height:38px;padding-left:10px" class="weight" />`
            url += `高度:<input type="number" value="${heightValue}" style="margin-bottom:10px;width:100px;height:38px;padding-left:10px" class="height " />`
            url += `单位:cm`
            url += '<div onclick="xiugai()" class="dayin" style="display: inline-block">'
            url += '<a class="layui-btn" style="z-index: 1000">修改</a>'
            url += '</div>'
            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 class="wh" style="width:'+widthValue+'cm;height: '+heightValue+'cm;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>`
                      url += '<div id="'+i_num+'" style="right: 0"></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('aml') !== -1){
                    //     // 如果有 aml
                    //     let aml_data_code = `${reel_data.number}%%%${number}%`
                    //     aml_code[aml_num] = aml_data_code
                    //     if(aml_data_code.toString().length >= 13){
                    //       // 使用 二维码
                    //       url += `<div id="${aml_num}" style="right: 0"></div>`
                    //     }else{
                    //       // 使用 条形码
                    //       url += `<div style="right: 0;"><img src="" style="width: 4cm;height: 2cm" class="${aml_num}"></div>`
                    //     }
                    //   }
                      i_num = i_num + 'n'
                      aml_num = aml_num + 'n'
                      url += '</div>'
                    }
                  })
                })

              $.ajaxSettings.async = true;
            }else{
              // 货号
              for(let i in data){
                  url += '<div id="'+i_num+'" style="right: 0"></div>'
                // 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="dayin2()" class="dayin" style="margin-left: 20px;margin-top: 20px">'
            url += '<a class="layui-btn" style="z-index: 1000">打印</a>'
            url += '</div>'

           return url

        }
        function dayin(){
            $('.dayin').remove()
            wrapHtml = document.querySelector('.x-body').innerHTML
            bdhtml = document.querySelector('#out').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()
        }
        function dayin2(){
            $('.dayin').remove()
            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()
        }
        function xiugai(){ //修改
            let weight = $('.weight').val()
            let height = $('.height').val()
            let whArr = getWH(weight ,height)
            let divs = document.querySelectorAll('.wh')
            if(divs.length){
                divs.forEach(item => {
                    item.style.width = whArr[0];
                    item.style.height = whArr[1]
                })
                window.localStorage.setItem('widthValueXC', weight);
                window.localStorage.setItem('heightValueXC', height);
                layer.alert('修改成功')
            }else {
                layer.alert('请选在订单再来修改打印')
            }
        }
        function xiugai2(){ //修改
            let weight = $('.input-width').val()
            let height = $('.input-height').val()
            let whArr = getWH(weight ,height)
            let divs = document.querySelectorAll('.wh')
            if(divs.length){
                divs.forEach(item => {
                    item.style.width = whArr[0];
                    item.style.height = whArr[1]
                })
                window.localStorage.setItem('widthValueXC', weight);
                window.localStorage.setItem('heightValueXC', height);
                layer.alert('修改成功')
            }else {
                layer.alert('请选在订单再来修改打印')
            }
        }
        function getWH(width=4.8 , height=6.8){ //更改宽高的方法
            let whArr = [];
            whArr.push(width + 'cm');
            whArr.push(height + 'cm');
            return whArr
        }
        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