{extend name='public/base' /}
{block name='content'}
{include file='public/content_header' /}
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css">
<style type="text/css">
    /* 图片展示
----------------------------------------------- */
ul.albums {
    display: block;
    min-height: 1px;
    height: auto;
    overflow: hidden;
    padding: 5px 0;
    margin: 0 15px;
    border: 1px dashed #ccc;
}
ul.albums li {
    position: relative;
    display: inline-block;
    padding: 5px;
    border: 1px solid #e5e5e5;
    margin: 5px 0 0 20px;
    cursor: pointer;
}

ul.albums li a.btn-close {
    display: block;
    position: absolute;
    z-index: 2;
    top: -8px;
    right: -10px;
    width: 20px;
    height: 20px;
}
ul.albums li a.btn-fm{width: 100px;
    display:none;
    height: 100px;
    border: 0px;
    opacity: 0.5;
    background-color: #000;
    line-height: 100px;
    text-align: center;
    color: #fff;
    position: absolute;}
ul.albums li:hover a.btn-fm{ display: block; }
ul.albums li a.btn-fm_z{
    display:none;
    color: #ccc;
    border: 0px;
    background-color: #000;
    position: absolute;
    bottom: 5px;
    left: 5px;
    opacity: 0.6;
    width: 40px;
    text-align: center;
}
</style>
    <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" style="min-height: 600px;">
                        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                          <ul class="layui-tab-title">
                            <li class="layui-this">基本设置</li>
                            <li>尺码库存</li>
                            <li>商品详情</li>
                            <li>精品搭配</li>
                          </ul>
                          <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <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="code" class="col-sm-2 control-label">商品编号</label>
                                    <div class="col-sm-10 col-md-4">
                                        <input id="code" name="code" value="{$data.code|default=''}" placeholder="请输入商品编号" type="text" class="form-control field-text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="goods_category_id" class="col-sm-2 control-label">所属分类</label>
                                    <div class="col-sm-10 col-md-4">
                                        <select name="goods_category_id" id="goods_category_id"
                                        class="form-control field-select" data-placeholder="请选择所属分类">
                                            <option value=""></option>
                                            {$goods_category_list|raw}
                                        </select>
                                    </div>
                                </div>
                                <script>
                                    $('#goods_category_id').select2();
                                </script>
                                <div class="form-group">
                                    <label for="brand_id" class="col-sm-2 control-label">所属品牌</label>
                                    <div class="col-sm-10 col-md-4">
                                        <select name="brand_id" id="brand_id"
                                        class="form-control field-select" data-placeholder="请选择所属分类">
                                            <option value=""></option>
                                            {foreach name='brand_list' id='item'}
                                            <option value="{$item.id}" {if isset($data.brand_id) &&
                                                    $data.brand_id==$item.id}selected{/if}>
                                                {$item.name}
                                            </option>
                                            {/foreach}
                                        </select>
                                    </div>
                                </div>
                                <script>
                                    $('#brand_id').select2();
                                </script>
                                <div class="form-group">
                                    <label for="img" class="col-sm-2 control-label">上传图片</label>
                                    <ul class="albums" id="albums">
                                        {foreach name="imgurl_list" item="img1"}
                                            <li class="img">
                                                <a class="btn-close layui-btn-primary" title="删除" href="javascript:void(0)" onclick="removeImg(this)">
                                                    <i class="layui-icon" style="font-size: 20px; line-height: 20px;"></i>
                                                </a>
                                                <a class="btn-fm layui-btn-primary" title="设为封面" href="javascript:void(0)" onclick="removeImg_l(this)">设置为封面</a>
                                                <a class="btn-fm_z layui-btn-primary" {if $img1.is_cover == 1}style="display: block;"{/if} title="封面" href="javascript:void(0)">封面</a>
                                                <img src="{$img1['thumb_image']}" width="100" height="100">
                                                <input type="hidden" name="ori_img[]" class="ori_img" value="{$img1['ori_image']}">
                                                <input type="hidden" name="thumb_img[]" class="thumb_img" class="inputAlbums" value="{$img1['thumb_image']}">
                                            </li>
                                        {/foreach}
                                        <li id="nophoto" ><img src="/static/admin/images/nophoto_100x100.png"></li>
                                    </ul>
                                    <input type="hidden" name="ori_fm_img" id="ori_fm_img" value="{$ori_img|default=''}">
                                    <input type="hidden" name="thumb_img_f" id="thumb_img_f" value="{$thumb_img|default=''}">
                                </div>
                                <script type="text/javascript">
                                    layui.use(['upload','laydate','form'], function(){
                                      var form = layui.form;
                                      var upload = layui.upload;
                                      //执行实例
                                      upload.render({
                                          elem: '#nophoto' //绑定元素
                                          ,url: "{:url('file/icon')}" //接口url
                                          ,data:{type:1,width:370,heigh:478}
                                          ,field:'image'
                                          ,multiple: true
                                          ,done: function(res){
                                              var html='';
                                              html+='<li class="img">';
                                              html+='<a class="btn-close layui-btn-primary" title="删除" href="javascript:void(0)" onclick="removeImg(this)">';
                                              html+='<i class="layui-icon" style="font-size: 20px; line-height: 20px;">&#xe640;</i>';
                                              html+='</a>';
                                              html+='<a class="btn-fm layui-btn-primary" title="设为封面" href="javascript:void(0)" onclick="removeImg_l(this)" img="">设置为封面</a>';
                                              html+='<a class="btn-fm_z layui-btn-primary" title="封面" href="javascript:void(0)">封面</a>';
                                              html+='<img src="'+res.data.avatar_logo_thum+'" width="100" height="100">'
                                              html+='<input type="hidden" name="ori_img[]" class="ori_img" value="'+res.data.avatar_logo+'">';
                                              html+='<input type="hidden" name="thumb_img[]" class="thumb_img" class="inputAlbums" value="'+res.data.avatar_logo_thum+'">';
                                              html+='</li>';
                                              $(".albums").prepend(html);
                                          }
                                          ,error: function(){
                                              layer.tips('图片错误', '#btn');
                                              return false;
                                          }
                                      });
                                    });

                                    function removeImg(obj){
                                        $(obj).parent().remove();
                                        var img=$('.img').length;
                                        if(img==5){
                                            $('#nophoto').hide();
                                        }else{
                                            $('#nophoto').show();
                                        }
                                        var ori_img=$(obj).siblings('.ori_img').val();
                                        var thumb_img=$('#thumb_img').val();
                                        if(ori_img==ori_fm_img){
                                            $('#ori_fm_img').val('');
                                            $('#thumb_img_f').val('');
                                        }
                                    }

                                    function removeImg_l(obj){
                                        var thumb_img=$(obj).siblings('.thumb_img').val();
                                        var ori_img=$(obj).siblings('.ori_img').val();
                                        $('#ori_fm_img').val(ori_img);
                                        $('#thumb_img_f').val(thumb_img);
                                        $('.btn-fm_z').css('display','none');
                                        $(obj).siblings('.btn-fm_z').css('display','block');
                                    }
                                </script>
                                <div class="form-group">
                                    <label for="original_price" class="col-sm-2 control-label">原价</label>
                                    <div class="col-sm-10 col-md-4">
                                        <input id="original_price" name="original_price" value="{$data.original_price|default='0.00'}"
                                               placeholder="请输入原价" type="number" class="form-control field-number">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="price" class="col-sm-2 control-label">售价</label>
                                    <div class="col-sm-10 col-md-4">
                                        <input id="price" name="price" value="{$data.price|default='0.00'}"
                                               placeholder="请输入售价" type="number" class="form-control field-number">
                                    </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 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>
                                <script>
                                    $('#sort_number')
                                        .bootstrapNumber({
                                            upClass: 'success',
                                            downClass: 'primary',
                                            center: true
                                        });
                                </script>
                            </div>
                            <div class="layui-tab-item">
                                <div class="form-group">
                                    <div class="col-sm-10">
                                        <table class="table table-hover table-bordered datatable" width="100%">
                                            <thead>
                                            <tr class="input-type">
                                                <th>尺码</th>
                                                <th>库存</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                                {foreach name='size_list' key='k' id='item1'}
                                                <tr>
                                                    <td>
                                                        <label>
                                                            <input class="form-control field-type" value="{$item1.size}" name="size[{$k}][]" placeholder="请输入数量" readonly="readonly">
                                                        </label>
                                                    </td>
                                                    <td>
                                                        <label>
                                                            <input class="form-control field-type" value="{$item1.num}" name="number[{$k}][]" placeholder="请输入数量">
                                                        </label>
                                                    </td>
                                                </tr>
                                                {/foreach}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div class="form-group">
                                    <label for="detail" class="col-sm-2 control-label">单品信息</label>
                                    <div class="col-sm-10 col-md-4">
                                        <textarea id="detail" name="detail" class="form-control" rows="3" placeholder="请输入描述">{$data.detail|default=''}</textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="model" class="col-sm-2 control-label">模特信息</label>
                                    <div class="col-sm-10 col-md-4">
                                        <input id="model" name="model" value="{$data.model|default=''}"
                                               placeholder="请输入模特信息" type="text" class="form-control field-number">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="goods_size" class="col-sm-2 control-label">尺码信息</label>
                                    <div class="col-sm-10 col-md-4">
                                        <textarea id="goods_size" name="goods_size" class="form-control" rows="3" placeholder="请输入尺码信息">{$data.goods_size|default=''}</textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div class="form-group">
                                    <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='collocation_goods' key='k' id='item1'}
                                                <tr>
                                                    <td>
                                                        <label>
                                                            <select style="min-width: 380px;width: 420px;" name="goods_ids[{$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>
                          </div>
                        </div>
                    </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_idsFORM_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: {
            'goods_category_id': {
                required: true,
            },
            'brand_id': {
                required: true,
            },
            'name': {
                required: true,
            },
            'origin_price': {
                required: true,
            },
            'price': {
                required: true,
            },
            'attr': {
                required: true,
            },
            'detail': {
                required: true,
            },
            'weight': {
                required: true,
            },
            'stock': {
                required: true,
            },
            'sort_number': {
                required: true,
            },
            'status': {
                required: true,
            },

        },
        messages: {
            'goods_category_id': {
                required: "所属分类不能为空",
            },
            'brand_id': {
                required: "品牌不能为空",
            },
            'name': {
                required: "名称不能为空",
            },
            'origin_price': {
                required: "原价不能为空",
            },
            'price': {
                required: "售价不能为空",
            },
            'attr': {
                required: "规格不能为空",
            },
            'detail': {
                required: "详情不能为空",
            },
            'weight': {
                required: "重量不能为空",
            },
            'stock': {
                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();
    }
    //------------------------------------精选配置结束-------------------------------//
</script>
{/block}