layui.use(['table', 'laydate', 'form'], function(){
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;

    // 初始加载
    loadRowsOptions();       // 加载「排」选项（始终需要）
    loadLayersOptions();     // 加载「层」选项（提前准备）
    getLocTable('byRow', 1); // 默认按排 + 第1排

    // 加载所有可用排
    function loadRowsOptions() {
        $.ajax({
            url: baseUrl + "/report/viewLocMapList/rows.action",
            headers: {'token': localStorage.getItem('token')},
            method: 'POST',
            async: false,
            success: function (res) {
                if (res.code === 200) {
                    var tpl = $("#locMastRowTemplate").html();
                    var template = Handlebars.compile(tpl);
                    $('#rowSelect').append(template(res));
                    form.render('select');
                } else if (res.code === 403) {
                    top.location.href = baseUrl + "/";
                }
            }
        });
    }

    // 加载所有可用层（需要后端支持新接口）
    function loadLayersOptions() {
        $.ajax({
            url: baseUrl + "/report/viewLocMapList/layers.action",  // ← 需要新增接口
            headers: {'token': localStorage.getItem('token')},
            method: 'POST',
            async: false,
            success: function (res) {
                if (res.code === 200) {
                    var tpl = $("#locMastRowTemplate").html(); // 复用模板
                    var template = Handlebars.compile(tpl);
                    $('#layerSelect').append(template(res));
                    form.render('select');
                }
            }
        });
    }

    // 核心：根据模式加载库位表
    function getLocTable(mode, value) {
        var url = baseUrl + "/report/viewLocMapList.action";
        var data = {};

        if (mode === 'byRow') {
            data.row = value;
        } else if (mode === 'byLayer') {
            data.layer = value;
        }
        $.ajax({
            url: url,
            headers: {'token': localStorage.getItem('token')},
            data: data,
            method: 'POST',
            success: function (res) {
                if (res.code === 200) {
                    var tpl = $("#locMapTemplate").html();
                    var template = Handlebars.compile(tpl);
                    $('#locMap').html(template(res.data));
                } else if (res.code === 403) {
                    top.location.href = baseUrl + "/";
                } else {
                    layer.msg(res.msg || '加载失败');
                }
            }
        });
    }

    // 监听 显示模式 切换
    form.on('select(viewMode)', function (data) {
        var mode = data.value;

        if (mode === 'byRow') {
            $('#rowSelectBox').show();
            $('#layerSelectBox').hide();
            // 读取当前选中的排
            var currentRow = $('#rowSelect').val() || 1;
            getLocTable('byRow', currentRow);
        } else if (mode === 'byLayer') {
            $('#rowSelectBox').hide();
            $('#layerSelectBox').show();
            var currentLayer = $('#layerSelect').val() || 1;
            getLocTable('byLayer', currentLayer);
        }
    });

    // 监听 排 变化
    form.on('select(row)', function (data) {
        if ($('#viewMode').val() === 'byRow') {
            getLocTable('byRow', data.value);
        }
    });

    // 监听 层 变化
    form.on('select(layer)', function (data) {
        if ($('#viewMode').val() === 'byLayer') {
            getLocTable('byLayer', data.value);
        }
    });
});