<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta name="decorator" content="base"/>
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/static/css/reset.css">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.css" media="all">
    <style>
        html {
        background-color: #fff;
        padding-bottom: 50px;
    }
    #modelRadio{
        display: none;
    }
    </style>
</head>

<body>
<div class="layui-form">
    <div class="layui-card">


        <div class="layui-col-xs12 mb-10 pr-30">
            <div class="layui-inline layui-col-xs6">
                <label class="layui-form-label w-130"><i class="red">*</i>物料代码：</label>
                <div class="layui-input-block ">
                    <input type="text" name="code" lay-verify="required" autocomplete="off" placeholder="请输入"
                           class="layui-input" value="${mate.code}">
                </div>
            </div>
            <div class="layui-inline layui-col-xs6">
                <label class="layui-form-label w-130"><i class="red">*</i>物料名称：</label>
                <div class="layui-input-block  w-200">
                    <input type="text" name="materialName" lay-verify="required" autocomplete="off" placeholder="请输入"
                           class="layui-input" value="${mate.materialName}">
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 mb-10 pr-30">
            <%--<div class="layui-inline layui-col-xs6">
                <label class="layui-form-label w-130"><i class="red">*</i>物料组：</label>
                <div class="layui-input-block ">
                    <select name="materialGroupId" id="materialGroupId" lay-verify="required">
                        <option value="">请选择</option>
                        <c:forEach items="${groups}" var="gro">
                            <option value="${gro.columns.id}">${gro.columns.name}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>--%>
                <div class="layui-inline layui-col-xs6">
                    <label class="layui-form-label w-130"><i class="red">*</i>物料类型：</label>
                    <div class="layui-input-block">
                        <select name="materialTypeId" id="materialTypeId" lay-verify="required" lay-filter="materialTypeId" >
                            <option value="">请选择</option>
                            <c:forEach items="${types}" var="ty">
                                <option value="${ty.columns.id}" data-value="${ty.columns.attribute}">${ty.columns.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>

                <div class="layui-inline layui-col-xs6">
                    <label class="layui-form-label w-130"><i class="red">*</i>物料规格：</label>
                    <div class="layui-input-block  w-200">
                        <input type="text" name="materialSpecs" id="materialSpecs" lay-verify="required" autocomplete="off" placeholder="请输入"
                               class="layui-input" value="${mate.materialSpecs}">
                    </div>
                </div>

        </div>
        <div class="layui-col-xs12 mb-10 pr-30">
            <div class="layui-inline layui-col-xs6">
                <label class="layui-form-label w-130"><i class="red">*</i>物料型号：</label>
                <div class="layui-input-block  w-200">
                    <input id="materialModel" type="text" name="materialModel" lay-verify="required" autocomplete="off" placeholder="请输入"
                           class="layui-input" value="${mate.materialModel}">
                </div>
            </div>
            <div class="layui-inline layui-col-xs6">
                <label class="layui-form-label w-130"><i class="red">*</i>物料品牌：</label>
                <div class="layui-input-block w-200">
                    <select name="materialBrandId" id="materialBrandId" lay-verify="required">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>

     <%--       <div class="layui-inline layui-col-xs6">
                <label class="layui-form-label w-130"><i class="red">*</i>单位：</label>
                <div class="layui-input-block w-200">
                    <input type="text" name="unit" lay-verify="required" autocomplete="off" placeholder="请输入"
                           class="layui-input" value="${mate.unit}">
                </div>
            </div>--%>
        </div>
        <div class="layui-col-xs12 mb-10 pr-30">
            <div class="layui-inline layui-col-xs6">
                <label class="layui-form-label w-130"><i class="red">*</i>库存单位：</label>
                <div class="layui-input-block">
                    <select name="unitCode" id="unitCode" lay-verify="required">
                        <option value="">请选择</option>

                    </select>
                </div>
            </div>

            <div class="layui-inline layui-col-xs6">
                <label class="layui-form-label w-130"><i class="red">*</i>外部编码：</label>
                <div class="layui-input-block  w-200">
                    <input id="qqCode" type="text" name="qqCode" lay-verify="required" autocomplete="off" placeholder="请输入"
                           class="layui-input" value="${mate.qqCode}">
                </div>
            </div>


        </div>


     <%--   <div class="layui-col-xs12 mb-10 pr-30 hide" >
            <div class="layui-inline layui-col-xs6">
                <label class="layui-form-label w-130">金蝶属性：</label>
                <div class="layui-input-block">
                    <select name="materialProperties" id="materialProperties"  >
                        <option value="1" selected>外购</option>
                        <option value="6">服务</option>
                    </select>
                </div>
            </div>
        </div>--%>
        <div class="layui-col-xs12 mb-10 pr-30">
            <div class="layui-inline layui-col-xs6">
                <label class="layui-form-label w-130" style="white-space: nowrap;"><i class="red">*</i>最小发货单位：</label>
                <div class="layui-input-block w-200">
                    <input type="number" name="minApplyAmount" id="minApplyAmount"
                           autocomplete="off" placeholder="请输入" lay-verify="required" min="1"
                           class="layui-input" value="1">
                </div>
            </div>
        </div>

        <div class="layui-col-xs12 layui-form-item">
            <label class="layui-form-label">物料描述：</label>
            <div class="layui-input-block">
                <textarea name="remarks" id="remarks" placeholder="" class="layui-textarea" style="width: 96%"></textarea>
            </div>
        </div>

    </div>
    <div class="operate-footer">
        <input type="button" lay-submit lay-filter="confirm" id="confirm" class="layui-btn " value="确认">
        <input type="button" value="取消" class="layui-btn layui-btn-primary " onclick="closeDiv();">
    </div>
</div>

<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
    //初始数据
    var $form;
    var form;
    var $;
    var imgs = '';
    var myreg = /^[0-9]*$/;
    var reg = /\./;
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['form', 'layedit', 'laydate', 'jquery', 'layer'], function () {
        $ = layui.jquery;
        form = layui.form;
        $form = $('form');

        var saveFlag = false;
        form.on('submit(confirm)', function (data) {
            if(saveFlag){
                return false;
            }
            var materialAttribute = $("#materialTypeId").find("option:selected").attr("data-value");
            data.field.materialAttribute = materialAttribute;
            var materialTypeName = $("#materialTypeId").find("option:selected").text();
            if('组件'==materialTypeName){   //物料类型为组件时，物料规格必须是纯数字。
               var spec=$("#materialSpecs").val();
              if(!myreg.test($.trim(spec))){
                  layer.msg("物料类型为组件时，物料规格必须是纯数字", {time: 3000});
                  return false;
              }
            }
            var materialBrand=$("#materialBrandId").find("option:selected").attr("data-value");
            data.field.materialBrand=materialBrand;

            var unitName = $("#unitCode").find("option:selected").text();
            data.field.unitName=unitName;

            var minApplyAmount = $("#minApplyAmount").val();
            if(reg.test($.trim(minApplyAmount))){
                layer.msg("物料最小发货单位必须是纯数字", {time: 3000});
                return false;
            }
            if(minApplyAmount <= 0){
                layer.msg("物料最小发货单位必须为正整数",{time:3000})
                return false;
            }
            data.field.minApplyAmount = minApplyAmount;

            saveFlag=true;
            var index= layer.load(2, {shade: [0.5,'#fff'], content:''});
            console.log(data)
            $.ajax({
                url: '${ctx}/material/saveMaterial',
                method: 'post',
                data: data.field,
                dataType: 'JSON',
                success: function (res) {
                    if (res.code == "200") {
                        parent.layer.msg("保存成功", {time: 1000});
                        closeDiv();
                        parent.table.reload('test');
                    } else if (res.code == "2004") {
                        layer.msg("该物料代码已存在，不可重复添加!", {time: 1500});
                        saveFlag = false;
                    } else {
                        layer.msg(res.errMsg, {time: 1000});
                        saveFlag = false;
                    }
                },complete: function () {
                    layer.close(index);
                },
                error: function (data) {
                }
            });
        });

        form.on('select(materialTypeId)', function(data){
            var typeId = $(data.elem).find("option:selected").val();

            if(isBlank(typeId)){
                $("#unitCode").empty();
                $("#materialBrandId").empty();
                form.render('select');
                return;
            }
            //当物料类型为3（组件）时，显示组件玻型和电池参数
            if(typeId == 3){
                $("#modelRadio").show();
            }else{
                $("#modelRadio").hide();
            }
            $.ajax({
                url: '${ctx}/crmSupplyMaterialSetting/getListByTypeId',
                type: 'GET',
                data: {
                    typeId: typeId
                },
                success: function(data) {
                   /* if(isBlank(data)){
                        layer.msg("暂无数据!");
                        $("#unitCode").empty();
                        form.render('select');
                        return
                    }*/
                    $("#materialBrandId").empty();
                    let html = '<option value="">请选择</option>';
                    for (let i = 0; i < data.length; i++) {
                        let brand = data[i];
                        html += '<option value="' + brand.columns.id + '" data-value="' + brand.columns.name + '">' + brand.columns.name + '</option>';
                    }
                    $("#materialBrandId").append(html);
                    form.render('select');
                },
                complete:function(){

                }
            });
            $.ajax({
                url: '${ctx}/crmSupplyMaterialSetting/getMaterialUnitByTypeId',
                type: 'post',
                data: {
                    typeId: typeId
                },
                success: function(data) {
                    if(isBlank(data)){
                        layer.msg("暂无数据!");
                        $("#unitCode").empty();
                        form.render('select');
                        return
                    }
                    $("#unitCode").empty();
                    var html ="";
                    for(var i=0;i<data.length;i++){
                        var type = data[i];
                        html =html+ '<option value="'+type.columns.unit_code+'" >'+type.columns.name+'</option>';
                    }
                    $("#unitCode").append(html);
                    form.render('select');
                },
                complete:function(){

                }
            });
        });

    })

    function closeDiv() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index);
    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }


</script>
</body>
</html>
