<!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"/>
    <link rel="stylesheet" type="text/css" href="../../layuiadmin/layui/ueditor/themes/default/css/umeditor.css"/>
    <script type="text/javascript" src="../../layuiadmin/layui/ueditor/third-party/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../layuiadmin/layui/ueditor/umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../layuiadmin/layui/ueditor/umeditor.js"></script>
    <script type="text/javascript" src="../../layuiadmin/layui/ueditor/lang/zh-cn/zh-cn.js"></script>
    <style>
        .xm-select-parent .xm-form-selected dl {
            height: 160px;
        }
    </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">
                       <input id="id_series" name="series" class="layui-input" autocomplete="off" 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="name" 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="advance_pay_show" placeholder="请输入定金" lay-verify="required|numberGtZ" 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="equal_pay_show" placeholder="请输入顶现金额" lay-verify="required|numberGtZ" 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="price_show" lay-verify="required|numberGtZ" 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="shop_price_show" lay-verify="required|numberGtZ" placeholder="请输入本店价格" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div>
                    <label class="layui-form-label">车型标签：</label>
                    <div class="layui-input-block">
                      <select name="tags" xm-select="manager_tags"></select>
                    </div>
                </div>
                <div>
                  <label class="layui-form-label">提成金额：</label>
                  <div class="layui-input-block">
                    <input type="text" name="commission_amount" placeholder="请输入提成金额" lay-verify="numberGeZ" autocomplete="off" class="layui-input">
                    <div class="layui-word-aux" ><span style="color: red;">佣金=提成金额</span></div>
                  </div>
                </div>
                <div>
                  <label class="layui-form-label">排序：</label>
                  <div class="layui-input-block">
                    <input type="text" name="sort" placeholder="请输入排序" lay-verify="numberGez"  autocomplete="off" class="layui-input">
                  </div>
                </div>

                <div >
                  <label class="layui-form-label">在用：</label>
                  <div class="layui-input-block">
                    <input type="checkbox" name="enabled" lay-skin="switch" lay-text="是|否" checked="" value="1">
                  </div>
                </div>
                <div >
                  <label class="layui-form-label">热门：</label>
                  <div class="layui-input-block">
                      <input id="id_checked" type="checkbox" name="is_hot" lay-skin="switch" lay-text="是|否" checked="">
                  </div>
                </div>
                <div>
                <label class="layui-form-label"><font color='red' size="4">*</font>车型介绍：</label>
                  <div class="layui-input-block">
                      <script type="text/plain" id="myEditor"></script>
                  </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 class="layui-btn" id="id_save" 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.link('../../../layuiadmin/style/autocomplete.css');
  layui.config({
    base: '../../../layuiadmin/' //静态资源所在路径

  }).extend({
    index: 'lib/index',
    formSelects: 'formSelects-v4',
    autocomplete: 'autocomplete'
  }).use(['index', 'form', 'utils', 'upload', 'autocomplete', 'formSelects'], function(){
    var $ = layui.$
    ,admin = layui.admin
    ,upload = layui.upload
    ,autocomplete = layui.autocomplete
    ,formSelects = layui.formSelects
    ,form = layui.form;
    var id = layui.view.getParameterByName('id');
    var series = null;

    if (!id || id === '') {
        $('#id_checked').removeAttr('checked');
    }

    var um = UM.getEditor('myEditor');
    um.setWidth('100%');
    $(".edui-body-container").css("width", "98%");

    autocomplete.render({
        elem:$('#id_series'),
        url:'/vehicle/series/search/',
        template_val:'',
        template_txt:'<span class=\'layui-badge layui-bg-gray\'>{{d.brand_name}} - {{d.name}}',
        onselect: function (resp) {
            $('#id_series').val(resp.brand_name + '-' + resp.name);
            series = resp.id;
        }
    });


    formSelects.value('manager_tags', []);
    admin.req({
        url: '/option/search/?type=2'
        ,done: function(res){
            var _nodes = res.data;
            formSelects.data('manager_tags', 'local', {
            arr: _nodes,
            tree: {
                //在点击节点的时候, 如果没有子级数据, 会触发此事件
                nextClick: function(id, item, callback){
                    return false;
                    },
                }
            });
            //formSelects.value('manager_range', manages);
            loadData();
        }
    });

    var loadData = function () {
        if(id){
            var editdata = JSON.parse(JSON.stringify(parent.layui.table.editdata)); // 框架有Bug所以这么转换
            form.val("component-form-element", editdata);
            $('#id_series').val(editdata.brand_name + '-' + editdata.series_name);
            series = editdata.series;
            formSelects.value('manager_tags', editdata.tags);
            um.setContent(editdata.describe);
            if(editdata.thumbnail_url){
                $('#demo1').attr('src', editdata.thumbnail_url);
            }
        }
    };


    form.render(null, 'component-form-element');

    var form_data = {field:{}};
    if (id){
          var url = '/vehicle/model/' +id + '/update_model/';
      }else{
          url =  '/vehicle/model/';
      }
    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:{
             series: function(){return form_data.field.series;},
             name: function(){return form_data.field.name;},
             price: function(){return form_data.field.price_show;},
             shop_price: function(){return form_data.field.shop_price_show},
             advance_pay: function(){return form_data.field.advance_pay_show;},
             equal_pay: function(){return form_data.field.equal_pay_show;},
             notes: function(){return form_data.field.notes;},
             describe: function(){return form_data.field.describe;},
             tags: function(){return form_data.field.tags;},
             commission_ratio: function(){return form_data.field.commission_amount;},
             sort: function(){return form_data.field.sort;},
             enabled: function(){
                 if (form_data.field.enabled){
                     return form_data.field.enabled;
                 }else{
                     return '0';
                 }
             },
             is_hot: function(){
                 if (form_data.field.is_hot){
                     return form_data.field.is_hot;
                 }else{
                     return '0';
                 }
             }
             },
        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 (!series){
            layer.msg('请搜索并选择车型');
            return false;
        }
        //console.log('000000000000000000000000000000');
        //console.log(JSON.stringify(data.field));

        if (!id && !data.field.image) {
            layer.msg('车型图片是必填项',{icon: 5});
            return false;
        }

        var describe = UM.getEditor('myEditor').getContent();
        data.field['describe'] = describe;
        data.field['series'] = series;
        if (data.field.image){
            form_data = data;
            $('#upload_image').click();
        }else{
            var save_data = data.field;
            save_data['price'] = data.field.price_show;
            save_data['shop_price'] = data.field.shop_price_show;
            save_data['advance_pay'] = data.field.advance_pay_show;
            save_data['equal_pay'] = data.field.equal_pay_show;
            save_data['commission_ratio'] = data.field.commission_amount;
            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>
