<%@ page import="com.myproject.webapp.controller.webService.DataCache" %><%--
  Created by IntelliJ IDEA.
  User: kangmor
  Date: 2015/12/2
  Time: 21:31
--%>
<%@ include file="/common/taglibs.jsp" %>
<%@ page language="java" pageEncoding="UTF-8"%>

<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
  <fmt:message key="barcode.updateTitle"/>
</h3>

<!--Begin of update-->
<div class="row">
  <div class="col-md-12">
    <!-- BEGIN PORTLET-->
    <div class="portlet box green-jungle">
      <div class="portlet-title">
        <div class="caption">
          <i class="fa fa-pencil"></i><fmt:message key="barcode.updateTitle"/>
        </div>

        <div class="actions">
          <a href="${ctx}/barcode/barcodeUpdate.html" class="btn btn-default btn-sm">
            <i class="fa fa-plus"></i> <fmt:message key="button.add"/> </a>
          <a href="barcodeSearch.html" class="btn btn-default btn-sm">
            <i class="fa fa-reply"></i> <fmt:message key="button.return"/> </a>
        </div>
      </div>
      <div class="portlet-body form">
        <!-- BEGIN FORM-->
        <form:form commandName="barcode" class="form-horizontal form-bordered" action="barcodeUpdate.html">
          <form:hidden path="id"/>
          <form:hidden path="type"/>

          <div class="form-body">
            <%@include file="/common/success.jsp"%>
            <%@include file="/common/error.jsp"%>

     <c:if test='<%=!DataCache.isProductionFor("ChengDuKaiTian") %>'>
            <div class="form-group">
              <label class="control-label col-md-2"><fmt:message key="barcode.barcode"/></label>
              <div class="col-md-4">
                <div style="text-align:left" class="input-group">
                  <form:input type="text" id="barcodeStr" path="barcode" class="form-control"/>
                    <span class="input-group-addon">
                      <a onclick="printFun();"><fmt:message key="barcode.print"/> </a>
                    </span>
                  <form:errors path="barcode" cssStyle="color: red"/>
                </div>
              </div>

              <label class="control-label col-md-2"><fmt:message key="barcode.partNumber"/></label>
              <div class="col-md-4">
                <div style="text-align:left" class="input-group">
                  <form:input type="text" id="partNumber" path="partNumber" class="form-control"/>
                  <form:errors path="partNumber" cssStyle="color: red"/>
                </div>
              </div>
            </div>
            <div class="form-group">

              <label class="control-label col-md-2"><fmt:message key="barcode.plateSize"/></label>
              <div class="col-md-4">
                <div style="text-align:left" class="input-group">
                  <form:input type="text" id="plateSize" path="plateSize" class="form-control"/>
                </div>
              </div>

              <label class="control-label col-md-2"><fmt:message key="barcode.height"/></label>
              <div class="col-md-4">
                <div style="text-align:left" class="input-group">
                  <form:input type="text" id="height" path="height" class="form-control"/>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-md-2"><fmt:message key="barcode.amount"/></label>
              <div class="col-md-4">
                <div style="text-align:left" class="input-group">
                  <form:input type="text" id="amount" path="amount" class="form-control"/>
                </div>
              </div>

              <label class="control-label col-md-2"><fmt:message key="barcode.batch"/></label>
              <div class="col-md-4">
                <div style="text-align:left" class="input-group">
                  <form:input type="text" id="batch" path="batch" class="form-control"/>
                </div>
              </div>
            </div>

     </c:if>
<c:if test='<%=DataCache.isProductionFor("ChengDuKaiTian") %>'>
  <div class="form-group">
                              <label class="control-label col-md-2"><fmt:message key="component.auto.scancode"/></label>

                              <div class="col-md-8">
                                  <div style="text-align:left">
                                      <input type="text" id="scan-code" class="form-control" autofocus placeholder="产品型号@组件型号@配套单号@元器件型号@上级库位置号@检验编号@数量"/>
                                      <span id="code-errors" style="color: red"></span>
                                  </div>
                              </div>
                          </div>
  <form:hidden id="partNumber" path="partNumber"/>
  <div class="form-group">
    <label class="control-label col-md-2"><fmt:message key="barcode.barcode"/></label>
    <div class="col-md-4">
      <div style="text-align:left" class="input-group">
        <form:input type="text" id="barcodeStr" path="barcode" class="form-control"/>
                    <span class="input-group-addon">
                      <a onclick="printFun();"><fmt:message key="barcode.print"/> </a>
                    </span>
        <form:errors path="barcode" cssStyle="color: red"/>
      </div>
    </div>

    <label class="control-label col-md-2"><fmt:message key="产品型号"/></label>
    <div class="col-md-4">
      <div style="text-align:left" class="input-group">
        <form:input type="text" path="otherField2" class="form-control" id="otherField2"/>
      </div>
    </div>
  </div>
  <div class="form-group">

    <label class="control-label col-md-2"><fmt:message key="组件型号"/></label>
    <div class="col-md-4">
      <div style="text-align:left" class="input-group">
        <form:input type="text" path="otherField3" class="form-control" id="otherField3"/>
      </div>
    </div>


    <label class="control-label col-md-2"><fmt:message key="配套单号"/></label>
    <div class="col-md-4">
      <div style="text-align:left" class="input-group">
        <form:input type="text" path="otherField1" class="form-control" id="otherField1"/>
      </div>
    </div>
  </div>
  <div class="form-group">

    <label class="control-label col-md-2"><fmt:message key="元器件型号"/></label>
    <div class="col-md-4">
      <div style="text-align:left" class="input-group">
        <form:input type="text" path="otherField4" class="form-control" id="otherField4"/>
      </div>
    </div>


    <label class="control-label col-md-2"><fmt:message key="检验编号"/></label>
    <div class="col-md-4">
      <div style="text-align:left" class="input-group">
        <form:input type="text" path="otherField5" class="form-control" id="otherField5"/>
      </div>
    </div>

  </div>

  <div class="form-group extraInfo">

    <label class="control-label col-md-2"><fmt:message key="barcode.amount"/></label>
    <div class="col-md-4">
      <div style="text-align:left" class="input-group">
        <form:input type="text" id="amount" path="amount" class="form-control"/>
      </div>
    </div>


    <form:hidden id="plateSize" path="plateSize"/>
    <form:hidden id="height" path="height"/>
    <label class="control-label col-md-2"><fmt:message key="barcode.plateSize"/></label>
    <div class="col-md-4">
      <select class="form-control input-small" id="size">
        <option value="7x8">7 x 8</option>
        <option value="7x12">7 x 12</option>
        <option value="7x16">7 x 16</option>
        <option value="8x20"selected="true">散料夹具</option>
        <option value="8.0x20" >格料夹具</option>
      </select>
    </div>
  </div>



  <div class="form-group extraInfo">

      <%--备注--%>
    <label class="control-label col-md-2"><fmt:message key="备注"/></label>

    <div class="col-md-6">

      <form:textarea id="description" path="otherField6" class="form-control"/>

    </div>
  </div>

</c:if>

          <div class="form-actions">
            <div class="row">
              <div class="col-md-offset-3 col-md-9">
                <button class="btn green" type="submit" name="method" value="add"><i class="fa fa-save"></i><fmt:message key="button.save"/></button>
                <c:if test="${not empty barcode.id}">
                  <button class="btn red" type="submit" name="method" value="delete"><i class="fa fa-trash-o"></i><fmt:message key="button.delete"/></button>
                </c:if>
                <button type="button" class="btn default" onclick="window.location=''"><i class="fa fa-history"></i><fmt:message key="button.cancel"/></button>
              </div>
            </div>
          </div>
        </form:form>
        <!-- END FORM-->
      </div>
    </div>
    <!-- END PORTLET-->
  </div>
</div>
<!--End of update-->


  <c:set var="scripts" scope="request">
  <script>
    function printFun(){
      var codeStr = $("#barcodeStr").val();
      window.open('${ctx}/qrcode.html?barcode=' + codeStr);
    }
      $("#partNumber").autocomplete({
        source: function (request, response) {
          $.ajax({
            url: "${ctx}/component/fetchComponent",
            dataType: "json",
            data: {
              pn: request.term
            },
            success: function (data) {
              response($.map(data, function (item) {
                return {
                  label: item.partNumber,
                  id: item.id,
                  partNumber: item.partNumber,
                  plateSize: item.plateSize,
                  height:item.height,
                  amount:item.amount,
                  type:item.type
                };
              }));
            }
          });
        },
        minLength: 1,
        select: function( event, ui ) {
//                    log( ui.item ?
//                    "Selected: " + ui.item.label :
//                    "Nothing selected, input was " + this.value);
          $("#plateSize").val(ui.item.plateSize);
          $("#partNumber").val(ui.item.partNumber);
          $("#height").val(ui.item.height);
          $("#amount").val(ui.item.amount);
          $("#type").val(ui.item.type);
        }
      });

    function saveBarcode() {
      $("#operation").val("save");
      $("#barcodeGenerateForm").submit();
    }



    $("#scan-code").change(function (){
      $("#code-errors").text("");
      var codeValue = $(this).val();
      $(this).val("");
      var strs= codeValue.split("@"); //字符分割
      if(strs.length == 7){
        //产品型号@组件型号@配套单号@元器件型号@上级库位置号@检验编号@数量
        $("#code-errors").text("");
        $("#otherField1").val(strs[2]);
        $("#otherField2").val(strs[0]);
        $("#otherField3").val(strs[1]);
        $("#otherField4").val(strs[3]);
        $("#otherField5").val(strs[5]);
        $("#amount").val(strs[6]);
        return;
      }
      $("#code-errors").text("格式为  产品型号@组件型号@配套单号@元器件型号@上级库位置号@检验编号@数量  的条码信息才可以正确解析");
    })

    $('#size').change(function(){

      var selectValue = $(this).children('option:selected').val();
      if(selectValue != ""){
        var strs = selectValue.split("x");
        $("#plateSize").val(strs[0]);
        $("#height").val(strs[1]);
        if(strs[0] == '8'){
          //散料夹具
          $('#partNumber').val("BULK_TRAY");
        }else if(strs[0] == '8.0'){
          //隔料夹具
          $("#plateSize").val("8");
          $('#partNumber').val("SPLIT_BULK_TRAY");
        }else{
          //盘料
          $('#partNumber').val("COMPONENT");
        }
      }
    })

    if(${barcode.plateSize > 0}){
      var sizeOptionValue = "${barcode.plateSize}x${barcode.height}";
      var sizeOption = $("#size option[value="+sizeOptionValue+"]");
      if(sizeOption.length <= 0){
        $("#size").append("<option value='"+sizeOptionValue+"'>"+sizeOptionValue+"</option>");
      }
      $('#size').val(sizeOptionValue);
    }else{
      $('#partNumber').val("BULK_TRAY");
    }


    fetchBarcode = function(fieldStr){
      var opt = {
        source: function (request, response) {
          $.ajax({
            url: "${ctx}/service/store/fetchBarcode",
            dataType: "json",
            data: {
              fieldStr: fieldStr,
              fieldVal: request.term,
            },
            success: function (data) {
              response($.map(data, function (item) {
                return {
                  label: eval("item."+fieldStr),
                  id: item.id,
                  otherField1: item.otherField1,
                  otherField2: item.otherField2,
                  otherField3: item.otherField3,
                  otherField4: item.otherField4,
                  otherField5: item.otherField5,
                  otherField6: item.otherField6,
                  amount: item.amount,
                  partNumber: item.partNumber,
                  plateSize: item.plateSize,
                  height: item.height
                };
              }));
            }
          });
        },
        minLength: 1,
        select: function( event, ui ) {
          $("#otherField1").val(ui.item.otherField1);
          $("#otherField2").val(ui.item.otherField2);
          $("#otherField3").val(ui.item.otherField3);
          $("#amount").val(ui.item.amount);
          $("#otherField4").val(ui.item.otherField4);
          $("#otherField5").val(ui.item.otherField5);
          $("#otherField6").val(ui.item.otherField5);
          $('#partNumber').val(ui.item.partNumber);
          $('#plateSize').val(ui.item.plateSize);
          $('#height').val(ui.item.height);
          var sizeOptionValue = ui.item.plateSize + "x"+ ui.item.height;
          var sizeOption = $("#size option[value="+sizeOptionValue+"]");
          if(sizeOption.length <= 0){
            $("#size").append("<option value='"+sizeOptionValue+"'>"+sizeOptionValue+"</option>");
          }
          $('#size').val(sizeOptionValue);
        }
      }
      return opt;
    }

      $("#otherField2").autocomplete(fetchBarcode("otherField2"));
      $("#otherField1").autocomplete(fetchBarcode("otherField1"));
      $("#otherField3").autocomplete(fetchBarcode("otherField3"));
      $("#otherField4").autocomplete(fetchBarcode("otherField4"));
      $("#otherField5").autocomplete(fetchBarcode("otherField5"));
  </script>
  </c:set>