<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<style type="text/css">
    #img_list li{
        font-size: 10px;
        /*width: 50px;*/
        text-align: left;
        margin: auto 3px;
    }
    #img_list li img{
        height: 35px;
        width: 35px;
    }
    #info_list{
        display:inline-block;
    }
    #info_list li{
        margin:8px 3px 0 5px;
    }
    #info_list li span{
        font-size: 12px;
        display: inline-block;
        /*width: 65px;*/
        text-align: center;
    }
    .grid{
        display: inline-block;
        width: 50px;
        height: 50px;
        /*margin: 12px 6px;*/
        margin-bottom: 6px;
        background-size:cover;
        background-image: url("../img/icon/空柜空闲.png");
    }
    #location span{
        display: inline-block;
        text-align: right;
        width: 50px;
        margin-right: 10px;
    }
</style>
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 select-info">
            <form id="container-form">
                <div class="select-list">
                    <ul id="select_info">
                        <li>
                            <select id="locationType" name="locationType" style="width: 100px">
                                <option value="L" selected>立库库位</option>
                                <option value="Q">钱柜库位</option>
                                <option value="DM">地面库位</option>
                            </select>
                        </li>
                        <li>
                            第
                            <select id="editable-num" name="num" style="width: 70px">
                            </select>
                        </li>
                        <li>
                            <select id="editable-select" name="col" style="width: 70px">
                                <option value="row" selected>行</option>
                                <option value="line">列</option>
                                <option value="layer">层</option>
                            </select>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="Search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12 select-info">
            <form id="receiptHeader-form">
                <div class="select-list">
                    <ul id="img_list" style="">
                        <li>
                            空柜空闲:<img src="../img/icon/空柜空闲.png">
                        </li>
                        <li>
                            空盘空闲:<img src="../img/icon/空盘空闲.png">
                        </li>
                        <li>
                            半盘空闲:<img src="../img/icon/半盘空闲.png">
                        </li>
                        <li>
                            整盘空闲:<img src="../img/icon/整盘空闲.png">
                        </li>
                        <li>
                            空柜锁定:<img src="../img/icon/空柜锁定.png">
                        </li>
                        <li>
                            空盘锁定:<img src="../img/icon/空盘锁定.png">
                        </li>
                        <li>
                            半盘锁定:<img src="../img/icon/半盘锁定.png">
                        </li>
                        <li>
                            整盘锁定:<img src="../img/icon/整盘锁定.png">
                        </li>
                        <li>
                            空柜禁用:<img src="../img/icon/空柜禁用.png">
                        </li>
                        <li>
                            空盘禁用:<img src="../img/icon/空盘禁用.png">
                        </li>
                        <li>
                            半盘禁用:<img src="../img/icon/半盘禁用.png">
                        </li>
                        <li>
                            整盘禁用:<img src="../img/icon/整盘禁用.png">
                        </li>
                    </ul><br><br>
                    <ul id="info_list">
                        <li><span>库位:</span><input type="text" id="code" disabled/></li>
                        <li><span>容器编码:</span><input type="text" id="containerCode" disabled/></li>
                        <li><span>物料信息:<select id="material" style="width: auto"><option>无</option></select></span></li>
                        <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
                        <li>
                            <a class="btn btn-success btn-rounded btn-sm" onclick="checkLocationCode()" shiro:hasPermission="inventory:inventory:seeOut"><i class="fa fa-eye"></i>&nbsp;出库查看</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12 select-info">
            <!--style="width: 100%;overflow-x: scroll;white-space:nowrap"-->
            <div id="borderCol" style="overflow-y: scroll;white-space:nowrap">
                <div class="location" id="location">
                    <!--<div class="grid"></div>-->
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var prefix = ctx + "general/location";
    var grid_row;
    var grid_line;
    var grid_layer;
    var list_info;
    var grid_rest="../img/icon/空柜空闲.png";
    var grid_empty="../img/icon/空盘空闲.png";
    var grid_half="../img/icon/半盘空闲.png";
    var grid_all="../img/icon/整盘空闲.png";
    var grid_emp_waing="../img/icon/空柜禁用.png";
    var grid_empty_waring="../img/icon/空盘禁用.png";
    var grid_half_waring="../img/icon/半盘禁用.png";
    var grid_all_waring="../img/icon/整盘禁用.png";
    var grid_emp_lock="../img/icon/空柜锁定.png";
    var grid_empty_lock="../img/icon/空盘锁定.png";
    var grid_half_lock="../img/icon/半盘锁定.png";
    var grid_all_lock="../img/icon/整盘锁定.png";
    var rel_empty="../img/icon/空.png";
    $(function() {
        resetAjax("L");

        //库位类型和行列层选择
        $("#editable-select").change(function () {
            let num=$("#editable-select").val();
            $("#editable-num").children().remove();
            if (num === "row") {
                for (let i = 1; i <= grid_row; i++) {
                    $("#editable-num").append("<option value='"+i+"'>"+i+"</option>")
                }
            }
            else if (num === "line") {
                for (let i = 1; i <= grid_line; i++) {
                    $("#editable-num").append("<option value='"+i+"'>"+i+"</option>")
                }
            }
            else if (num === "layer") {
                for (let i = 1; i <= grid_layer; i++) {
                    $("#editable-num").append("<option value='"+i+"'>"+i+"</option>")
                }
            }
        });
        $("#locationType").change(function () {
           let type=$("#locationType").val();
            resetAjax(type);
        });

        //页面初始化请求
        function resetAjax(type){
            $.ajax({
                url:prefix+"/getAllLocation",
                type:"post",
                data:{
                    type:type
                },
                success:function (res) {
                    grid_row=res.data.maxRow;
                    grid_line=res.data.maxLine;
                    grid_layer=res.data.maxLayer;
                    //初始格子
                    $("#location").children().remove();
                    $("#editable-num").children().remove();
                    for (let i = 1; i <= grid_layer; i++) {
                        // var index=i+1;<span style='margin-top:30px'>第"+ index +"行</span>
                        $(".location").append("<br>");
                        for (let j = 1; j <= grid_line; j++) {
                            $(".location").append("<img data-i='1' data-j="+j+" data-k="+ i +" class='grid' onmouseover='lays(this)' onmouseout='Mclose(this)' onclick='gridMsg(this)'>");
                        }
                    }
                    for (let t = 1; t <= grid_row; t++) {
                        $("#editable-num").append("<option value='"+t+"'>"+t+"</option>")
                    }
                    changeMargin();
                }
            });
        }

        //监听浏览器宽度的改变
        window.onresize = function(){
            changeMargin();
            border()
        };
        changeMargin();
        border()
    });

    //边框高度
    function border() {
        let box_height=$("#borderCol").offset().top;
        let window_height=$(window).height()-20;
        $("#borderCol").css({"height":window_height-box_height});
    }

    //格子宽度
    function changeMargin() {
        let box_width=document.getElementById("location").offsetWidth;
        box_width=box_width-80;
        let num=$("#editable-select").val();
        let grid_width;
        if (num === "layer" || num === "row") {
            grid_width=box_width/grid_line;
        }
        else if (num === "line") {
            grid_width=box_width/grid_row;
        }
        if (grid_width >= 50) {
            $(".grid").css({"width":"50px","height":"50px"});
        }
        else if (grid_width <= 20) {
            $(".grid").css({"width":"20px","height":"20px"});
        }
        else {
            $(".grid").css({"width":grid_width,"height":grid_width});
        }
    }

    //tips信息
    function lays(x) {
        let $j=$(x);
        let row=$j.attr("data-i");
        let line=$j.attr("data-j");
        let layers=$j.attr("data-k");
        row=parseInt(row);
        line=parseInt(line);
        layers=parseInt(layers);
        if (list_info) {
            for (let i = 0; i < list_info.length; i++) {
                if (list_info[i].row === row && list_info[i].line === line && list_info[i].layer === layers) {
                    let str_info='';
                    let container_code='';
                    if (list_info[i].containerCode) {
                        container_code="<br>容器编码:"+ list_info[i].containerCode+"";
                        if (list_info[i].materialName) {
                            for (let j = 0; j < list_info[i].materialName.length; j++) {
                                let list_batch=list_info[i].batch[j]===null?"无":list_info[i].batch[j]===""?"无":list_info[i].batch[j];
                                str_info=str_info + "<br>批次:"+ list_batch +",物料名称:"+ list_info[i].materialName[j] +",物料编码:"+ list_info[i].materialCode[j] +
                                    ",数量:"+ list_info[i].qty[j] +""
                            }
                        }
                    }
                    let code=list_info[i].code===null?"无":list_info[i].code;
                    layer.tips("第"+row+"行,第"+line+"列,第"+ layers +"层<br>库位:"+ code + container_code + str_info + ""
                        ,$j,{tips:[1,"rgb(28,132,198)"],time:0,area:'auto',maxWidth: '1000'});
                }
            }
        }else {return ""}
    }

    //关闭tips
    function Mclose(x) {
        let index = layer.tips();
        layer.close(index);
    }

    //搜索平面库位
    function Search() {
        let index=$("#editable-select").val();
        let num=$("#editable-num").val();
        let locationType=$("#locationType").val();
        $("#code").val("");
        $("#containerCode").val("");
        $("#material").children().remove();
        $("#material").append("<option>无</option>");
        let data;
        if (index === "row") {
            data={type:locationType, row:num};
            $("#location").children().remove();
            for (let i = 1; i <= grid_layer; i++) {
                $(".location").append("<br><span>第"+ i+"层</span>");
                for (let j = 1; j <= grid_line; j++) {
                    $(".location").append("<img data-i="+num+" data-j="+j+" data-k="+i+" class='grid' onmouseover='lays(this)' onmouseout='Mclose(this)' onclick='gridMsg(this)'>");
                }
            }
            changeMargin();
            ajaxGrid(index,data);
        }
        else if (index === "line") {
            data={type:locationType, line:num};
            $("#location").children().remove();
            for (let k = 1; k <= grid_layer; k++) {
                $(".location").append("<br><span>第"+ k+"层</span>");
                for (let l = 1; l <= grid_row; l++) {
                    $(".location").append("<img data-i="+l+" data-j="+num+" data-k="+k+" class='grid' onmouseover='lays(this)' onmouseout='Mclose(this)' onclick='gridMsg(this)'>");
                }
            }
            changeMargin();
            ajaxGrid(index,data);
        }
        else if (index === "layer") {
            data={type:locationType, layer:num};
            $("#location").children().remove();
            for (let m = 1; m <= grid_row; m++) {
                $(".location").append("<br><span>第"+ m+"行</span>");
                for (let n = 1; n <= grid_line; n++) {
                    $(".location").append("<img data-i="+m+" data-j="+n+" data-k="+num+" class='grid' onmouseover='lays(this)' onmouseout='Mclose(this)' onclick='gridMsg(this)'>");
                }
            }
            changeMargin();
            ajaxGrid(index,data);
        }
    }
    
    //库位信息请求和状态显示
    function ajaxGrid(x, info) {
        let load=layer.msg('加载中', {icon: 16,shade: 0.4,time: false});
        $.ajax({
            url:prefix+"/getLocationInfo",
            type:"post",
            data:info,
            success:function (res) {
                if (res.code===200||res.data||res.msg==="成功") {
                    if (x === "row") {
                        for (let i = 0; i < res.data.length; i++) {
                            let index=res.data[i].line+((res.data[i].layer-1)*grid_line);
                            index=index-1;
                            resShow(res,index,i);
                        }
                        clearLocation(grid_line,grid_layer);
                        layer.close(load);
                    }
                    else if (x === "line") {
                        for (let i = 0; i < res.data.length; i++) {
                            let index=res.data[i].row+((res.data[i].layer-1)*grid_row);
                            index=index-1;
                            resShow(res,index,i);
                        }
                        clearLocation(grid_row,grid_layer);
                        layer.close(load);
                    }
                    else if (x === "layer") {
                        for (let i = 0; i < res.data.length; i++) {
                            let index=res.data[i].line+((res.data[i].row-1)*grid_line);
                            index=index-1;
                            resShow(res,index,i);
                        }
                        clearLocation(grid_line,grid_row);
                        layer.close(load);
                    }
                }
                else if (res.msg !== "成功"||res.code!==200) {
                    layer.close(load);
                    layer.open({
                        title: '错误',
                        content: res.msg
                    });
                }
                list_info=res.data;
            },
            error:function (req, msg) {
                console.log(msg);
            }
        })
    }

    //库位请求的结果显示
    function resShow(res, index ,i) {
                if (res.data[i].deleted === false) {
                    if (res.data[i].userDef3 === "1") {
                        $(".grid").eq(index).attr({"src": grid_rest, "isTrue": 1});
                    } else if (res.data[i].userDef3 === "2") {
                        $(".grid").eq(index).attr({"src": grid_empty, "isTrue": 1});
                    } else if (res.data[i].userDef3 === "3") {
                        $(".grid").eq(index).attr({"src": grid_half, "isTrue": 1});
                    } else if (res.data[i].userDef3 === "4") {
                        $(".grid").eq(index).attr({"src": grid_all, "isTrue": 1});
                    } else if (res.data[i].userDef3 === "5") {
                        $(".grid").eq(index).attr({"src": grid_emp_lock, "isTrue": 1});
                    } else if (res.data[i].userDef3 === "6") {
                        $(".grid").eq(index).attr({"src": grid_empty_lock, "isTrue": 1});
                    } else if (res.data[i].userDef3 === "7") {
                        $(".grid").eq(index).attr({"src": grid_half_lock, "isTrue": 1});
                    } else if (res.data[i].userDef3 === "8") {
                        $(".grid").eq(index).attr({"src": grid_all_lock, "isTrue": 1});
                    } else if (res.data[i].userDef3 === "9") {
                        $(".grid").eq(index).attr({"src": grid_emp_waing, "isTrue": 1});
                    } else if (res.data[i].userDef3 === "10") {
                        $(".grid").eq(index).attr({"src": grid_empty_waring, "isTrue": 1});
                    } else if (res.data[i].userDef3 === "11") {
                        $(".grid").eq(index).attr({"src": grid_half_waring, "isTrue": 1});
                    } else if (res.data[i].userDef3 === "12") {
                        $(".grid").eq(index).attr({"src": grid_all_waring, "isTrue": 1});
                    }
                }
                else if (res.data[i].deleted === true) {
                    $(".grid").eq(i).attr({"src": rel_empty, "onmouseover": "", "onclick": ""});
                }
    }

    //清除将数据库中没有的库位
    function clearLocation(x, y) {
        for (let j = 0; j < x * y; j++) {
            let sta=$(".grid").eq(j).attr("isTrue");
            if (sta !== "1") {
                $(".grid").eq(j).attr({"src": rel_empty,"onmouseover": "","onclick": ""});
            }
        }
    }

    //点击显示当前库位信息
    function gridMsg(msg) {
        let $j=$(msg);
        let row=$j.attr("data-i");
        let line=$j.attr("data-j");
        let layers=$j.attr("data-k");
        row=parseInt(row);
        line=parseInt(line);
        layers=parseInt(layers);
        if (list_info) {//缓存查询
            for (let i = 0; i < list_info.length; i++) {
                if (list_info[i].row === row && list_info[i].line === line && list_info[i].layer === layers) {
                    if (list_info[i].materialName) {
                        $("#material").children().remove();
                        for (let j = 0; j < list_info[i].materialName.length; j++) {
                            let list_batch=list_info[i].batch[j]===null?"无":list_info[i].batch[j]===""?"无":list_info[i].batch[j];
                            let str_info="批次:"+ list_batch +"/ 物料名称:"+ list_info[i].materialName[j] +"/ 物料编码:"+ list_info[i].materialCode[j] +
                                "/ 数量:"+ list_info[i].qty[j] +"";
                            $("#material").append("<option>"+ str_info +"</option>");
                        }
                    }
                    else {
                        $("#material").children().remove();
                        $("#material").append("<option>无</option>");
                    }
                    $("#code").val(list_info[i].code);
                    $("#containerCode").val(list_info[i].containerCode===""?"无":list_info[i].containerCode);
                }
            }
        }else {return ""}
        //接口查询
        // $.ajax({
        //     url:prefix+"/getLocationInfo",
        //     type:"post",
        //     data:{
        //         type:"L",
        //         row:row,
        //         line:line,
        //         layer:layers,
        //         grid:1
        //     },
        //     success:function (res) {
        //         $("#row_info").val(res.data[0].row);
        //         $("#line_info").val(res.data[0].line);
        //         $("#layer_info").val(res.data[0].layer);
        //         $("#id").val(res.data[0].id);
        //         $("#code").val(res.data[0].code);
        //         $("#warehouseId").val(res.data[0].warehouseId);
        //         $("#warehouseCode").val(res.data[0].warehouseCode);
        //         $("#rowIndex").val(res.data[0].rowIndex);
        //         $("#roadway").val(res.data[0].roadway);
        //         $("#type").val(res.data[0].type);
        //         $("#containerId").val(res.data[0].containerId);
        //         $("#containerCode").val(res.data[0].containerCode);
        //         $("#zoneId").val(res.data[0].zoneId);
        //         $("#zoneCode").val(res.data[0].zoneCode);
        //         $("#status").val(res.data[0].userDef3);
        //         $("#lastCycleCountDate").val(res.data[0].lastCycleCountDate);
        //         $("#created").val(res.data[0].created);
        //         $("#createdBy").val(res.data[0].createdBy);
        //         $("#lastUpdated").val(res.data[0].lastUpdated);
        //         $("#lastUpdatedBy").val(res.data[0].lastUpdatedBy);
        //         $("#enable").val(res.data[0].enable);
        //     }
        // });
    }

    //出库查看
    function checkLocationCode() {
        let data = $("#code").val();
        if (data) {
            $.modal.loading("正在处理中,请稍后...");
            $.ajax({
                url:prefix + "/checkLocationCode",
                type:'post',
                datatype:'json',
                data:{
                    locationCode:data
                },
                success: function (result) {
                    if (result.code == web_status.SUCCESS) {
                        $.modal.msgSuccess(result.msg);
                    } else {
                        $.modal.alertError(result.msg)
                    }
                    $.modal.closeLoading()
                }
            })
        }
        else{
            layer.tips('请选择库位!',$("#code"),{tips:[1,"rgb(28,132,198)"],time:3000,area:'auto',maxWidth: '1000'})
        }
    }
</script>
</body>
</html>