@extends('layouts.father')
@section('title', '')
@section('body')
    <style>
        *{
            font-size: 12px;
        }
        .debang-dy-div{
            border: 0.5px solid #c5c2c1;
            width: 76mm;
        }
        .debang-dy-data-div{
            width: 72mm;
            margin: 0 2mm;
        }
        .debang-dy-head-div{
            width: 100%;
            display: flex;
            height: 12mm;
            text-align: right;
        }
        .debang-dy-head-div-one{
            width: 12mm;
            border: 0.5px solid #c5c2c1;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
        .border-div{
            border: 0.5px solid #c5c2c1;
        }
        .border-bottom-no{
            border-bottom: 0;
        }
        .city-div{
            width: 72mm;
            height: 10mm;
            justify-content: center;
            display: flex;
            align-items: center;
        }
        .here-you-are-div{
            width: 56mm;
            height: 16mm;
            display: flex;
        }
        .give-me-div{
            width: 56mm;
            height: 16mm;
            display: flex;
        }
        .txm-div{
            /*width: 72mm;*/
            /*height: 19mm;*/
            text-align: center;
        }
        .dy-most-botton{
            height: 52mm;
        }
        .dy-most-botton-img{
            margin: 10px;
        }
        .here-you-are-div-right{
            height: 15mm;
            padding: 1mm;
        }
        .give-me-div-right{
            height: 12mm;
            padding: 1mm;
        }
        .here-you-are-div-left{
            margin-left: 5px;
            width: 10mm;
            font-size: 16px;
            display: flex;
            justify-content: center;
            font-weight:bold;
            align-items: center;
            height: 16mm;
        }
        .give-me-div-left{
            width: 12mm;
            height: 12mm;
            font-size: 20px;
            display: flex;
            justify-content: center;
            font-weight:bold;
            align-items: center;
        }
        .add-cu{
            font-weight:bold
        }

        .expressNum {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .hade_input{
            position: absolute;
            top: 0;
            z-index: 999;
        }
    </style>
    <div class="x-body" id="x-body">
        <div class="debang-dy-div express">
            {{--style="display: none;"--}}
            <div style="margin-top: 2mm" class="debang-dy-data-div">
                <div class="debang-dy-head-div" style="display: flex;justify-content: space-between">
                    <div></div>
                    <div></div>
                    <div class="add-cu" style="width: 12mm;height:12mm;font-size: 16px;text-align: left">快递包裹</div>
                </div>
                <div class="city-div border-div border-bottom-no">
                    <h1 style="font-size: 25px;font-weight:bold" class="receiveAddr"></h1>
                </div>
                <div class="txm-div border-div border-bottom-no kuaidi1">
                    <img class="kuaidi-img" src="" alt=""  style="margin-top: 5px ; width:6.0cm;height:1.0cm"/>
                    <div></div>
                </div>
                <div style="display: flex">
                    <div style="width: 56mm">
                        <div class="here-you-are-div border-div border-bottom-no">
                            <div class="here-you-are-div-left">
                                <img src="/images/shou.png">
                            </div>
                            <div class="here-you-are-div-right">
                                <div style="display: flex;justify-content: space-between">
                                    <div style="font-size: 13px" class="add-cu receiveName"></div>
                                    <div class="add-cu receiveMobile" style="font-size: 13px"></div>
                                </div>
                                <div class="add-cu receiveAddress" style="font-size: 13px"></div>
                            </div>
                        </div>
                        <div class="give-me-div border-div border-bottom-no">
                            <div class="give-me-div-left">寄</div>
                            <div class="give-me-div-right">
                                <div style="display: flex">
                                    <div style="width: 20mm" class="add-cu senderName"></div>
                                    <div class="add-cu senderMobile"></div>
                                </div>
                                <div class="add-cu senderAddress"></div>
                            </div>
                        </div>
                        <div class="give-me-div border-div border-bottom-no">
                        </div>
                    </div>
                    <div style="width: 16mm;border: 0.5px solid #c5c2c1;border-bottom: 0">
                        <div class="add-cu payType" style="width: 100%;height: 8mm;border-bottom: 0.5px solid #c5c2c1;font-size: 14px;display: flex;align-items: center;justify-content: center;display: none;">到付</div>
                        {{--<div style="width: 100%;height: 12mm;border-bottom: 0.5px solid #c5c2c1;display: flex;align-items: center;flex-wrap: wrap;justify-content: center">
                            <div class="add-cu" style="font-size: 14px">代收贷款</div>
                            <div>￥1200</div>
                        </div>
                        <div style="width: 100%;height: 12mm;display: flex;align-items: center;flex-wrap: wrap;justify-content: center">
                            <div class="add-cu" style="font-size: 14px">签收返单</div>
                            <div>展件返回</div>
                        </div>--}}
                    </div>
                </div>
            </div>
            <div class="debang-dy-data-div dy-most-botton border-div" style="margin-bottom: 2mm;text-align: center">
                <div class="dy-most-botton-img-div">
                    <img style="width:25mm;height: 25mm;" class="dy-most-botton-img" src="">
                    <span  style="display: inline-block;width:25mm;text-align: left" class="order_message"></span>
                    <div class="packing_num"></div>
                    <div>扫码查看箱内货物清单</div>
                </div>
                <div class="dy-most-botton-list-div">
                    <table class="layui-table">
                        <tr><td>商品名|数量|规格</td></tr>
                    </table>
                </div>
            </div>
        </div>
        <form class="layui-form">
            <div class="">
                <input type="checkbox" checked lay-skin="switch" lay-filter="encrypt" >
                <span class="on-off-text">快递单模式(列表)</span>
            </div>
        </form>
        <input type="hidden" name="kuaidi_type" value="{{$kuaidi_type}}">
        @foreach( $idArr as $id)
            <form class="layui-form express{{$id}}" >
                {{csrf_field()}}
                <input type="hidden" name="id" value="{{$id}}">
                <div class="kdd-div-father">
                    <div style="padding: 15px 0">填写本出库单的快递单：</div>
                    <span style="font-size: larger; margin-left: 50px">订单号:{{$packingArr[$id]->relevance}}   装箱单号: {{$packingArr[$id]->packing_num}}</span>
                    <div style="display: flex;border-bottom: 0.5px solid black">
                        <div style="width: 50%">
                            <div style="font-size: 20px">手动</div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">快递公司：</label>
                                <div class="layui-input-inline li_input" style="position: relative">
                                    <input type="text" class="layui-input hade_input" value="{{$packingArr[$id]->kuaidi or '请选择'}}" style="width:90%">
                                    <select name="kuaidi" lay-verify="" >
                                        <option></option>
                                        @foreach($exp as $e)
                                            <option value="{{$e}}">{{$e}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item hand-db">
                                <label class="layui-form-label">手动填写快递单号：</label>
                                <div class="layui-input-inline expressNum">
                                    <input type="text" name="expressDIY" value="{{$packingArr[$id]->expressDIY}}"  class="layui-input" style="margin-right: 10px">
                                    @if($packingArr[$id]->expressDIY)
                                        <i class="layui-icon" title="删除快递单" style="cursor: pointer;" onclick="delete_kdh({{$id}})">&#x1006;</i>
                                    @endif
                                </div>


                                <div class="layui-input-inline">
                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
                                            onclick="x_admin_show('快递单图片','/admin/expressPic?id={{$id}}','800','650')">
                                        <i class="layui-icon">&#xe67c;</i>
                                    </button>
                                    @if($packingArr[$id]->kuaidi_pic)
                                        <a href="{{ env("OSS_HOST").$packingArr[$id]->kuaidi_pic }}" type="button" class="layui-btn layui-btn-sm" target="view_window">
                                            <i class="layui-icon">&#xe60d;</i>
                                        </a>
                                    @endif
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <a class="layui-btn" style="margin-left: 120px" onclick="add_input({{$id}})">保存</a>
                            </div>
                        </div>
                        <div style="width: 50%">
                            <span style="font-size: larger; margin-left: 50px">订单号:{{$packingArr[$id]->relevance}}   装箱单号: {{$packingArr[$id]->packing_num}}</span>

                            <div style="font-size: 20px">自动</div>
                            <div class="layui-form-item" style="display: flex">
                                <label class="layui-form-label">快递订单：</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="logisticID" value="{{$packingArr[$id]->logisticID}}"  class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">德邦电子面单，订单号</div>
                                <div class="layui-input-inline">
                                    <a class="layui-btn">@if($packingArr[$id]->payType == 1) 到付 @else 寄付 @endif</a>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">快递单号：</label>
                                <div class="layui-input-inline" style="margin-right: 70px">
                                    <div style="display: flex;align-items: center;margin-bottom: 10px;" data-value="{{$packingArr[$id]->id}}">
                                        @if($packingArr[$id]->express && $packingArr[$id]->payType == 1)
                                            <a class="layui-btn">到付</a>
                                        @elseif($packingArr[$id]->express && $packingArr[$id]->payType == 0)
                                            <a class="layui-btn">寄付</a>
                                        @endif
                                        <input type="text" name="express" value="@if($packingArr[$id]->logisticID){{$packingArr[$id]->express}}@endif" onclick="two_dy('{{$id}}')" class="layui-input" style="margin-right: 10px;width: 150px">
                                        @if($packingArr[$id]->logisticID && $packingArr[$id]->express)
                                            <i class="layui-icon" title="取消快递号" style="cursor: pointer;" onclick="delete_dbkd({{$id}})">&#x1006;</i>
                                        @endif
                                    </div>
                                </div>
                                <div class="layui-form-mid layui-word-aux">开单前作废可撤销快递单，开单后作废需要通知德邦作废单快递单号</div>
                            </div>
                            <div class="layui-form-item">

                                <div class="change">
                                    条码宽:<input type="number" class="width" style="width: 30px;" value="6.0">
                                    条码高:<input type="number" class="height" style="width: 30px;" value="1.0">
                                    重量:<input type="text" name="weight" style="width: 30px;" value="{{ $packingArr[$id]->weight or '1' }}">kg
                                    体积:<input type="text" name="volume" style="width: 30px;" value="0.005">m3
                                    <a class="layui-btn" onclick="DBorder({{$id}});">  电子面单下单并打印</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        @endforeach
    </div>
    <script>

        var bordid,bordlogistid;
        function two_dy(id) {
            bordid = id;
            let value = $('.express'+id).find("input[name='express']").val();
            if(value) {
                let url = ''
                url += '<div style="text-align: center" class="reprint">'
                url += '<div style="margin-top: 10px">是否要重新打印此快递单号</div>'
                url += `<div style="margin-top: 10px;display: flex;justify-content: center">
<input type="text" class="layui-input two-dy-input" value="${value}" style="margin-right: 10px;width: 150px"></div>`
                url += '<div style="margin-top: 10px"><div class="layui-btn" onclick="two_dy_yes(bordid)">确定</div></div>'
                url += '</div>'
                layer.open({
                    type: 1,
                    shadeClose: true,
                    title: '重新打印快递单'
                    ,content: url,
                    area: ['420px', '200px'], //宽高
                });

            }
        }

        function two_dy_yes(id) {
            let mailNo =  $('.two-dy-input').val();
            layer.closeAll();
            DBorder(id,mailNo);
        }

        setTimeout(() => {
            $('select[name="kuaidi"]').siblings("div.layui-form-select").find("dl").find("dd").click(function () {
                let optionValue
                if($(this).html() === "请选择"){
                    optionValue = ""
                }else{
                    optionValue = $(this).html()
                }

                $('.hade_input').val(optionValue)
            })
        } ,1000)

        function add_input(id) {

            var logisticID = $('.express'+id).find("input[name='express']").val();
            if(logisticID) {

                layer.alert('请先删除电子面单', {icon: 5});
                return;
            }

            var express = $('.express'+id).find("input[name=expressDIY]").val();

            // var kuaidi = $('.express'+id).find("select[name='kuaidi']").val();
            var kuaidi = $('.hade_input').val()
            var index = layer.load(0, {
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });


            $.post('/admin/packExpressDIY', {
                'id': id,
                '_token': $("input[name='_token']").val() ,
                'express': express ,
                'kuaidi': kuaidi ,
            }, function (res) {
                layer.close(index)
                //发异步，把数据提交给php
                if (res.status == 1) {
                    layer.alert(res.msg, {icon: 6},function () {
                        location.reload();
                    });
                    // $(div_data).find('.hand-db').append(url);
                } else {
                    layer.alert(res.msg, {icon: 5});
                }
            }, "json");
        }

        function delete_kdh (id){

            var mailNo = $('.express'+id).find("input[name='expressDIY']").val()
            layer.confirm('取消手工快递单号：'+mailNo, {
                btn: ['删除', '取消'] //可以无限个按钮
            }, function(index, layero){

                var kuaidi = $("select[name='kuaidi']").val();
                // $(div_data).remove()
                // var express = getExpress(obj)
                $.post('/admin/packExpressDIY', {
                    'id': id,
                    '_token': $("input[name='_token']").val() ,
                    'express': '' ,
                    'kuaidi': kuaidi ,
                }, function (res) {
                    layer.close(index)
                    //发异步，把数据提交给php
                    if (res.status == 1) {

                        layer.msg(res.msg, {icon: 6, time: 1000},function () {

                            location.reload();
                        });
                    } else {
                        layer.alert(res.msg, {icon: 5});
                    }
                }, "json");

            }, function(index){
                //按钮【按钮二】的回调
            });
        }

        function getExpress(div_data) {
            var expressDIYObj = $(div_data).find('.hand-db').find("input[name='expressDIY']");
            var express = "";
            expressDIYObj.each(function (i) {
                if(express == "") {
                    express = $(this).val() ? $.trim($(this).val()) : "";
                } else {
                    express += $(this).val() ? "," + $.trim($(this).val()) : "";
                }
            })
            return express;
        }
        function delete_dbkd (id){

            var mailNo = $('.express'+id).find("input[name='express']").val()
            layer.confirm('请确认需要取消并回收的快递单号：'+mailNo, {
                btn: ['删除', '取消'] //可以无限个按钮
            }, function(index, layero){

                $.post('/admin/packBorderDel', {
                    'id': id,
                    '_token': $("input[name='_token']").val() ,
                    'mailNo': mailNo ,
                }, 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});
                    }
                }, "json");
            }, function(index){
                //按钮【按钮二】的回调
            });
        }
        $('.debang-dy-div').hide()
        function debang_dy(){
            $('.debang-dy-div').show()
            document.getElementById("x-body").style.height="100mm";
            $('.day-anniu').remove()
            $('.layui-form').remove()
            setTimeout(()=>{
                window.print();
                location.reload()
            },0)
        }
        layui.use(['layer','form'], function() {
            $ = layui.jquery;//jquery
            form = layui.form;
            form.on('submit(addd)', function (data) {
                //发异步，把数据提交给php
                $.post('/admin/packEditExpress', data.field, function (res) {
                    //发异步，把数据提交给php
                    if (res.status == 1) {
                        layer.msg(res.msg, {icon: 6, time: 1000}, function () {
                            layer.closeAll();
                            location.reload();
                        });
                    } else {
                        layer.alert(res.msg, {icon: 5});
                    }
                }, "json");
            })

            form.on('switch(encrypt)', function(data){
                if(data.elem.checked){
                    $('.on-off-text').html('快递单模式(列表)')
                    $('.dy-most-botton-list-div').show()
                }else {
                    $('.on-off-text').html('快递单模式(二维码)')
                    $('.dy-most-botton-list-div').hide()
                }
            });
        })
        // 德邦电子面单
        function DBorder(id, mailNo = '') {
            let changeWamp = document.querySelectorAll('.change')[0]
            let width = changeWamp.querySelectorAll('.width')[0].value + 'cm'
            let height = changeWamp.querySelectorAll('.height')[0].value + 'cm'
            kuaidi_type =  $("input[name='kuaidi_type']").val() ,
            $(".kuaidi-img").css({
                width: width,
                height: height
            })

            if( kuaidi_type == '随备注订单一起发'){
                layer.alert('随备注订单一起发“{{$remark}}”', {icon: 5});
                return;
            }

            if(mailNo == '') {

                var express = $('.express'+id).find("input[name='express']").val();
                if(express != '') {

                    layer.alert('请先删除电子面单', {icon: 5});
                    return;
                }
            }
            var expressDIY = $('.express'+id).find("input[name='expressDIY']").val();

            if(expressDIY != '') {

                layer.alert('请先删除手动单号', {icon: 5});
                return;
            }
            var logisticID =  $('.express'+id).find("input[name='logisticID']").val();
            var weight =  $('.express'+id).find("input[name='weight']").val();
            var volume =  $('.express'+id).find("input[name='volume']").val();

            var payType = $('.express'+id).find("input[name='payType']").is(':checked'); // 是否到付
            $.post('/admin/packBorder', {
                'id': id,
                '_token': $("input[name='_token']").val() ,
                'payType': payType ,
                'mailNo': mailNo ,
                'logisticID': logisticID ,
                'weight': weight ,
                'volume': volume ,
            }, function (res) {
              //发异步，把数据提交给php
                if (res.status == 1) {


                    $(".kuaidi1 img").attr("src",res.data.barcode1)
                    $(".kuaidi1 div").html(res.data.mailNo)
                    $(".packing_num").html(res.data.packing_num)
                    $(".receiveAddr").html(res.data.receiver.province + res.data.receiver.city)
                    $(".receiveName").html(res.data.receiver.name)
                    $(".receiveMobile").html(res.data.receiver.mobile)
                    $(".receiveAddress").html(res.data.receiver.province + res.data.receiver.city + res.data.receiver.county + res.data.receiver.address)
                    $(".senderName").html(res.data.sender.name)
                    $(".senderMobile").html(res.data.sender.mobile)
                    $(".senderAddress").html(res.data.sender.province + res.data.sender.city + res.data.sender.county + res.data.sender.address)
                    $(".dy-most-botton-img-div img").attr('src',res.data.qrcode);
                    $('.order_message').html("客户:"+res.data.receiver.client )
                    var mx = res.data.mx
                    var list_div  = $(".dy-most-botton-list-div table");
                    for (var d in mx) {
                        let tr = `<tr><td>${mx[d]['name']} | ${mx[d]['num']}/${mx[d]['unit']} | ${mx[d]['size']}</td>`;
                        list_div.append(tr);
                    }
                    // $(".dy-most-botton-list-div").attr('src',res.data.qrcode);
                    // $(".kuaidi2 img").attr("src",res.data.barcode2)
                    // $(".kuaidi2 div").html(res.data.mailNo)
                    // console.log(res.data);
                    if(res.data.payType === "1" ) {
                        $(".payType").show();

                    }
                    // if(mailNo == '' && payType) {
                    //     $(".payType").show();
                    // }
                    debang_dy()
                } else {
                    layer.alert(res.msg, {icon: 5});
                }
            }, "json");
        }
    </script>
    <style>
        .kdd-div{
            margin-bottom: 20px;
        }
        .kdd-div-father{
            margin-bottom: 30px;
        }
    </style>
@endsection