<!DOCTYPE html>
<html>
<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">
  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  <link rel="stylesheet" type="text/css" href="../../layuiadmin/style/formSelects-v4.css"/>
     <style>
        img{
            width: 40%;
            height: 30%;
        }
    </style>
</head>
<body>

  <div class="layui-fluid">
        <div class="layui-card">

          <div class="layui-card-body" pad15>
            <form class="layui-form" action="" lay-filter="component-form-element">
              <div class="layui-row layui-col-space10 layui-form-item">
                <div>
                  <label class="layui-form-label"><font color='red' size="4">*</font>品牌：</label>
                  <div class="layui-input-block">
                    <select id="id_brand" name="brand" lay-verify="required">
                    </select>
                  </div>
                </div>
                <div>
                  <label class="layui-form-label"><font color='red' size="4">*</font>车型：</label>
                  <div class="layui-input-block">
                    <input type="text" name="model" lay-verify="required" placeholder="请输入车型" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div>
                  <label class="layui-form-label"><font color='red' size="4">*</font>车牌号：</label>
                  <div class="layui-input-block">
                    <input type="text" name="number" lay-verify="required" placeholder="请输入车牌号" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div>
                  <label class="layui-form-label"><font color='red' size="4">*</font>指导价：</label>
                  <div class="layui-input-block">
                    <input type="text" name="guide_price" lay-verify="required|intGeZ" placeholder="请输入指导价" autocomplete="off" class="layui-input">
                  </div>
                </div>
                 <div>
                  <label class="layui-form-label"><font color='red' size="4">*</font>销售价：</label>
                  <div class="layui-input-block">
                    <input type="text" name="sale_price" lay-verify="required|intGeZ" placeholder="请输入销售价" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div>
                  <label class="layui-form-label">变速箱：</label>
                  <div class="layui-input-block">
                    <input type="text" name="gearbox"  placeholder="请输入变速箱类型" autocomplete="off" class="layui-input">
                  </div>
                </div>
                 <div>
                  <label class="layui-form-label"><font color='red' size="4">*</font>颜色：</label>
                  <div class="layui-input-block">
                    <input type="text" name="color" lay-verify="required" placeholder="请输入颜色" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div>
                  <label class="layui-form-label"><font color='red' size="4">*</font>排量：</label>
                  <div class="layui-input-block">
                    <input type="text" name="displacement" lay-verify="required" placeholder="请输入排量" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div>
                  <label class="layui-form-label"><font color='red' size="4">*</font>排放标准：</label>
                  <div class="layui-input-block">
                    <input type="text" name="emission" lay-verify="required" placeholder="请输入排放标准" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div>
                  <label class="layui-form-label">车所在地：</label>
                  <div class="layui-input-block">
                    <input type="text" name="address"  placeholder="请输入车辆所在地" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div>
                  <label class="layui-form-label">座位数：</label>
                  <div class="layui-input-block">
                    <input type="text" name="seat_count" lay-verify="intGeZ" placeholder="请输入座位数" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div>
                  <label class="layui-form-label">上牌日期：</label>
                  <div class="layui-input-block">
                    <input id="plate_date" type="text" name="plate_date" placeholder="请输入上牌日期" autocomplete="off" class="layui-input" lay-verify="required">
                  </div>
                </div>
                <div>
                  <label class="layui-form-label">出厂日期：</label>
                  <div class="layui-input-block">
                    <input id="factory_date" type="text" name="factory_date" placeholder="请输入出厂日期" autocomplete="off" class="layui-input" lay-verify="required">
                  </div>
                </div>
                <div>
                  <label class="layui-form-label"><font color='red' size="4">*</font>燃油类型：</label>
                  <div class="layui-input-block">
                    <input type="text" name="oil_type" lay-verify="required" placeholder="请输入燃油类型" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div>
                  <label class="layui-form-label"><font color='red' size="4">*</font>里程：</label>
                  <div class="layui-input-block">
                    <input type="text" name="mileage" lay-verify="required|intGeZ" placeholder="请输入里程" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div>
                  <label class="layui-form-label">备注：</label>
                  <div class="layui-input-block">
                    <input type="text" name="notes" placeholder="请输入备注" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div>
                  <label class="layui-form-label"><font color='red' size="4">*</font>车型图片：</label>
                  <div class="layui-input-block">
                      <button type="button" class="layui-btn-sm" id="test1">上传图片</button><br><br>
                      <img class="layui-upload-img" id="demo1" style="max-width: 300px; max-height: 200px;">
                  </div>
                </div>
                <button id="id_save" class="layui-btn" lay-submit lay-filter="component-form-element" style="display: none">保存</button>
                 <button class="layui-btn" type="button" id="upload_image" style="display: none"></button>
              </div>
            </form>
          </div>
        </div>
      </div>


  <script src="../../layuiadmin/layui/layui.js"></script>
  <script>
  layui.config({
    base: '../../../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index',
    formSelects: 'formSelects-v4'
  }).use(['index', 'form', 'utils', 'upload', 'laydate'], function(){
    var $ = layui.$
    ,admin = layui.admin
    ,laydate = layui.laydate
    ,upload = layui.upload
    ,form = layui.form;
    var id = layui.view.getParameterByName('id');

    laydate.render({
        elem: '#plate_date'
        ,type: 'date'
        ,trigger: 'click'
    } );
    laydate.render({
        elem: '#factory_date'
        ,type: 'date'
        ,trigger: 'click'
    });

    admin.req({
        url: '/foundation/option/?type=0',
        done: function (res) {
            var brands = res.data;
            var type_node = $('#id_brand');
            for (var i in brands) {
                var pid = brands[i].id;
                var value = brands[i].name;
                type_node.append("<option value='" + pid + "'>" + value + "</option>");
            }
            form.render();
            loadData();
        }
    });

    var loadData = function () {
        if(id){
            var editdata = JSON.parse(JSON.stringify(parent.layui.table.editdata)); // 框架有Bug所以这么转换
            form.val("component-form-element", editdata);
            if(editdata.thumbnail_url){
                $('#demo1').attr('src', editdata.thumbnail_url);
            }
        }
    };

     var form_data = {field:{}};
    if (id){
          var url = '/usedvehicle/usedvehicle/' +id + '/update_model/';
      }else{
          url =  '/usedvehicle/usedvehicle/';
      }

    upload.render({
         elem: '#test1',
         url: url,
         auto: false,
         field: 'image',
         bindAction: '#upload_image',
         choose: function(obj) {
             obj.preview(
                 function(index, file, result) {
                     $('#demo1').attr('src', result);
                 }
             );
         },
         data:{
             brand: function(){return form_data.field.brand;},
             model: function(){return form_data.field.model;},
             number: function(){return form_data.field.number;},
             guide_price: function(){return form_data.field.guide_price},
             sale_price: function(){return form_data.field.sale_price;},
             gearbox: function(){return form_data.field.gearbox;},
             color: function(){return form_data.field.color;},
             displacement: function(){return form_data.field.displacement;},
             emission: function(){return form_data.field.emission;},
             address: function(){return form_data.field.address;},
             seat_count: function(){return form_data.field.seat_count;},
             plate_date: function(){return form_data.field.plate_date;},
             factory_date: function(){return form_data.field.factory_date;},
             oil_type: function(){return form_data.field.oil_type;},
             mileage: function(){return form_data.field.mileage;},
             notes: function(){return form_data.field.notes;},
             },
        done: function (res) {
            if (res.code != 0) {
                layer.msg(res.msg);
            }else {
                parent.layui.onSubmitChild(res.data);
            }
        },
        error: function () {
            layer.msg('保存失败');
        }
    });

    form.on('submit(component-form-element)', function(data){
        if (data.field.image){
            form_data = data;
            $('#upload_image').click();
        }else {
            admin.req({
              url: url
              ,data: data.field
              ,type: 'post'
              ,done: function(res){
                  parent.layui.onSubmitChild(res.data);
              }
            });
        }

      return false;
    });

    parent.layui.submitChild = function () {
      $("#id_save").click();
    };
  });
  </script>
</body>
</html>