@extends('layouts.father')
@section('style')
    <style>
        body{
            position: relative;
        }
        /*.layui-form-item{*/
        /*clear: none!important;*/
        /*}*/

        .info_tr-i a{
            text-decoration: underline!important;
        }
        .info_tr-i a:hover{
            color: red!important;
        }
        .layui-btn-warm{
            width: 60px;
            height: 10px;
        }
    </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"
               href='/admin/PackingMxDetail' title="刷新"><i class="layui-icon" style="line-height:30px">&#xe669;</i></a>
        </div>
        <div class="x-body">
        {{csrf_field()}}
            <form action="" class="layui-form-item layui-form" style="height: 100%;position: relative;width: 100%;" id="myForm">
                <div class="layui-form">
                    <div class="layui-form-item">
                        <!-- <div class="buttonIndex" style="margin-left: 15px">
                            <a class="indexAbottonHref" href="/admin/packingList">全部</a>
                            <a class="indexAbottonHref" href="/admin/packingList?date=today">今日</a>
                            <a class="indexAbottonHref" href="/admin/packingList?date=week"> <span>最近一周</span></a>
                        </div> -->
                        <div class="layui-inline" style="width: 100%;">
                            <div class="layui-input-inline" style="width: 18%">
                                <input name="dateList" type="text" placeholder="选择日期范围" class="layui-input" id="test6" lay-key="7" value="{{$dl}}">
                            </div>
                            <div class="layui-input-inline" id="changes">
                                <select name="order_shop" lay-filter="enteradd" lay-verify="required" lay-search>
                                    <option value="">请选择门店名称(导出专用)</option>
                                    @foreach($order_shop as $b)
                                        <option @if(isset($req['order_shop']) && $req['order_shop'] == $b) selected @endif>{{$b}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="layui-input-inline" id="tf">
                                <select name="is_record">
                                    <option>是否筛选</option>
                                    <option @if(isset($req['is_record']) && $req['is_record'] == '是' ) selected @endif>是</option>
                                    <option @if(isset($req['is_record']) && $req['is_record'] == '否' ) selected @endif>否</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <input name="number" type="text" placeholder="明细码搜索" class="layui-input" id="number"  lay-key="7">
                            </div>
                            <input type="hidden" name="text" value="明细">
                            <button class="layui-btn" style="margin: 0" lay-filter="sreach" onclick="return checkGid(event)"><i class="layui-icon">&#xe615;</i></button>
                            <div class="layui-input-inline" style="float: inline-end;">
                                <input name="gid" type="text" placeholder="扫码复审" class="layui-input" id="gid"  lay-key="7">
                            </div>
                        </div>
                        <div>
                            <!-- <input type="checkbox" name="all" title="全选" id="all" style="margin: 0" lay-filter="all"> -->
                            <div class="layui-btn layui-btn-sm" style="margin-top: 5px" onclick="all_excel()">导出发货明细表</div>
                            <div class="layui-btn layui-btn-sm" style="margin-top: 5px" onclick="all_excelprint()">打印发货明细表</div>
                        </div>
                    </div>
                </div>
            </form>
            <form class="layui-form" action="">
                <div id="table">
                        <table class="layui-table" lay-size="sm">
                            <thead>
                            <tr class="tr_head">
                                <!-- <th class="checkboxId">选择</th> -->
                                <th>审核状态</th>
                                <th>序号</th>
                                <th>明细码</th>
                                <th>产品名</th>
                                <th>规格</th>
                                <th>操作人</th>
                                <th>装箱时间</th>
                            </tr>
                            </thead>
                            <tbody>
                                @foreach($packing_detail as $key=>$v)
                                    <tr class="info_tr-i"  style="{{ $v->is_record == 1 ? 'background-color: #dfdcdc' : '' }}">
                                        <!-- <td class="checkboxId">
                                            <input type="checkbox" name="select" lay-skin="primary" class="selectTd" lay-filter="selectTd">
                                        </td> -->
                                        @if($v->is_record == 1)
                                          <td style="color:red">是</td>
                                        @else
                                          <td>否</td>
                                        @endif
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $v->gid}}</td>
                                        <td>{{ $v->name }}</td>
                                        <td>{{ $v->size }}</td>
                                        <td>{{ $v->arranger }}</td>
                                        <td>{{ $v->created_at }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
            </form>
            <div class="page">
                <div>
                    {{$packing_detail->appends($req)->links()}}
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).keyup(function(event){
          if(event.keyCode !== 13){
            return
          }
        //   if(event.keyCode ==13){
        //       focus($('#gidd'));
        //   }
        });
        function focus ( el ){
           $(el).focus()
        }
        onload = function () {
           focus('#gid');
        }

        let times;

        function checkGid() {
            let times = $('input[name="dateList"]').val();
            event.preventDefault();  // 阻止表单的默认提交行为
            var gid = $('#gid').val();
            if (gid) {
                $.get(`/admin/packingRecord?number=`+gid,function(res){
                  if(res.status){
                    layer.msg('复审成功！');
                    $('#myForm').submit();
                  }else{
                    layer.msg(res.msg);
                  }
                })
            } else {
                $('#myForm').submit();
            }
            return false;
        }
        function all_excel() {
            let time=$('input[name="dateList"]').val();
            let shop=document.querySelector('#changes > div > div >input').value;
            let tf=document.querySelector('#tf > div > div >input').value;
            // 选择页面中所有class为'layui-inline'的div
            // 使用split方法分割这个字符串，得到一个包含两个日期的数组
            var dates = time.split(' ~ ');
            var startDate = new Date(dates[0]);
            var endDate = new Date(dates[1]);
            // 计算两个日期之间的差异（以毫秒为单位）
            var difference = endDate - startDate;
            var days = difference / (1000 * 60 * 60 * 24);

            if (days >= 7) {
               var boolen=false;
            } else {
                var boolen=true;
            }
            if(time&&shop&&boolen===true){
                if(tf!=="是否筛选"){
                    shop = encodeURIComponent(shop);
                    location.href="/admin/packExcel?time="+time+"&shop="+ shop+"&tf="+tf;
                }else {
                    layer.alert('请选择审核状态', {icon: 5});
                }
            }else {
                layer.alert('需要选择门店和时间区间或选择的时间区间大于7天', {icon: 5});
            }
        }
        layui.use(['form','laydate'], () => {
            var form = layui.form
            var laydate = layui.laydate;
            //日期范围
            laydate.render({
                elem: '#test6'
                ,range: '~'
                , type: 'datetime'
                ,format: 'yyyy-MM-dd HH:mm:ss'
            });
            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');
                }
            })
            form.on('checkbox(filter)', function(data){
                if(!data.elem.checked){
                    dy_cs.push(data.elem.value)
                }else {
                    for(let i = 0; i < dy_cs.length ; i++){
                        if(dy_cs[i] === data.elem.value){
                            dy_cs.splice(i,1)
                        }
                    }
                }
            });
        })

        function packingDel(id) {
            layer.confirm('确认要删除吗？', function (index) {
                //发异步删除数据
                $.post("/admin/packingDel", {
                    '_token': '{{ csrf_token() }}',
                    'id':id
                }, function (res) {

                    // 发异步，把数据提交给php
                    if (res.status == 1) {
                        //发异步把用户状态进行更改
                        layer.msg(res.msg, {icon: 6, time: 1000}, function () {

                            location.reload();
                        });
                    } else {

                        layer.alert(res.msg, {icon: 5});
                    }
                });
            });

        }

        //表格打印
        function  all_excelprint(){
            let time=$('input[name="dateList"]').val();
            let shop=document.querySelector('#changes > div > div >input').value;
            let tf=document.querySelector('#tf > div > div >input').value;
            // 选择页面中所有class为'layui-inline'的div
            // 使用split方法分割这个字符串，得到一个包含两个日期的数组
            var dates = time.split(' ~ ');
            var startDate = new Date(dates[0]);
            var endDate = new Date(dates[1]);
            // 计算两个日期之间的差异（以毫秒为单位）
            var difference = endDate - startDate;
            var days = difference / (1000 * 60 * 60 * 24);

            if (days >= 7) {
                var boolen=false;
            } else {
                var boolen=true;
            }
            if(time&&shop&&boolen===true){
                if(tf!=="是否筛选") {
                    let shops = shop;
                    shop = encodeURIComponent(shop);
                    let indexs = layer.load();
                    $.get("/admin/packPrint?time=" + time + "&shop=" + shop+"&tf="+tf, function (res) {
                        if (res.data && res.data != "") {
                            layer.close(indexs);
                            layer.open({
                                type: 1,
                                closeBtn: 1,
                                title: '发货明细',
                                skin: 'layui-layer-rim', //加上边框
                                area: ['1050px', '600px'], //宽高
                                content: urls(res.data, shops, time),
                            });
                        } else {
                            layer.alert('数据为空', {icon: 5});
                            layer.close(indexs);
                        }

                    });
                }else {
                    layer.alert('请选择审核状态', {icon: 5});
                }
            }else {
                layer.alert('需要选择门店和时间区间或选择的时间区间大于7天', {icon: 5});
            }
        }
        function dayin(){
            $('.dayin').remove()
            wrapHtml = document.querySelector('.x-body').innerHTML
            bdhtml = document.querySelector('.alls').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 urls(res,shops,time){
            let url="";
            url += '<div class="alls">'
            url += '<!--startprint1--><!--打印内容开始-->'
            url += '<div class="dayin">'
            url += '<button class="layui-btn" onclick="dayin()">打印</button>';
            url += '</div>'
            url+='<div class="prints">';
            url += '<div id="table-head" style="margin-top: 20px; text-align: center; font-size: 35px; font-weight: bold; position: relative;">';
// 添加"米乐+外发明细表"文本
            url += '米乐+外发明细表';
            url += '<div id="times" style="position: absolute; top: 90px; right: 110px; font-size: 12px; font-weight: bold;">' + time + '</div>';
            url += '</div>';
            url += '<div id="milan" style="margin-top: 20px; text-align: center; font-size: 35px; font-weight: bold;">';
            // 添加"米乐+外发明细表"文本
            if(shops.includes('米兰直营店')){
                url += '收货单位: 米兰直营店';
            }else if(shops.includes('米兰软装')){
                url += '收货单位: 米兰';
            } else if(shops.includes('威撒')){
                url += '收货单位: 威撒';
            }else if(shops.includes('城市素颜')){
                url += '收货单位: 城市素颜';
            }else if(shops.includes('领绣')){
                url += '收货单位: 领绣';
            }else if(shops.includes('帘创优家')){
                url += '收货单位: 帘创优家';
            }else if(shops.includes('绣工坊')){
                url += '收货单位: 绣工坊';
            }else {
                url += '收货单位: '+shops;
            }
            url += '</div>';
            // 添加<table>标签及其内部内容
            url += '<table id="my-table" class="layui-table" style="width: 80%;margin-left: 100px">';
            url += '<thead>';
            if(shops.includes('米兰直营店')){
                url += '<tr>';
                url += '<th>序号</th>';
                url += '<th>商品名</th>';
                url += '<th>宽度</th>';
                url += '<th>高度</th>';
                url += '<th>项目名称</th>';
                url += '<th>明细码</th>';
                url += '</tr>';
            }else if(shops.includes('米兰软装')){
                url += '<tr>';
                url += '<th>采购单编号</th>';
                url += '<th>型号</th>';
                url += '<th>尺寸</th>';
                url += '<th>规格编号</th>';
                url += '<th>备注</th>';
                url += '<th>明细码</th>';
                url += '</tr>';
            }
            else if(shops.includes('威撒')){
                url += '<tr>';
                url += '<th>序号</th>';
                url += '<th>商品名</th>';
                url += '<th>型号</th>';
                url += '<th>宽度</th>';
                url += '<th>高度</th>';
                url += '<th>项目名称</th>';
                url += '<th>备注</th>';
                url += '<th>明细码</th>';
                url += '</tr>';
            }else if(shops.includes('城市素颜')){
                url += '<tr>';
                url += '<th>序号</th>';
                url += '<th>明细id</th>';
                url += '<th>收货人姓名</th>';
                url += '<th>规格</th>';
                url += '<th>备注</th>';
                url += '</tr>';
            }else if(shops.includes('领绣')){
                url += '<tr>';
                url += '<th>序号</th>';
                url += '<th>发货时间</th>';
                url += '<th>ID明细</th>';
                url += '<th>收件人姓名</th>';
                url += '<th>主布</th>';
                url += '<th>宽度</th>';
                url += '<th>高度</th>';
                url += '</tr>';
            }
            else if(shops.includes('帘创优家')){
                url += '<tr>';
                url += '<th>序号</th>';
                url += '<th>明细码</th>';
                url += '<th>收货人姓名</th>';
                url += '<th>商品名</th>';
                url += '<th>主布</th>';
                url += '<th>配布</th>';
                url += '<th>开合方向</th>';
                url += '<th>宽度</th>';
                url += '<th>高度</th>';
                url += '<th>主布用料</th>';
                url += '<th>配布用料</th>';
                url += '<th>备注</th>';
                url += '</tr>';
            }else if(shops.includes('绣工坊')){
                url += '<tr>';
                url += '<th>序号</th>';
                url += '<th>明细码</th>';
                url += '<th>收货人姓名</th>';
                url += '<th>商品名</th>';
                url += '<th>时间</th>';
                url += '<th>主布</th>';
                url += '<th>备注</th>';
                url += '</tr>';
            }else {
                url += '<tr>';
                url += '<th>序号</th>';
                url += '<th>明细码</th>';
                url += '<th>商品名</th>';
                url += '<th>主布</th>';
                url += '<th>开合方向</th>';
                url += '<th>宽度</th>';
                url += '<th>高度</th>';
                url += '<th>项目名称</th>';
                url += '<th>备注</th>';
                url += '</tr>';
            }
            url += '</thead>';
            url += '<tbody>';
            // 添加表格内容行
            if(shops.includes('米兰直营店')){
                for (let i = 0; i < res.length; i++) {
                    url += '<tr>';
                    url += '<td>' + res[i]["序号"] + '</td>';
                    url += '<td>' + res[i]["商品名"] + '</td>';
                    url += '<td>' + res[i]["宽度"] + '</td>';
                    url += '<td>' + res[i]["高度"] + '</td>';
                    url += '<td>' + res[i]["项目名称"] + '</td>';
                    url += '<td>' + res[i]["明细码"] + '</td>';
                    url += '</tr>';
                }
            }else if(shops.includes('米兰软装')){
                for (let i = 0; i < res.length; i++) {
                    url += '<tr>';
                    url += '<td>' + res[i]["采购单编号"] + '</td>';
                    url += '<td>' + res[i]["型号"] + '</td>';
                    url += '<td>' + res[i]["尺寸"] + '</td>';
                    url += '<td>' + res[i]["规格编号"] + '</td>';
                    url += '<td>' + res[i]["备注"] + '</td>';
                    url += '<td>' + res[i]["明细码"] + '</td>';
                    url += '</tr>';
                }
            }
            else if(shops.includes('威撒')){
                for (let i = 0; i < res.length; i++) {
                    url += '<tr>';
                    url += '<td>' + res[i]["序号"] + '</td>';
                    url += '<td>' + res[i]["商品名称"] + '</td>';
                    url += '<td>' + res[i]["型号"] + '</td>';
                    url += '<td>' + res[i]["宽度"] + '</td>';
                    url += '<td>' + res[i]["高度"] + '</td>';
                    url += '<td>' + res[i]["项目名称"] + '</td>';
                    url += '<td>' + res[i]["备注"] + '</td>';
                    url += '<td>' + res[i]["明细码"] + '</td>';
                    url += '</tr>';
                }
            }else if(shops.includes('城市素颜')){
                for (let i = 0; i < res.length; i++) {
                    url += '<tr>';
                    url += '<td>' + res[i]["序号"] + '</td>';
                    url += '<td>' + res[i]["明细id"] + '</td>';
                    url += '<td>' + res[i]["收货人姓名"] + '</td>';
                    url += '<td>' + res[i]["规格"] + '</td>';
                    url += '<td>' + res[i]["备注"] + '</td>';
                    url += '</tr>';
                }
            }else if(shops.includes('领绣')){
                for (let i = 0; i < res.length; i++) {
                    url += '<tr>';
                    url += '<td>' + res[i]["序号"] + '</td>';
                    url += '<td>' + res[i]["发货时间"] + '</td>';
                    url += '<td>' + res[i]["ID明细"] + '</td>';
                    url += '<td>' + res[i]["收件人姓名"] + '</td>';
                    url += '<td>' + res[i]["主布"] + '</td>';
                    url += '<td>' + res[i]["宽度"] + '</td>';
                    url += '<td>' + res[i]["高度"] + '</td>';
                    url += '</tr>';
                }
            }else if(shops.includes('帘创优家')){
                for (let i = 0; i < res.length; i++) {
                    url += '<tr>';
                    url += '<td>' + res[i]["序号"] + '</td>';
                    url += '<td>' + res[i]["明细码"] + '</td>';
                    url += '<td>' + res[i]["收货人姓名"] + '</td>';
                    url += '<td>' + res[i]["商品名"] + '</td>';
                    url += '<td>' + res[i]["主布"] + '</td>';
                    url += '<td>' + res[i]["配布"] + '</td>';
                    url += '<td>' + res[i]["开合方向"] + '</td>';
                    url += '<td>' + res[i]["宽度"] + '</td>';
                    url += '<td>' + res[i]["高度"] + '</td>';
                    url += '<td>' + res[i]["主布用料"] + '</td>';
                    url += '<td>' + res[i]["配布用料"] + '</td>';
                    url += '<td>' + res[i]["备注"] + '</td>';
                    url += '</tr>';
                }
            }else if(shops.includes('绣工坊')){
                for (let i = 0; i < res.length; i++) {
                    url += '<tr>';
                    url += '<td>' + res[i]["序号"] + '</td>';
                    url += '<td>' + res[i]["明细码"] + '</td>';
                    url += '<td>' + res[i]["收货人姓名"] + '</td>';
                    url += '<td>' + res[i]["商品名"] + '</td>';
                    url += '<td>' + res[i]["时间"] + '</td>';
                    url += '<td>' + res[i]["主布"] + '</td>';
                    url += '<td>' + res[i]["备注"] + '</td>';
                    url += '</tr>';
                }
            }else{
                for (let i = 0; i < res.length; i++) {
                    url += '<tr>';
                    url += '<td>' + res[i]["序号"] + '</td>';
                    url += '<td>' + res[i]["明细码"] + '</td>';
                    url += '<td>' + res[i]["商品名"] + '</td>';
                    url += '<td>' + res[i]["主布"] + '</td>';
                    url += '<td>' + res[i]["开合方向"] + '</td>';
                    url += '<td>' + res[i]["宽度"] + '</td>';
                    url += '<td>' + res[i]["高度"] + '</td>';
                    url += '<td>' + res[i]["项目名称"] + '</td>';
                    url += '<td>' + res[i]["备注"] + '</td>';
                    url += '</tr>';
                }
            }
            url += '</tbody>';
            url += '</table>';
            url+='</div>';
            url += '<!--打印内容结束--><!--endprint1-->'
            url+='</div>';
            return url
        }


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