{extend name='public/base' /}
{block name='content'}
{include file='public/content_header' /}
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <!-- 表单头部 -->
                <div class="box-header with-border">
                    <div class="btn-group">
                        <a class="btn flat btn-sm btn-default BackButton">
                            <i class="fa fa-arrow-left"></i>
                            返回
                        </a>
                    </div>
                </div>
                <!-- 表单 -->
                <form id="dataForm" class="form-horizontal dataForm" action="" method="post" enctype="multipart/form-data">
                    <!-- 表单字段区域 -->
                    <div class="box-body">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">栏目名称</label>
                            <div class="col-sm-10 col-md-4">
                                <input id="name" name="name" value="{$data.name|default=''}" placeholder="请输入栏目名称" type="text" class="form-control field-text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="type" class="col-sm-2 control-label">显示模式</label>
                            <div class="col-sm-10 col-md-4 layui-form">
                                <input type="radio" name="type" value="1" title="模式一" {if isset($data.type) && $data.type=='1'}checked{/if}>
                                <input type="radio" name="type" value="2" title="模式二" {if isset($data.type) && $data.type=='2'}checked{/if}>
                                <input type="radio" name="type" value="3" title="模式三" {if isset($data.type) && $data.type=='3'}checked{/if}>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="goods_ids" class="col-sm-2 control-label">商品列表</label>
                            <div class="col-sm-10">
                                <table id="dataList" class="table table-hover table-bordered datatable" width="100%">
                                    <thead>
                                    <tr class="input-type">
                                        <th>商品名称</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="dataBody">
                                        {foreach name='goods_ids' key='k' id='item1'}
                                        <tr>
                                            <td>
                                                <label>
                                                    <select style="min-width: 380px;width: 420px;" name="goods_id[{$k}][]" class="select2" data-live-search="true" tabindex="-98">
                                                        {foreach name='goods_list' id='item'}
                                                        <option value="{$item.id}" {if isset($item1) &&
                                                                $item1==$item.id}selected{/if}>
                                                            {$item.name}
                                                        </option>
                                                        {/foreach}
                                                    </select>
                                                </label>
                                            </td>
                                            <td>
                                                <!-- <a class="btn btn-xs btn-primary" onclick="addNewField(this,1)">插入</a> -->
                                                <a class="btn btn-xs btn-success" onclick="addNewField(this,2)">追加</a>
                                                <a class="btn btn-xs btn-danger" onclick="delThisField(this,1)">删除</a>
                                            </td>
                                        </tr>
                                        {/foreach}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="sort_number" class="col-sm-2 control-label">排序(升序）</label>
                            <div class="col-sm-10 col-md-4">
                                <input id="sort_number" name="sort_number" value="{$data.sort_number|default='1000'}" placeholder="请输入排序(升序）" type="text" class="form-control field-text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="status" class="col-sm-2 control-label">是否显示</label>
                            <div class="col-sm-10 col-md-4">
                            <input class="input-switch"  id="status" value="1" {if(!isset($data) ||$data.status==1)}checked{/if} type="checkbox" />
                            <input class="switch field-switch" placeholder="是否显示" name="status" value="{$data.status|default='1'}" hidden />
                            </div>
                        </div>

                        <script>
                            $('#status').bootstrapSwitch({
                                onText: "是",
                                offText: "否",
                                onColor: "success",
                                offColor: "danger",
                                onSwitchChange: function (event, state) {
                                    $(event.target).closest('.bootstrap-switch').next().val(state ? '1' : '0').change();
                                }
                            });
                        </script>
                    </div>
                    <!-- 表单底部 -->
                    <div class="box-footer">
                        {:token()}
                        <div class="col-sm-2">
                        </div>
                        <div class="col-sm-10 col-md-4">
                            {if !isset($data)}
                                <div class="btn-group pull-right">
                                    <label class="createContinue">
                                        <input type="checkbox" value="1" id="_create" name="_create"
                                                                   title="继续添加数据">继续添加</label>
                                </div>
                             {/if}
                            <div class="btn-group">
                                <button type="submit" class="btn flat btn-info dataFormSubmit">
                                    保存
                                </button>
                            </div>
                            <div class="btn-group">
                                <button type="reset" class="btn flat btn-default dataFormReset">
                                    重置
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<table>
    <tbody id="data-template" style="display: none">
    <tr>
        <td>
            <label>
                <select name="goods_idFORM_INDEX[]" style="min-width: 380px;width: 420px;" class="form-control field-select select2" data-placeholder="请选择商品">
                    <option value=""></option>
                    {foreach name='goods_list' id='item'}
                    <option value="{$item.id}">
                        {$item.name}
                    </option>
                    {/foreach}
                </select>
            </label>
        </td>
        <td>
            <a class="btn btn-xs btn-success" onclick="addNewField(this,2)">追加</a>
            <a class="btn btn-xs btn-danger" onclick="delThisField(this,1)">删除</a>
        </td>
    </tr>
    </tbody>
</table>
<script>
    /** 表单验证 **/
    $('#dataForm').validate({
        rules: {
                'name': {
        required: true,
    },
    'sort_number': {
        required: true,
    },
    'status': {
        required: true,
    },
        },
        messages: {
                'name': {
        required: "栏目名称不能为空",
    },
    'sort_number': {
        required: "排序(升序）不能为空",
    },
    'status': {
        required: "是否上架不能为空",
    },

        }
    });

    //表单索引
var formIndex ='{$number}';
//添加新的字段
function addNewField(obj, type) {
    formIndex++;
    let template = $("#data-template").html().replace(/FORM_INDEX/g, '[' + formIndex + ']').replace(/INDEX_ID/g, formIndex);
    if (obj == null) {
        $("#dataBody").append(template);
    } else {
        if (type === 1) {
            $(obj).parent().parent().before(template);
        } else {
            $(obj).parent().parent().after(template);
        }
    }
    laydate.render({ 
      elem: '#end_time'+formIndex
      ,type: 'datetime'
    });
    //刷新 dataBody DOM后的操作
    dataBodyRefreshed();
}
$(function () {
    //默认添加一行空的字段
    if(formIndex==0){
    addNewField(null, 1);
    }else{
        dataBodyRefreshed();
    }
});

//删除当前字段
function delThisField(obj) {
    layer.confirm('您确认删除本行吗？', {title: '删除确认', closeBtn: 1, icon: 3}, function () {
        $(obj).parent().parent().remove();
        layer.closeAll();
    });
}

//列表刷新后的操作
function dataBodyRefreshed() {
    $('[data-toggle="tooltip"]').tooltip();
    $('#dataBody .select2').select2();
}

layui.use('form', function(){
    var form = layui.form;
    form.render();
});
</script>
{/block}