<!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">
   <style type="text/css">
        .table-overlay .layui-table-body{overflow: visible;}
        .table-overlay .layui-table-cell{height: auto; overflow: visible;}
    </style>
</head>
<body>

  <div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" pad15>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <form class="layui-form" action="" lay-filter="component-form-element">
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>规格参数<button type="button" id="btn-add" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button></legend>
                        </fieldset>
                            <div id="consumableDataTable" class="table-overlay">
                                <table id="consumable_layTable" lay-filter="consumable_layTable" class="layui-hide"></table>
                            </div>
                        <button class="layui-btn" id="btn_save" lay-submit lay-filter="component-form-element" style="display: none">确定</button>
                     </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../layuiadmin/layui/layui.js"></script>
<script>
layui.link('../../../layuiadmin/style/autocomplete.css');
layui.config({
    base: '../../../layuiadmin/', //静态资源所在路径
     autocomplete: 'autocomplete'
}).extend({
    index: 'lib/index' //主入口模块
}).use(['index', 'form', 'table', 'laydate', 'utils', 'autocomplete'], function() {
    var $ = layui.$;
    var admin = layui.admin;
    var form = layui.form;
    var table = layui.table;
    var id = layui.view.getParameterByName('id');

    var consumable_tbWidth = $("#consumableDataTable").width();
    var consumable_layTable = "consumable_layTable";
    var consumable_tableIns = table.render({
        elem: '#consumable_layTable',
        id: consumable_layTable,
        data: [],
        width: consumable_tbWidth,
        page: false,
        limit: 1000,
        loading: true,
        even: true, //不开启隔行背景
        cols: [[
            {title: '序号', type: 'numbers'},
            {field: 'name', title: '名称', width: 100},
            {field: 'value', title: '值', width: 300,  templet: function (d) {
                    return '<input id="value' + d.num + '" value="' + d.value + '" type="text" lay-verify="required" autocomplete="off" class="layui-input">';
                }},
            {field: 'notes', title: '备注', width: 200},
            {
                field: 'id', minWidth: 80, title: '操作', templet: function (d) {
                    return '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" lay-id="' + d.num + '"><i class="layui-icon layui-icon-delete"></i>删除</a>';
                }
            }
        ]],
    });

    admin.req({
        url: '/vehicle/model_specs/?vehicle_model=' + id,
        done: function (res) {
            var data = res.data;
            var roldData = table.cache[consumable_layTable];
            var k=0;
            for (var i in data) {
                k = k + 1;
                var newRow = {
                    id: data[i].name,
                    name: data[i].name_text,
                    notes: data[i].notes,
                    value: data[i].value,
                    num: k
                };
                roldData.push(newRow);
            }
            consumable_tableIns.reload({
                data: roldData
            });

        }
    });


    table.on('tool(consumable_layTable)', function (obj) {
        var data = obj.data;
        var event = obj.event;
        switch (event) {
            case "del":
                obj.del();
                layer.msg('删除成功', {icon: 6});
                break;
        }
    });

    var getconsumableData = function () {
        var rows = table.cache[consumable_layTable];
        var data = [];
        for (var n in rows) {
            if (rows[n] == false) {
                continue;
            }
            var value = $('#value'+rows[n].num).val();
            var item = {
                num: rows[n].num,
                id: rows[n].id,
                name: rows[n].name,
                notes: rows[n].notes,
                value: value
            };
            data.push(item);
        }
        return data;
    };
    form.on('submit(component-form-element)', function (data) {
        var rows = table.cache[consumable_layTable];
        var save_data = [];
        for (var n in rows) {
            if (rows[n] == false) {
                continue;
            }
            var value = $('#value'+rows[n].num).val();
            var item = {
                key: rows[n].id,
                value: value
            };
            save_data.push(item);
        }
        admin.req({
            url: '/vehicle/model/' + id + '/set_specs/'
            ,type: 'post'
            , data: {data: JSON.stringify(save_data)}
            , done: function (res) {
                parent.layui.onSubmitChild(res.data);
            }
        });
        return false;
    });
    $('#btn-add').on('click', function () {
        layer.open({
            type: 2,
            title: '添加产品',
            area: ['90%', '98%'],
            btn: ['确定', '取消'],
            yes: function (index, dom) {
                layui.onSubmitChild = function (data) {
                    if(data.length === 0) {
                        layer.msg('请先选择记录！');
                        return;
                    }
                    var oldData = getconsumableData();
                    var k=0;
                    if (oldData.length > 0){
                        k = oldData[oldData.length-1].num;
                    }
                    for (var i in data) {
                        for(var m in oldData){
                            if(oldData[m].id === data[i].id){
                                layer.msg('规格['+data[i].name+']已添加！', {icon: 5});
                                return;
                            }
                        }
                        k = k + 1;
                        var newRow = {
                            id: data[i].id,
                            name: data[i].name,
                            notes: data[i].notes,
                            num: k,
                            value:''
                        };
                        oldData.push(newRow);
                    }
                    consumable_tableIns.reload({
                        data: oldData
                    });

                    layer.msg('添加成功！', {icon: 6});
                };
                layui.submitChild();
            },
            btn2: function (index, layero) {
                layer.close(index);//关闭当前按钮
            },
            content: '../option/search.html'
        });
    });
    parent.layui.submitChild = function () {
      $("#btn_save").click();
    };
});

  </script>
</body>
</html>
