<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>备件信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="decorator" content="base"/>
    <link rel="stylesheet" type="text/css" href="${ctxPlugin}/static/css/reset.css"/>
    <style>
        .layui-form-selected dl {
            height: 200px;
        }
        html {
            background-color: #fff;
        }
    </style>
</head>
<body>
<div class="layui-card md-0 layui-form" lay-filter="layuiadmin-form-admin">
    <div class="layui-card-body">
            <div class="layui-form-item layui-col-xs12 ">
                <input hidden name="id" value="${warehouse.id}">
                <div class="layui-col-xs8 mb-5">
                    <label class="layui-form-label"><i class="mark ">*</i>仓库名称：</label>
                    <div class="layui-input-block">
                        <input type="text" id="name" name="name" class="layui-input " lay-verify="required"
                               value="${warehouse.name}">
                    </div>
                </div>
                <div class="layui-col-xs4 mb-5">
                    <label class="layui-form-label"><i class="mark ">*</i>仓库属性：</label>
                    <div class="layui-input-block">
                        <select class="attribute" id="attribute" name="attribute"
                                lay-filter="attribute"  lay-verify="required">
                            <option value="">请选择仓库属性</option>
                            <option value="1" <c:if test="${warehouse.attribute eq '1'}" >selected</c:if> >自有仓库</option>
                            <option value="2" <c:if test="${warehouse.attribute eq '2'}" >selected</c:if>>租赁仓库</option>
                        </select>
                    </div>
                </div>

                <input hidden name="ascriptionName" value="${warehouse.ascriptionName}">

                <div class="layui-col-xs6 mb-5">
                    <label class="layui-form-label"><i class="mark ">*</i>接货人：</label>
                    <div class="layui-input-block">
                        <input type="text" name="personInCharge" id="personInCharge" class="layui-input "
                               lay-verify="required" value="${warehouse.personInCharge}">
                    </div>
                </div>
                <div class="layui-col-xs6 mb-5">
                    <label class="layui-form-label"><i class="mark ">*</i>联系方式：</label>
                    <div class="layui-input-block">
                        <input type="text" id="mobile" name="mobile" class="layui-input " lay-verify="telephone"
                               value="${warehouse.mobile}">
                    </div>
                </div>

                <div class="layui-col-xs12 mb-5">
                    <label class="layui-form-label"><i class="red">*</i>仓库地址：</label>
                    <div class="layui-input-block ml-130">
                        <div class="layui-col-xs4 pr-20">
                            <select class="province" id="province" name="province"
                                    lay-filter="province" lay-search lay-verify="required">
                                <option value="">请选择省</option>
                                <c:forEach items="${province}" var="pro">
                                    <option value="${pro.columns.ProvinceName}" title="${pro.columns.ProvinceID}"
                                            <c:if test="${warehouse.province == pro.columns.ProvinceName}">selected</c:if>>${pro.columns.ProvinceName}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="layui-col-xs4 pr-20">
                            <select class="city" name="city" id="city" lay-filter="city" lay-search
                                    lay-verify="required">
                                <option value="">请选择市</option>
                                <c:forEach items="${city}" var="cityList">
                                    <option value="${cityList.columns.CityName}" title="${cityList.columns.CityID}"
                                            <c:if test="${warehouse.city==cityList.columns.CityName}">selected</c:if>>${cityList.columns.CityName}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="layui-col-xs4">
                            <select class="area" name="area" id="area" lay-filter="area" lay-search
                                    lay-verify="required">
                                <option value="">请选择县/区</option>
                                <c:forEach items="${area}" var="areaList">
                                    <option value="${areaList.columns.DistrictName}"
                                            <c:if test="${warehouse.area==areaList.columns.DistrictName}">selected</c:if>>${areaList.columns.DistrictName}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="layui-col-xs12 mt-10">
                            <input type="text" id="detailAddress" name="address"
                                   class="layui-input layui-col-lg2"
                                   value="${warehouse.address}" lay-verify="required">
                        </div>
                    </div>
                </div>

                <div class="layui-col-xs4  mb-5">
                    <label class="layui-form-label">
                        授权委托书：<br>
                        <%--<p style="margin-right: 25px"><a style="color:#D9B589;"  href="https://sky-energy.oss-cn-beijing.aliyuncs.com/energy_img/prohibitDeletion/%E4%BB%A3%E7%90%86%E5%95%86%E6%94%B6%E8%B4%A7%E4%BA%BA%E6%8E%88%E6%9D%83%E5%A7%94%E6%89%98%E4%B9%A6.docx" style="line-height: 28px; font-size: 12px; margin-left: 10px; color: #0099ff">模板下载</a></p>--%>
                    </label>
                    <div class="layui-input-block">
                        <div id="imgsDiv">
                            <c:if test="${not empty warehouse.imgs}">
                                <div class="bj-img imgSpan">
                                    <span class="layui-icon-close layui-icon" onclick="delImg(this,'imgs')"></span>
                                    <img src="${commonStaticImgPath}${warehouse.imgs}" height="700" width="1200">
                                    <input type="hidden" class="imgPicker" value="${warehouse.imgs}">
                                </div>
                            </c:if>
                        </div>

                            <div class="upload-container" id="uploader" <c:if test="${not empty warehouse.imgs}">hidden</c:if>>
                                <img src="" alt="img placeholder" id="imgsAdd">
                            </div>
                    </div>
                </div>

                <div class="layui-col-xs4  mb-5">
                    <label class="layui-form-label ">产权证书：
                        <%--<br/><a href="https://sky-energy.oss-cn-beijing.aliyuncs.com/prohibit_delete/%E7%A4%BA%E4%BE%8B%E5%9B%BE/%E4%B8%8D%E5%8A%A8%E4%BA%A7%E7%99%BB%E8%AE%B0%E8%AF%81%E6%98%8E%E7%A4%BA%E4%BE%8B.png" style="font-size: 12px;color: red;margin-right: 5px;">(下载示例图)</a>--%>
                    </label>
                    <div class="layui-input-block">
                        <div id="evidenceImgsDev">
                            <c:if test="${not empty warehouse.evidence}">
                                    <div class="bj-img imgSpan">
                                        <span class="layui-icon-close layui-icon" onclick="delImg(this,'uploaderEvidence')"></span>
                                        <img src="${commonStaticImgPath}${warehouse.evidence}" height="700" width="1200">
                                        <input type="hidden" class="evidence" value="${warehouse.evidence}">
                                    </div>
                            </c:if>
                        </div>

                        <div class="upload-container" id="uploaderEvidence" <c:if test="${not empty warehouse.evidence}">hidden</c:if>>
                            <img src="" alt="img evidenceImg" >
                        </div>
                    </div>
                </div>

                <div class="layui-col-xs4 mb-5 evidenceClass" <c:if test="${warehouse.attribute eq '1'}">style="display:none;"</c:if>>
                    <label class="layui-form-label">租赁协议：</label>
                    <div class="layui-input-block">
                        <div id="leaseImgsDev">
                            <c:if test="${not empty warehouse.leaseImg}">
                                <div class="bj-img imgSpan">
                                    <span class="layui-icon-close layui-icon" onclick="delImg(this,'leaseImg')"></span>
                                    <img src="${commonStaticImgPath}${warehouse.leaseImg}" height="700" width="1200">
                                    <input type="hidden" class="leaseImg" value="${warehouse.leaseImg}">
                                </div>
                            </c:if>
                            <div class="upload-container" id="leaseImgDiv" <c:if test="${not empty warehouse.leaseImg}">style="display:none;"</c:if>>
                                <img src="" alt="img leaseImgImg">
                            </div>
                        </div>
                    </div>
                </div>



                <div class="layui-col-xs12 layui-form-item  mb-5">
                    <label class="layui-form-label">仓库照片：</label>
                    <div class="layui-input-block">
                        <div id="qualificationsImgsDev">
                            <c:if test="${not empty warehouse.qualificationsImgs}">
                                <c:forEach var="quaim" items="${quaimgs}">
                                <div class="bj-img imgSpan">
                                    <span class="layui-icon-close layui-icon" onclick="delImg(this,'uploaderQuali')"></span>
                                    <img src="${commonStaticImgPath}${quaim}" height="700" width="1200">
                                    <input type="hidden" class="quaImgPicker" value="${quaim}">
                                </div>
                                </c:forEach>
                            </c:if>
                        </div>

                        <div class="upload-container" id="uploaderQuali" <c:if test="${quaimgsCount*1 >=8}">hidden</c:if>>
                            <img src="" alt="img placeholder" >
                        </div>
                    </div>
                </div>

                <div class="layui-col-xs12 layui-form-item  mb-5">
                    <label class="layui-form-label">备注：</label>
                    <div class="layui-input-block">
                        <textarea name="remarks" id="remarks" placeholder="" class="layui-textarea" >${warehouse.remarks}</textarea>
                    </div>
                </div>

            </div>
    </div>
    <div class="operate-footer">
        <button class="layui-btn" type="button" lay-submit="" lay-filter="component-form-demo1" id="tijiaoBtn">保存</button>
        <button class="layui-btn layui-btn-primary" type="button" onclick="cancels()">取消</button>
    </div>
</div>


<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script>

    var quaimgsCount;
    var traderHtml = "";
    var supperHtml = "";
    var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    layui.use(['form', 'jquery', 'laydate', 'upload'], function () {
        $ = layui.$
            , element = layui.element
            , form = layui.form
            , laydate = layui.laydate;
        var upload = layui.upload;

        quaimgsCount = '${quaimgsCount}'


        form.on('select(attribute)', function (data) {
            var type = data.value
            if('1'==type){
                $(".evidenceClass").hide();
            }else{
                $(".evidenceClass").show();
            }

        })

        form.on('select(type)', function (data) {
            var type = data.value
            if ('2' == type) {
                $("#ascriptionId").removeAttr("disabled");
                $("#ascriptionId").empty();
                $("#ascriptionId").append(traderHtml);
                form.render('select');
            } else if ('3' == type) {
                $("#ascriptionId").removeAttr("disabled");
                $("#ascriptionId").empty();
                $("#ascriptionId").append(supperHtml);
                form.render('select');
            } else {
                $("#ascriptionId").empty();
                $("#ascriptionId").attr("disabled", "disabled");
                form.render('select');
            }
        });

        form.verify({
            ascriptionId: function (value, item) {
                var type = $("#type").val();
                if (type == '2' || type == '3') {
                    if (!$.trim(value)) {
                        return "归属名称不能为空！";
                    }
                    $("input[name='ascriptionName']").val($("#ascriptionId").find("option:selected").text());
                }

            },
            telephone: function (value, item) {
                if (!$.trim(value)) {
                    return "手机号码不能为空,请输入手机号码后保存！";
                }
                if (!myreg.test($.trim(value))) {
                    return "请输入正确的手机号码后保存！";
                }
            },
        })

        form.on('select(province)', function (data) {
            var province = $(data.elem).find("option:selected").attr("title");
            $("#city").empty();
            $("#detailAddress").val("");
            if (isBlank(province)) {
                $("#city").append("<option value=''>请选择市</option>");
                return "";
            }
            $.ajax({
                type: "POST",
                url: "${ctx}/main/redirect/getCitysByProId",
                data: {
                    province: province
                },
                success: function (result) {
                    if (result == "205") {
                        layer.msg("暂无数据!")
                        return
                    }
                    var html = "";
                    for (var i = 0; i < result.length; i++) {
                        var city = result[i];
                        html = html + '<option value="' + city.columns.CityName + '" title="' + city.columns.CityID + '">' + city.columns.CityName + '</option>';
                    }
                    $("#city").append(html);
                    form.render('select');
                },
                complete: function () {
                    var city = $("#city").find("option:selected").attr("title");
                    $("#area").empty()
                    if (isBlank(city)) {
                        $("#area").append("<option value=''>请选择县/区</option>");
                        return "";
                    }
                    $.ajax({
                        type: "POST",
                        url: "${ctx}/main/redirect/getAreaByCityId",
                        data: {
                            city: city
                        },
                        success: function (result) {
                            if (result == "205") {
                                layer.msg("暂无数据!")
                                return
                            }
                            var html = "";
                            for (var i = 0; i < result.length; i++) {
                                var area = result[i];
                                html = html + '<option value="' + area.columns.DistrictName + '" >' + area.columns.DistrictName + '</option>';
                            }
                            $("#area").append(html);
                            form.render('select');
                        }
                    });
                }

            });

        });

        form.on('select(city)', function (data) {
            var city = $(data.elem).find("option:selected").attr("title");
            $("#area").empty();
            $("#detailAddress").val("");
            if (isBlank(city)) {
                $("#area").append("<option value=''>请选择县/区</option>");
                return "";
            }
            $.ajax({
                type: "POST",
                url: "${ctx}/main/redirect/getAreaByCityId",
                data: {
                    city: city
                },
                success: function (result) {
                    if (result == "205") {
                        layer.msg("暂无数据!")
                        return
                    }
                    var html = "";
                    for (var i = 0; i < result.length; i++) {
                        var area = result[i];
                        html = html + '<option value="' + area.columns.DistrictName + '" >' + area.columns.DistrictName + '</option>';
                    }
                    $("#area").append(html);
                    form.render('select');
                }
            });
        });
        //执行实例
        var uploadInst = upload.render({
            elem: '#uploader' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {

                });
            }
            , done: function (res) {
                console.log(res.path);
                //上传完毕回调

                $("#uploader").hide();

                addImg(res.path,"imgs","imgsDiv","imgPicker");
            }
            , error: function () {
                //请求异常回调
            }
        });

        upload.render({
            elem: '#uploaderQuali' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {

                });
            }
            , done: function (res) {
                console.log(res.path);
                //上传完毕回调
                quaimgsCount++;
                if (quaimgsCount >= 8) {
                    $("#uploaderQuali").hide();
                } else {
                    $("#uploaderQuali").show();
                }
                addImg(res.path,"quaimgs","qualificationsImgsDev","quaImgPicker");
            }
            , error: function () {
                //请求异常回调
            }
        });

        upload.render({
            elem: '#uploaderEvidence' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {

                });
            }
            , done: function (res) {
                console.log(res.path);
                //上传完毕回调
                $("#uploaderEvidence").hide();
                addImg(res.path,"evidenceimgs","evidenceImgsDev","evidence");
            }
            , error: function () {
                //请求异常回调
            }
        });

        upload.render({
            elem: '#leaseImgDiv' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {

                });
            }
            , done: function (res) {
                console.log(res.path);
                //上传完毕回调
                $("#leaseImgDiv").hide();
                addImg(res.path,"leaseImg","leaseImgsDev","leaseImg");
            }
            , error: function () {
                //请求异常回调
            }
        });



        var ckeckFi = false;
        form.on('submit(component-form-demo1)', function (data) {
            $("#tijiaoBtn").attr("disabled", "true"); //改变提交按钮上的文字并将按钮设置为不可点击
            if (ckeckFi) {
                return
            }
            var imgs = $(".imgPicker").val();

            // if(isBlank(imgs)){
            //     layer.msg('授权委托书资质材料不能为空！');
            //     $("#tijiaoBtn").removeAttr("disabled");
            //     return false;
            // }

        var evidence = $(".evidence").val();

            var attribute = $("#attribute").val();

        // if(isBlank(evidence)){
        //
        //     layer.msg('产权证书不能为空！');
        //     $("#tijiaoBtn").removeAttr("disabled");
        //     return false;
        //
        // }

        var leaseImg = $(".leaseImg").val();
            // if(attribute=='2' && isBlank(leaseImg)){
            //     //租赁
            //     layer.msg('租赁协议不能为空！');
            //     $("#tijiaoBtn").removeAttr("disabled");
            //     return false;
            // }

            var quaimgs = "";
            $(".quaImgPicker").each(function () {
                if (isBlank(quaimgs)) {
                    quaimgs = $(this).val();
                } else {
                    quaimgs = quaimgs + "," + $(this).val();
                }
            });
            // if(isBlank(quaimgs)){
            //     layer.msg('仓库照片不能为空！');
            //     $("#tijiaoBtn").removeAttr("disabled");
            //     return false;
            // }
            // if(quaimgsCount<3){
            //     layer.msg('仓库照片不能小于3张！');
            //     $("#tijiaoBtn").removeAttr("disabled");
            //     return false;
            // }

            var articleFrom = data.field;
            articleFrom.imgs = imgs;
            articleFrom.evidence =evidence;
            articleFrom.qualificationsImgs = quaimgs;
            articleFrom.leaseImg = leaseImg;
            ckeckFi = true;

            $.ajax({
                type: "POST",
                url: "${ctx}/apply/warehouseApply/saveWarehouseApply",
                contentType : "application/json;charsetset=UTF-8",
                data:JSON.stringify(articleFrom),
                success: function (data) {
                    console.log(data)
                    if (data.code == '200') {
                        layer.msg('提交成功！', {icon: 1, time: 1000}, function () {
                            parent.layer.closeAll();
                            parent.window.reload();
                        });
                    } else if (data.code == '501') {
                        layer.msg(data.errMsg, {icon: 2}, function () {
                            ckeckFi = false;
                            $("#tijiaoBtn").removeAttr("disabled");
                        });
                    } else {
                        layer.msg("保存失败", {icon: 2}, function () {
                            ckeckFi = false;
                            $("#tijiaoBtn").removeAttr("disabled");
                        });
                    }
                },  error: function (e) {
                    layer.msg("请刷新！", {icon: 2});
                    return;
                }
            });

        })
    });

    function addImg(data,imgType,div,imgPicker) {
        var html = '<div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImg(this, \''+imgType+'\')"></span>';
        html += '<img src="${commonStaticImgPath}' + data + '" height="700" width="1200"/>';
        html += '<input type="hidden" class="'+imgPicker+'" value="' + data + '" /> </div>';
        $("#"+div).append(html);
    }

    function delImg(that,imgType) {
        console.log(imgType)
        if(imgType=='imgs'){
                $("#uploader").show();
        }else if(imgType=='leaseImg'){
            $(".evidenceClass").show();
            $("#leaseImgDiv").show();
        }else if(imgType == 'evidenceimgs'){
            $("#uploaderEvidence").show();
        }else if(imgType == 'uploaderEvidence'){
            $("#uploaderEvidence").show();
        } else{
            quaimgsCount--;
            if (quaimgsCount < 8) {
                $("#uploaderQuali").show();
            }
        }
        $(that).parent().remove();
    }


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

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




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