<%@ 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" />
</head>
<body>
<div class="layui-fluid pd-0">
    <div class="layui-card pl-30 pr-30 pt-10">
        <div class="layui-card-body">
            <form class="layui-form delivery" action="" lay-filter="component-form-element">
                <div class="layui-col-xs12 layadmin-form-right mb-10">
                    <div class="layui-col-xs6 layui-btn-group text-l">
                        <button class="layui-btn deliveryMsg" type="button">备件信息</button>
                        <button class="layui-btn layui-btn-primary deliveryMsg" type="button">编辑记录</button>
                    </div>
                    <c:if test="${applyRecord.columns.status=='1'}">
                        <div class="layui-col-xs6 text-r" id="upDiv">
                            <button class="layui-btn" type="button" onclick="showUpdateFit()">编辑</button>
                        </div>
                    </c:if>
                    <div class="layui-col-xs6 text-r hide" id="hideDiv">
                        <button class="layui-btn" type="button" onclick="saveFitting()">保存</button>
                        <button class="layui-btn" type="button" onclick="hideUpdateFit()">取消</button>
                    </div>
                </div>
                <div class="layui-row layui-col-xs12 bj-msg">
                    <div class="layui-col-xs4 mb-5">
                        <label class="layui-form-label"><i class="mark hide">*</i>备件名称：</label>
                        <div class="layui-input-block">
                            <input type="text" id="fittingName" class="layui-input layui-bg-gray" value="${applyRecord.columns.fitting_name}" disabled>
                        </div>
                    </div>
                    <div class="layui-col-xs4 mb-5">
                        <label class="layui-form-label">备件条码：</label>
                        <div class="layui-input-block">
                            <input type="text" id="fittingCode" class="layui-input layui-bg-gray" value="${applyRecord.columns.fitting_code}" disabled>
                        </div>
                    </div>
                    <div class="layui-col-xs4 mb-5">
                        <label class="layui-form-label"><i class="mark hide">*</i>备件数量：</label>
                        <div class="layui-input-block">
                            <input type="text" lay-verify="ling" name="applyNum" id="applyNum" class="layui-input layui-bg-gray" value="<fmt:formatNumber type="number" value="${applyRecord.columns.apply_num}" maxFractionDigits="2"/>" disabled>
                        </div>
                    </div>
                    <div class="layui-col-xs12 mb-5">
                        <label class="layui-form-label"><i class="mark hide">*</i>备件描述：</label>
                        <div class="layui-input-block">
                            <input type="text" id="applyMarks" class="layui-input layui-bg-gray" value="${applyRecord.columns.apply_marks}" disabled>
                        </div>
                    </div>
                    <div class="layui-col-xs12 mb-5">
                        <label class="layui-form-label"><i class="mark hide">*</i>备件图片：</label>
                        <div class="layui-input-block">
                            <div id="imgsDiv">
                                <c:forEach var="img" items="${fitImgs}">
                                    <div class="bj-img imgSpan">
                                            <%--<span class="layui-icon-close layui-icon"></span>--%>
                                        <img src="${commonStaticImgPath}${img}" height="700" width="1200"/>
                                        <input type="hidden" class="imgPicker" value="${img}"/>
                                    </div>
                                </c:forEach>
                            </div>
                            <div class="upload-container hide" id="uploader">
                                <img src="" alt="img placeholder" id="imgsAdd">
                            </div>
                            <input type="hidden" id="imgs" value="${applyRecord.columns.fitting_img}"/>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-xs12 h-160 layui-hide re-record">
                    <ul class="h-160 layui-col-xs12 border pl-30 pr-30">
                        <c:forEach var="pros" items="${fns:getProcess(applyRecord.columns.message)}">
                            <li class=" re-List mb-10">
                                <span class="layui-col-xs2 fs-12"><span>${pros.t}</span>:</span>
                                <span class="layui-col-xs10 fs-12">${pros.c}</span>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
                <div class="layui-row layui-col-space12 pb-35">
                    <h1 class="title layui-col-xs12 mb-20 mt-10">
                        <span>工单信息</span>
                    </h1>
                    <div class="layui-col-xs4 layui-form-item">
                        <label class="layui-form-label">工单编号：</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input layui-bg-gray" value="${applyRecord.columns.order_number}" disabled>
                        </div>
                    </div>
                    <div class="layui-col-xs4 layui-form-item">
                        <label class="layui-form-label">工单状态：</label>
                        <div class="layui-input-block">
                            <%--1.待派工 2.服务中 3.待回访 4.待结算 5.已完成 6.无效工单 7.取消工单--%>
                            <c:if test="${applyRecord.columns.orderStatus eq '1'}">
                                <input type="text" class="layui-input layui-bg-gray" value="待派工" disabled>
                            </c:if>
                            <c:if test="${applyRecord.columns.orderStatus eq '2'}">
                                <input type="text" class="layui-input layui-bg-gray" value="服务中" disabled>
                            </c:if>
                            <c:if test="${applyRecord.columns.orderStatus eq '3'}">
                                <input type="text" class="layui-input layui-bg-gray" value="待回访" disabled>
                            </c:if>
                            <c:if test="${applyRecord.columns.orderStatus eq '4'}">
                                <input type="text" class="layui-input layui-bg-gray" value="待结算" disabled>
                            </c:if>
                            <c:if test="${applyRecord.columns.orderStatus eq '5'}">
                                <input type="text" class="layui-input layui-bg-gray" value="已完成" disabled>
                            </c:if>
                            <c:if test="${applyRecord.columns.orderStatus eq '6'}">
                                <input type="text" class="layui-input layui-bg-gray" value="无效工单" disabled>
                            </c:if>
                            <c:if test="${applyRecord.columns.orderStatus eq '7'}">
                                <input type="text" class="layui-input layui-bg-gray" value="取消工单" disabled>
                            </c:if>
                        </div>
                    </div>
                    <div class="layui-col-xs4 layui-form-item">
                        <label class="layui-form-label">产品品牌：</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input layui-bg-gray" value="${applyRecord.columns.appliance_brand}" disabled>
                        </div>
                    </div>
                    <div class="layui-col-xs4 layui-form-item">
                        <label class="layui-form-label">产品品类：</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input layui-bg-gray" value="${applyRecord.columns.appliance_category}"  disabled>
                        </div>
                    </div>
                    <div class="layui-col-xs4 layui-form-item">
                        <label class="layui-form-label">产品型号：</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input layui-bg-gray" value="${applyRecord.columns.appliance_model}" disabled>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-hide">
                    <input type="hidden" id="appplyId" name="id" value="${applyRecord.columns.id}" />
                    <input type="button" lay-submit lay-filter="sureSubmit" id="sureSubmit" value="确认">
                </div>
            </form>
        </div>
    </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) {
                    /* newBase64 = result;*/
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path);
            }
            , error: function () {
                //请求异常回调
            }
        });

    });

    function addImg(data){
        imgsCount++;
        if (imgsCount >= 3) {
            $("#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 < 3) {
            $("#uploader").show();
        }
        $(that).parent().remove();
    }

    //点击编辑
    function showUpdateFit(){
        $(".bj-msg").find("input").attr("disabled", false);
        $(".bj-msg").find("input").removeClass("layui-bg-gray");
        $("#upDiv").hide();
        $("#hideDiv").show();
        $(".bj-msg").find(".mark").show();
        $("#uploader").show();
        $(".imgSpan").each(function(){
            $(this).find("img").before('<span class="layui-icon-close layui-icon" onclick="delImg(this)"></span>');
        })
    }
    //点击取消
    function hideUpdateFit(){
        $(".bj-msg").find("input").attr("disabled", true);
        $(".bj-msg").find("input").addClass("layui-bg-gray");
        $("#upDiv").show();
        $("#hideDiv").hide();
        $(".bj-msg").find(".mark").hide();
        $("#uploader").hide();
        $(".imgSpan").each(function(){
            $(this).children().eq(0).remove();
        })
    }

    var noRepeatSub = false;
    function saveFitting(){
        if(noRepeatSub){
            return;
        }
        var id = $("#appplyId").val();
        var fittingName = $("#fittingName").val();
        var fittingCode = $("#fittingCode").val();
        var applyNum = $("#applyNum").val();
        var applyMarks = $("#applyMarks").val();
        var fittingImg = "";
        $(".imgPicker").each(function (index) {
            var src = $(this).val();
            if (!isBlank(src)) {
                fittingImg += src + ",";
            }
        });

        var checkTe = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
        if(isBlank(fittingName)){
            layer.msg("备件名称不可为空", {icon: 5, anim: 6});
            return;
        }else if(isBlank(applyMarks)){
            layer.msg("备件描述不可为空", {icon: 5, anim: 6});
            return;
        }else if(isBlank(applyNum)){
            layer.msg("备件数量不可为空", {icon: 5, anim: 6});
            return;
        }else if (!checkTe.test(applyNum)) {
            layer.msg("备件数量格式不正确", {icon: 5, anim: 6});
            return;
        }else if (isBlank(fittingImg)) {
            layer.msg("备件图片不能为空", {icon: 5, anim: 6});
            return;
        }else{
            noRepeatSub = true;
            $.ajax({
                url: '${ctx}/service/fitting/saveUpdateFitting',
                type: 'post',
                data: {
                    id: id,
                    fittingName: fittingName,
                    fittingCode: fittingCode,
                    applyNum: applyNum,
                    applyMarks: applyMarks,
                    fittingImg: fittingImg
                },
                success: function(data) {
                    if(data=="200"){
                        layer.msg("编辑成功！",{time:1000},function(){
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layerIFrameReload(index);
                        });
                        //hideUpdateFit();
                    }else{
                        layer.msg("编辑失败！");
                    }
                },
                complete:function(){
                    noRepeatSub = false;
                }
            });
        }
    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }
</script>
</body>
</html>