<style>
    .dashboard-title .links {
        text-align: center;
        margin-bottom: 2.5rem;
    }
    .dashboard-title .links > a {
        width: 25%;
        padding: 0 1rem;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .1rem;
        text-decoration: none;
        text-transform: uppercase;
        color: #fff;
    }
    .dashboard-title h1 {
        font-weight: 200;
        font-size: 2.5rem;
    }
    .dashboard-title .avatar {
        background: #fff;
        border: 2px solid #fff;
        width: 70px;
        height: 70px;
    }

    /* 隐藏头部 */
    .content-header {
        display: none !important;
    }
    /* 隐藏底部 */
    .main-footer{
        display: none !important;
    }
    /* 隐藏图标 */
    /* .navbar-brand {
        display: none !important;
    } */
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
    tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    #video-container {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: #000;
        z-index: 1;
    }
    #scan-overlay {
        position: absolute;
        top: 30%;
        left: 1%;
        width: 98%;
        height: 30%;
        border: 2px dashed rgba(255,255,255,0.7);
        z-index: 2;
        pointer-events: none;
    }
    .btn-group {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 15px;
        z-index: 3;
    }
    /* 表格响应式优化 */
    @media (max-width: 768px) {
        table {
            font-size: 16px;
        }
        th, td {
            padding: 4px;
        }
    }
    .scan-button{
        position: relative;
        overflow: hidden;
    }



    .scan-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.9);
        z-index: 9999;
        display: none;
    }
    .scan-content {
        position: relative;
        width: 100%;
        height: 70vh;
        margin-top: 15vh;
    }
    #video-container {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #scan-overlay {
        position: absolute;
        top:30%;
        left:5%;
        bottom:30%;
        width: 90%;
        /* height: 30%; */
        border: 2px dashed rgba(255,255,255,0.7);
        pointer-events: none;
    }
    .close-scan {
        position: absolute;
        top: 5px;
        right: 10px;
        color: white;
        font-size: 60px;
        cursor: pointer;
        z-index: 100;
    }
    .scan-input {
        margin-bottom: 10px;
    }
    #spid {
        width: 180px;
        height: 35px;
        margin-right: 10px;
    }
    .table tr td:first-child, .table tr th:first-child {
        padding-left: 0rem;
    }
    .navbar-fixed-top .content-wrapper {
        padding-top: 5.5rem;
    }
    .table td {
        padding: 0.1rem;
        height: 3rem;
        line-height: 1.42857;
        border-color: #f0f0f0;
    }
    
    /* 底部弹窗专属样式 */
    .layui-layer-bottom {
        border-radius: 10px 10px 0 0 !important;
        bottom: 0 !important;
        top: auto !important;
    }
    /* 移动端适配 */
    @media screen and (max-width: 768px) {
        .layui-layer.layui-layer-bottom {
            width: 100% !important;
            left: 0 !important;
        }
    }
</style>
<div class="scan-input"  style="display: flex; flex-direction: column; gap: 10px;">
    <div>
        <label>属性一:</label>
        <input id="sx1" list='sx1_info' name="sx1" value=""  type="text">
        <datalist id="sx1_info">
            <?php if(!empty($data1)): ?>
                <?php $__currentLoopData = $data1; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $k=>$v): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($v->LXMC, false); ?>"><?php echo e($v->LXMC, false); ?></option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            <?php endif; ?>
        </datalist>
    </div>
    <div>
        <label>属性二:</label>
        <input id="sx2" list='sx2_info' name="sx2" value=""  type="text">
        <datalist id="sx2_info">
            <?php if(!empty($data2)): ?>
                <?php $__currentLoopData = $data2; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $k=>$v): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <option value="<?php echo e($v->LXMC, false); ?>"><?php echo e($v->LXMC, false); ?></option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            <?php endif; ?>
        </datalist>
    </div>
    <button class="btn btn-primary" id="cx">查询</button>
</div>
<div id="table" style="margin-top: 1rem;width: 100%;">
</div>

<!-- 核心文件 -->
<link href="<?php echo e(URL::asset('bootstrap-table/bootstrap-table.min.css'), false); ?>" rel="stylesheet">
<link href="<?php echo e(URL::asset('bootstrap-table/bootstrap-table-fixed-columns.css'), false); ?>" rel="stylesheet">
<script type="text/javascript" src="<?php echo e(URL::asset('js/quagga.min.js'), false); ?>"></script>
<script type="text/javascript" src="<?php echo e(URL::asset('bootstrap-3.3.7/js/bootstrap.min.js'), false); ?>"></script>
<script type="text/javascript" src="<?php echo e(URL::asset('bootstrap-table/bootstrap-table.js'), false); ?>"></script>
<script type="text/javascript" src="<?php echo e(URL::asset('bootstrap-table/bootstrap-table-fixed-columns.js'), false); ?>"></script>
<script type="text/javascript" src="<?php echo e(URL::asset('bootstrap-table/bootstrap-select.min.js'), false); ?>"></script>

<script>
Dcat.ready(function() {
    function getColumn (data){
        if(data == []){
            return [];
        }
        return data.map(key => ({
                field: key,
                title: key,
                align: 'center',
                valign: 'middle',
            }));
    }
    $("#cx").click(function (){
        $("#table").html('');
        var table1Html = "<table class='table-sm' id='table2'></table>";
        $("#table").append(table1Html);
        var sx1 = $('#sx1').val(),
            sx2 = $('#sx2').val();
        $.ajax({
            url: 'searchHz',
            method: 'POST',
            data: { sx1: sx1,sx2: sx2,_token: Dcat.token },
            success: function (res){
                layer.msg(res.msg,{time: 1000,offset: 'auto'});
                if(!res.error){
                    var sp_data = res.data != []?Object.keys(res.data[0]):[];
                    var sp_options = {
                        showLoading: false,
                        responsive: true,
                        data: '',
                        columns: [],
                        //设置没数据时提示语
                        formatNoMatches: function() {
                            return '没有数据';
                        },
                    };
                    sp_options.data = res.data;
                    sp_options.columns = getColumn(sp_data);
                    $("#table2").bootstrapTable(sp_options);
                    $("#table2").bootstrapTable('hideLoading');
                    $('#table2').on('click-row.bs.table', function(e, row, $element) {
                        layer.open({
                            type: 1,
                            title: false,
                            content: '<div style="padding:20px;">明细<table id="innerTable" lay-filter="table"></table></div>',
                            area: ['100%', '70%'], // 宽度100%，高度占屏幕50%
                            offset: 'b', // 从底部弹出
                            shadeClose: true, // 点击遮罩关闭
                            shade: 0.5, // 半透明遮罩
                            scrollbar: false, // 禁止页面滚动
                            skin: 'layui-layer-bottom', // 自定义底部样式类
                            success: function(layero) {
                                var info = JSON.stringify(row);
                                $.ajax({
                                    url: 'searchMx',
                                    method: 'POST',
                                    data: {info:info,_token: Dcat.token},
                                    success: function(result){
                                        var sp_options = {
                                            showLoading: false,
                                            responsive: true,
                                            data: '',
                                            columns: [],
                                            //设置没数据时提示语
                                            formatNoMatches: function() {
                                                return '没有数据';
                                            },
                                        };
                                        sp_options.data = result.data;
                                        sp_options.columns = result.data != []?getColumn(Object.keys(result.data[0])):[];
                                        $("#innerTable").bootstrapTable(sp_options);
                                        $("#innerTable").bootstrapTable('hideLoading');
                                        $("#innerTable").on('click-row.bs.table', function(e, row, $element) {
                                            // layer.msg('维护中...',{time: 1000,offset: 'auto'});
                                            // window.open(path+'/admin/dh?' + params.toString(), '_blank');
                                            const url = new URL(window.location.href);
                                            var path = `${url.protocol}//${url.hostname}:${url.port}`;
                                            const params = new URLSearchParams();
                                            params.append('code', row.商品编码);
                                            window.open(path+'/admin/dh?' + params.toString(), '_blank');
                                        });
                                    },
                                });
                                // 适配移动端滚动
                                layero.find('.layui-layer-content').css('overflow-y', 'auto');
                                layero.find('.layui-layer-min').css('display', 'none');
                            }
                        });
                        $('.table-success').removeClass('table-success');
                        $element.addClass('table-success');
                    });
                }
            },
        });
    });
});
</script>
<?php /**PATH D:\phpstudy_pro\WWW\qr250\resources\views/hz.blade.php ENDPATH**/ ?>