{% extends 'obj_form.html' %}
{% load i18n %}
{% load tj_filters %}

{% block css %}
    {{ block.super }}    
   
{% endblock %}



{% block js %}
    {{ block.super }}
    $('.btn-save').click(function(){
        $.SubmitForm('#obj_form form','{{request.path}}');
    });
   
{% endblock %}

 
{% block subtitle-1 %}
    {% trans '库存管理' %}
{% endblock %}
{% block subtitle-2 %}
    {% trans '包装材料采购' %}
{% endblock %}   


    


{% block form_content %}
    {{ block.super }}
    <script type="text/javascript">
      $(document).ready(function() {
          function calculateTotalPrice() {
              var qty = parseFloat($('#id_qty').val()) || 0;
              var unitPrice = parseFloat($('#id_unit_price').val()) || 0;
              var totalPrice = qty * unitPrice;
              console.log('totalPrice---',totalPrice)
              $('#id_total_price').val(totalPrice.toFixed(2));
          }
    
          $('#id_qty, #id_unit_price').on('input', function() {
      
              calculateTotalPrice();
          });
    
          // 初始计算
          calculateTotalPrice();
          
          // 包材搜索下拉框
          $('#packagingName').on('input', function() {
              var query = $(this).val();
              if (query.length > 0) {
                  $.ajax({
                      url: "packaging/name/search/ajax/",
                      data: {
                          'query': query
                      },
                      success: function(data) {
                          var select = $('#packaging-select');
                          select.empty();  // 清空下拉框
                          if (data.length > 0) {
                              $.each(data, function(index, item) {
                                select.append(new Option(item.name, item.id));// 添加选项
                              });
                              select.show();  // 显示下拉框
                          } else {
                              select.hide();  // 没有结果时隐藏下拉框
                          }
                      }
                  });
              } else {
                  $('#packaging-select').hide();  // 输入为空时隐藏下拉框
              }
          });

          $('#packaging-select').on('change', function() {
              var selectedOption = $(this).find('option:selected');  // 获取选中的选项
              var name = selectedOption.text();  // 获取选项的文本（label）
              var id = selectedOption.val(); 
              $('#packagingName').val(name)
              $('#packaging').val(id);  // 更新输入框值为label
              $(this).hide();  // 选择后隐藏下拉框
          });
      });
    </script>
    
    <div class="form-group ">
        <label class="col-sm-2 control-label ">{% trans '采购编码:' %} </label>
        <div class="col-sm-10">{{ form.code }}</div>
    </div>
    <div class="form-group ">
      <label class="col-sm-2 control-label ">{% trans '采购时间:' %} </label>
      <div class="col-sm-10">{{ form.dt }}</div>
    </div>
    <div class="form-group ">
      <label class="col-sm-2 control-label ">{% trans '包材:' %} </label>
      <div class="col-sm-10">
        <input type="text" id="packagingName" value="" class="form-control" placeholder="搜索包材" autocomplete="off">
        <input type="text" id='packaging' name="packaging" value="value" style="display: none;">
        <select id="packaging-select" class="form-control mt-2" size="5" style="display:none;"></select>
      </div>
    </div>   
    <div class="form-group ">
        <label class="col-sm-2 control-label ">{% trans '供应商:' %} </label>
        <div class="col-sm-10">{{ form.vendor }}</div>
    </div>
    <div class="form-group ">
      <label class="col-sm-2 control-label ">{% trans '采购数量:' %} </label>
      <div class="col-sm-10">{{ form.qty }}</div>
    </div>
    <div class="form-group ">
      <label class="col-sm-2 control-label ">{% trans '采购单价:' %} </label>
      <div class="col-sm-10">{{ form.unit_price }}</div>
    </div>
    <div class="form-group ">
      <label class="col-sm-2 control-label ">{% trans '采购总价:' %} </label>
      <div class="col-sm-10">{{ form.total_price }}</div>
    </div>        
    <div class="form-group ">
        <label class="col-sm-2 control-label ">{% trans '备注说明:' %} </label>
        <div class="col-sm-10">{{ form.remark }}</div>
    </div>   
    <div>
        <a class="btn btn-primary btn-save" type="submit" style="float:right;">{% trans '保存' %}</a>
    </div>

{% endblock %}
