<%@ 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>
        html{
            background-color: #fff;
        }
    </style>
</head>
<body>
<div class="layui-form" lay-filter="layuiadmin-form-admin">
    <div class="layui-card md-0">
        <div class="layui-card-body">
            <div class="layui-form-item layui-col-xs12 ">
                <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="fittingCode" name="code" class="layui-input layui-bg-gray"
                               lay-verify="required" value="${fitt.code}" disabled>
                    </div>
                </div>
                <input type="hidden" name="id" value="${fitt.id}">
                <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="name" name="name" class="layui-input " lay-verify="required"
                               value="${fitt.name}">
                    </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="version" name="version" class="layui-input " lay-verify="required"
                               value="${fitt.version}">
                    </div>
                </div>

                <div class="layui-col-xs6 mb-5">
                    <label class="layui-form-label">适用机型：</label>
                    <div class="layui-input-block">
                        <input type="text" name="suitPrinter" id="suitPrinter" class="layui-input "
                               value="${fitt.suitPrinter}">
                    </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="unit" name="unit" class="layui-input " lay-verify="required"
                               value="${fitt.unit}">
                    </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" class="layui-input layui-bg-gray" id="warning" name="warning"
                               lay-verify="required" value="${fitt.warning}" disabled>
                    </div>
                </div>

                <div class="layui-col-xs4 mb-5">
                    <label class="layui-form-label"><i class="mark ">*</i>服务商价格：</label>
                    <div class="layui-input-block">
                        <input type="text" name="sitePrice" id="sitePrice" class="layui-input" lay-verify="required"
                               value="${fitt.sitePrice}">
                        <span class="pos-a h-32 lh-32 layui-span-unit">元</span>
                    </div>
                </div>
                <div class="layui-col-xs4 mb-5">
                    <label class="layui-form-label"><i class="mark ">*</i>零售价格：</label>
                    <div class="layui-input-block">
                        <input type="text" name="customerPrice" id="customerPrice" class="layui-input"
                               lay-verify="required" value="${fitt.customerPrice}">
                        <span class="pos-a h-32 lh-32 layui-span-unit">元</span>
                    </div>
                </div>
                <%-- <div class="layui-col-xs4 mb-5">
                     <label class="layui-form-label">返回旧件：</label>
                     <div class="layui-input-block">
                         <select  name="refundOldFlag" id="refundOldFlag"  class="layui-bg-gray" >
                             <option value="">请选择</option>
                             <option value="0" <c:if test="${fitt.refundOldFlag eq '0'}"> selected</c:if> >无需返还</option>
                             <option value="1" <c:if test="${fitt.refundOldFlag eq '1'}"> selected</c:if>>需要返还</option>
                         </select>
                     </div>
                 </div>--%>
                <div class="layui-col-xs4 mb-5">
                    <label class="layui-form-label">库位：</label>
                    <div class="layui-input-block">
                        <input type="text" name="storehouse" id="storehouse" class="layui-input"
                               value="${fitt.storehouse}">
                    </div>
                </div>
                <div class="layui-col-xs12 mb-5">
                    <label class="layui-form-label">备件描述：</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" class="layui-textarea" id="remarks" name="remarks"
                                  value="${fitt.remarks}">${fitt.remarks}</textarea>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-form-item">
                    <label class="layui-form-label">备件图片：</label>
                    <div class="layui-input-block">
                        <div id="imgsDiv">
                            <c:forEach items="${imgs}" var="img">
                                <div class="bj-img imgSpan">
                                    <c:if test="${type ne 2}">
                                        <span class="layui-icon-close layui-icon" onclick="delImg(this)"></span>
                                    </c:if>
                                    <img src="${commonStaticImgPath}${img}" height="700" width="1200"/>
                                    <input type="hidden" class="imgPicker" value="${img}"/></div>
                            </c:forEach>

                        </div>


                        <div class="upload-container  <c:if test="${imgsCount >=4}"> hide</c:if>" id="uploader">
                            <img src="" alt="img placeholder" id="imgsAdd">
                        </div>

                        最多可上传4张照片
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="operate-footer">
        <c:if test="${type ne 2}">
            <button class="layui-btn" lay-submit="" lay-filter="component-form-demo1" id="tijiaoBtn">保存</button>
        </c:if>
        <button type="button" class="layui-btn layui-btn-primary" onclick="cancels()">取消</button>
    </div>
</div>


<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script>
    var imgsCount;
    layui.use(['form', 'jquery','laydate','upload'], function () {
        $ = layui.$
            , element = layui.element
            , form = layui.form
            , laydate = layui.laydate;
        var upload = layui.upload;
        imgsCount = '${imgsCount}';


        $('.deliveryMsg').click(function () {
            var index = $(this).index();
            $(this).removeClass('layui-btn-primary').siblings().addClass('layui-btn-primary')
            if (index == '1') {
                $('.re-record').removeClass('layui-hide');
                $('.bj-msg').addClass('layui-hide');
            } else {
                $('.bj-msg').removeClass('layui-hide');
                $('.re-record').addClass('layui-hide');
            }
        })

        //执行实例
        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);
                //上传完毕回调
                addImg(res.path);
            }
            , error: function () {
                //请求异常回调
            }
        });
        var ckeckFi = false;
        form.on('submit(component-form-demo1)', function (data) {
            $("#tijiaoBtn").attr("disabled", "true"); //改变提交按钮上的文字并将按钮设置为不可点击
            if(ckeckFi){
                return
            } var imgs = "";
            $(".imgPicker").each(function(){
                if(isBlank(imgs)){
                    imgs = $(this).val();
                }else{
                    imgs =imgs +","+ $(this).val();
                }
            });
            ckeckFi = true;
            var articleFrom = data.field;
            articleFrom.img=imgs;
            console.log(articleFrom)
            var sitePrice = articleFrom.sitePrice;
            var customerPrice = articleFrom.customerPrice;
            if (!isPrice(sitePrice)) {
                layer.msg("服务商价格格式不正确！", {icon: 2});
                $("#tijiaoBtn").attr("disabled", false);
                ckeckFi = false;
                return false;
            }
            if (!isPrice(customerPrice)) {
                layer.msg("零售价格格式不正确！", {icon: 2});
                $("#tijiaoBtn").attr("disabled", false);
                ckeckFi = false;
                return false;
            }
            $.ajax({
                type:"POST",
                url:"${ctx}/platform/fiting/saveChangeFitting",
                data:articleFrom,
                success:function(data){
                    ckeckFi = false;
                    $("#tijiao").removeAttr("disabled");
                    if(data.code=='200'){
                        layer.msg('提交成功！', {icon:1,time:1000},function(){
                            parent.layer.closeAll();
                       parent.searchOrder()
                        // parent.window.location.reload();
                        });
                    }else{
                        layer.msg("保存失败", {icon: 2});
                    }
                }
            });

        })
    });

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

    function delImg(that){
        imgsCount--;
        if (imgsCount < 4) {
            $("#uploader").show();
        }
        $(that).parent().remove();
    }


//通过申请
    var noRepeatSub = false;
    function addFitting(){
        if(noRepeatSub){
            return;
        }
        var warning = $("#warning").val();  //审核数量
        var sitePrice = $("#sitePrice").val();  //返还旧件

        var checkTe = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
         if(isBlank(warning)){
            layer.msg("备件数量不可为空", {icon: 5, anim: 6});
            return;
        }else if (!checkTe.test(warning)) {
            layer.msg("备件数量格式不正确", {icon: 5, anim: 6});
            return;
        }else if(isBlank(sitePrice)){
            layer.msg("价格不可为空", {icon: 5, anim: 6});
            return;
        }else if (!checkTe.test(sitePrice)) {
            layer.msg("价格格式不正确", {icon: 5, anim: 6});
            return;
        }else{
            $.ajax({
                url: '${ctx}/platform/fitting/adoptApply',
                type: 'post',
                data: {
                    id: id,
                    fittingSuditNum: fittingSuditNum,
                    oldFittingFlag: oldFittingFlag,
                    factoryMarks: factoryMarks
                },
                success: function(data) {
                    if(data.code=="200"){
                        layer.msg("保存成功！",{time:1000},function(){
                            layer.closeAll()
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layerIFrameReload(index); //再执行关闭
                        });
                    }else if(data.code="401"){
                        layer.msg("该申请已经审核，请刷新页面",{icon:2})
                    }else{
                        layer.msg("保存失败！");
                    }
                },
                complete:function(){

                }
            });
        }
    }

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

    function cancels(){
        parent.layer.closeAll();
    }

    function isPrice(price) {
        var checkTe = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
        if (checkTe.test(price)) {
            return true;
        }else{
            return false;
        }
    }

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