{extend name='admin@main'}

{block name="content"}

{include file='mall@store_goods/form_style'}
<style>
    .layui-form-radio{
        margin: 0 !important;
        padding-right:0 !important;
    }
    .layui-form-select{
        margin-right: 10px !important;
    }
    .layui-col-xs9{
        width: 90%;
    }
</style>
<form onsubmit="return false;" id="GoodsForm" data-auto="true" method="post" class='layui-form layui-card' autocomplete="off">

    <div class="layui-card-body think-box-shadow padding-left-40">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">商品设置</li>
            </ul>
            <div class="layui-tab-content">
                <!--基础设置-->
                <div class="layui-tab-item layui-show">
                    <!--基础设置start-->
                    <div class="layui-form-item layui-row layui-col-space15">
                        <label class="layui-col-xs9 relative">
                            <span class="color-green">名称</span>
                            <input name="name" required class="layui-input" placeholder="请输入商品名称" value="{$vo.name|default=''}">
                        </label>
                    </div>

                    <div class="layui-form-item layui-row layui-col-space15">
                        <label class="layui-col-xs9 relative">
                            <span class="color-green">标签</span><span class="margin-left-10 color-gray">多个半角逗号(,)隔开</span>
                            <textarea placeholder="请输入标签" class="layui-textarea" name="label">{$vo.label|default=''}</textarea>
                        </label>
                    </div>

                    <div class="layui-form-item layui-row layui-col-space15">
                        <label class="layui-col-xs9 relative" style="width: 100%;">
                            <span class="color-green">商品分类</span>
                        </label>
                        <div style="width: 100%">
                            <div style="width: 15%;float: left;">
                                <select class="layui-select"  id="first_classify" name="first_classify" lay-filter="first_classify" lay-search>
                                    <option selected data-first_key="-1" selected value="0">请选择</option>
                                    {if !empty($goods_cate)}
                                    {foreach $goods_cate as $ck=>$cv}
                                    {if isset_full_check($vo,'first_classify',$cv['id'])}
                                    <option selected data-first_key="{$ck}" value="{$cv['id']}">{$cv['title']}</option>
                                    {else}
                                    <option data-first_key="{$ck}" value="{$cv['id']}">{$cv['title']}</option>
                                    {/if}
                                    {/foreach}
                                    {/if}
                                </select>
                            </div>
                            <div style="width: 15%;float: left">
                                <select class="layui-select"  id="second_classify" name="second_classify" lay-filter="second_classify" lay-search>

                                </select>
                            </div>
                            <div style="width: 15%;float: left">
                                <select class="layui-select"  id="third_classify" name="third_classify" lay-filter="third_classify" lay-search>

                                </select>
                            </div>
                            <div style="width: 12%;float: left">
                                <select class="layui-select"  id="fourth_classify" name="fourth_classify" lay-filter="fourth_classify" lay-search>

                                </select>
                            </div>
                            <input type="hidden" id="first"  value="{$vo.first_classify|default='-1'}"/>
                            <input type="hidden" id="second" value="{$vo.second_classify|default='-1'}"/>
                            <input type="hidden" id="third"  value="{$vo.third_classify|default='-1'}"/>
                        </div>
                    </div>


                    <div class="layui-form-item layui-row layui-col-space15" >
                        <label class="layui-col-xs9 relative">
                            <span class="color-green">供应商</span>
                        </label>
                        <div class="layui-inline" style="top: -15px;margin-bottom: -25px">
                            <div class="layui-input-inline">
                                <select name="supplier_id" lay-filter ="supplier_id">
                                    <option value="0">请选择</option>
                                    {foreach $supplier_list as $dk=>$dv}
                                    <option  {if isset($vo.supplier_id) && $vo.supplier_id == $dv['id'] }selected{/if} value="{$dv['id']}">{$dv['title']}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                    </div>


                    <div class="layui-form-item layui-row layui-col-space15">
                        <label class="layui-col-xs9 relative">
                            <span class="color-green">关联资料</span>
                        </label>
                        <div class="layui-inline" style="top: -15px;margin-bottom: -25px">
                            <div class="layui-input-inline">
                                <select name="datum_id" lay-filter ="datum_id">
                                    <option value="0">请选择</option>
                                    {foreach $datum_list as $dk=>$dv}
                                    <option  {if isset($vo.datum_id) && $vo.datum_id == $dv['id'] }selected{/if} data-dl_key="{$dk}" value="{$dv['id']}">{$dv['title']}</option>
                                    {/foreach}
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="datum_item" lay-filter ="datum_item">
                                    <option value="0">请选择</option>
                                    {foreach $datum_list as $vk=>$vv}
                                    {if isset($vo.datum_id) && $vo.datum_id == $vv['id'] }
                                    {foreach $vv['url_arr'] as $cln}
                                    <option {if isset($vo.datum_item) && $vo.datum_item == $cln['id']} selected  {/if} value="{$cln['id']}">{$cln['title']}</option>
                                    {/foreach}
                                    {/if}
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                    </div>


                    <div class="layui-form-item layui-row layui-col-space15">
                        <label class="layui-col-xs9 relative">
                            <span class="color-green">关联视频</span>
                        </label>
                        <div class="layui-inline" style="top: -15px;margin-bottom: -25px">
                            <div class="layui-input-inline">
                                <select name="video_id" lay-filter ="video_id">
                                    <option value="0">请选择</option>
                                    {foreach $video_list as $vk=>$vv}
                                    <option  {if isset($vo.video_id) && $vo.video_id == $vv['id'] }selected{/if} data-vl_key="{$vk}" value="{$vv['id']}">{$vv['title']}</option>
                                    {/foreach}
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="video_item" lay-filter ="video_item">
                                    <option value="0">请选择</option>
                                    {foreach $video_list as $vk=>$vv}
                                    {if isset($vo.video_id) && $vo.video_id == $vv['id'] }
                                    {foreach $vv['video_arr'] as $cln}
                                    <option {if isset($vo.video_item) && $vo.video_item == $cln['id']} selected  {/if} value="{$cln['id']}">{$cln['title']}</option>
                                    {/foreach}
                                    {/if}
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item layui-row layui-col-space15">
                        <label class="layui-col-xs9 relative">
                            <span class="color-green">关联文章</span>
                        </label>
                        <div class="layui-inline" style="top: -15px;margin-bottom: -25px">
                            <div class="layui-input-inline">
                                <select name="article_id" lay-filter ="article_id">
                                    <option value="0">请选择</option>
                                    {foreach $article_list as $vk=>$vv}
                                    <option  {if isset($vo.article_id) && $vo.article_id == $vv['id'] }selected{/if} data-vl_key="{$vk}" value="{$vv['id']}">{$vv['title']}</option>
                                    {/foreach}
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="article_item" lay-filter ="article_item">
                                    <option value="0">请选择</option>
                                    {foreach $article_list as $vk=>$vv}
                                    {if isset($vo.article_id) && $vo.article_id == $vv['id'] }
                                    {foreach $vv['item_children'] as $cln}
                                    <option {if isset($vo.article_item) && $vo.article_item == $cln['id']} selected  {/if} value="{$cln['id']}">{$cln['title']}</option>
                                    {/foreach}
                                    {/if}
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item layui-row layui-col-space15">
                        <label class="layui-col-xs9 relative">
                            <span class="color-green label-required-prev">图片</span>
                            <table class="layui-table">
                                <thead>
                                <tr>
                                    <th class="text-left">展示图片</th>
                                </tr>
                                <tr>
                                    <td width="auto" class="text-left"><input name="cover" type="hidden" value="{$vo.cover|default=''}"></td>
                                </tr>
                                </thead>
                            </table>
                        </label>
                        <script>$('[name="cover"]').uploadMultipleImage()</script>
                    </div>

                    <div class="layui-form-item layui-row layui-col-space15">
                        <label class="layui-col-xs9 relative">
                            <span class="color-green">排序</span>
                            <input name="sort" required class="layui-input" placeholder="请输入排序号" value="{$vo.sort|default='0'}">
                        </label>
                    </div>


                    <div class="layui-form-item layui-row layui-col-space15">
                        <label class="layui-col-xs9 relative">
                            <span class="color-green">阅读量</span>
                            <input name="read_num" required class="layui-input" placeholder="请输入阅读量" value="{$vo.read_num|default='0'}">
                        </label>
                    </div>

                    <div class="layui-form-item layui-row layui-col-space15">
                        <label class="layui-col-xs9 relative">
                            <span class="color-green">转发量</span>
                            <input name="transmit_num" required class="layui-input" placeholder="请输入转发量" value="{$vo.transmit_num|default='0'}">
                        </label>
                    </div>

                    <div class="layui-form-item layui-row layui-col-space15">
                        <label class="layui-col-xs9 relative">
                            <span class="color-green">商品详情</span>
                            <textarea name="content">{$vo.content|default=""}</textarea>
                        </label>
                    </div>


                    <div class="layui-form-item text-center">
                        {notempty name='vo.id'}<input type="hidden" name="id" value="{$vo.id}">{/notempty}
                      <!--  <input type='hidden' value='{$supplier_id|default="0"}' name='supplier_id'>
                        <input type='hidden' value='{$company_id|default="0"}' name='company_id'>-->
                        <button class="layui-btn" type="submit">保存</button>
                        <button class="layui-btn layui-btn-danger" type='button' onclick="history.go(-1)" data-close>返回</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</form>
{/block}

{block name='script'}

<script>
    window.form.render();

    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element;
        var active = {
            tabAdd: function(){
                element.tabAdd('demo', {
                    title: '新选项'+ (Math.random()*1000|0)
                    ,content: '内容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime()
                })
            }
            ,tabDelete: function(othis){
                element.tabDelete('demo', '44');
                othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
                element.tabChange('demo', '22');
            }
        };

        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function(elem){
            location.hash = 'test='+ $(this).attr('lay-id');
        });

    });

    require(['ckeditor', 'angular'], function () {
        window.createEditor('[name="content"]', {
            height: 500,

        });
    })
    // 关联视频监听
    form.on('select(video_id)', function(data){
        var cl_html = '<option value="0">请选择</option>';
        if(data.value == 0) {
            $("select[name='video_item']").html(cl_html);
        }else{
            var vl_key =  data.elem[data.elem.selectedIndex].dataset.vl_key;
            var video_list = {:json_encode($video_list)};
            $.each(video_list[vl_key]['video_arr'],function (ck,cv) {
                cl_html +='<option value="'+cv.id+'">'+cv.title+'</option>';
            })
            $("select[name='video_item']").html(cl_html);
        }
        window.form.render();
    });

    // 关联资料监听
    form.on('select(datum_id)', function(data){
        var cl_html = '<option value="0">请选择</option>';
        if(data.value == 0) {
            $("select[name='datum_item']").html(cl_html);
        }else{
            var dl_key =  data.elem[data.elem.selectedIndex].dataset.dl_key;
            var datum_list = {:json_encode($datum_list)};
            $.each(datum_list[dl_key]['url_arr'],function (ck,cv) {
                cl_html +='<option value="'+cv.id+'">'+cv.title+'</option>';
            })
            $("select[name='datum_item']").html(cl_html);
        }
        window.form.render();
    });

    // 文章监听
    form.on('select(article_id)', function(data){
        var cl_html = '<option value="0">请选择</option>';
        if(data.value == 0) {
            $("select[name='article_item']").html(cl_html);
        }else{
            var vl_key =  data.elem[data.elem.selectedIndex].dataset.vl_key;
            var article_list = {:json_encode($article_list)};
            $.each(article_list[vl_key]['item_children'],function (ck,cv) {
                cl_html +='<option value="'+cv.id+'">'+cv.title+'</option>';
            })
            $("select[name='article_item']").html(cl_html);
        }
        window.form.render();
    });


    // 四级分类联动 start
    var sel_second  = {:isset($vo['second_classify']) ? $vo['second_classify']:0};
    var sel_third   = {:isset($vo['third_classify']) ? $vo['third_classify']:0};
    var sel_fourth   = {:isset($vo['fourth_classify']) ? $vo['fourth_classify']:0};
    var goods_spec  = {:json_encode($goods_cate)};
    first(1);
    function first(source){
        // 将其他选择框置空
        var first_key = $("select[name='first_classify']").find("option:selected").data("first_key")
        $("#first").val(first_key);
        $("select[name='second_classify']").html('');
        $("select[name='third_classify']").html('');
        $("select[name='fourth_classify']").html('');
        // 没有下级不继续
        if(first_key == -1 || !("children" in goods_spec[first_key])){
            $("#second").val(-1);
            $("#third").val(-1);
            window.form.render();
            return true;
        }else{
            var second_html = '<option data-second_key="-1" selected value="0">请选择分类</option>';
            var to_each =  goods_spec[first_key]['children'];
            $.each(to_each,function (ck,cv) {
                if(source == 1 && sel_second == cv.id){
                    second_html +='<option selected data-second_key="'+ck+'" value="'+cv.id+'">'+cv.title+'</option>';
                    $("#second").val(ck);
                }else{
                    second_html +='<option data-second_key="'+ck+'" value="'+cv.id+'">'+cv.title+'</option>';
                }
            })
            $("select[name='second_classify']").html(second_html);
            window.form.render();
            second(source);
        }
    }
    function second(source){
        var first_key  = $("select[name='first_classify']").find("option:selected").data("first_key");
        var second_key  = $("select[name='second_classify']").find("option:selected").data("second_key");
        // 将其他选择框置空
        $("#second").val(second_key);
        $("select[name='third_classify']").html('');
        $("select[name='fourth_classify']").html('');
        // 没有下级不继续
        if(second_key == -1 ||  !("children" in  goods_spec[first_key]['children'][second_key])){
            $("#third").val(-1);
            window.form.render();
            return true;
        }
        var to_each = goods_spec[first_key]['children'][second_key]['children'];
        var third_html = '<option data-third_key="-1" selected value="0">请选择分类</option>';
        $.each(to_each,function (ck,cv) {
            if(source == 1 && sel_third == cv.id){
                third_html +='<option selected data-third_key="'+ck+'" value="'+cv.id+'">'+cv.title+'</option>';
                $("#third").val(ck);
            }else{
                third_html +='<option data-third_key="'+ck+'" value="'+cv.id+'">'+cv.title+'</option>';
            }

        })
        $("select[name='third_classify']").html(third_html);
        $("select[name='fourth_classify']").html('');
        window.form.render();
        third(source);
    }
    function third(source){
        var first_key  = $("select[name='first_classify']").find("option:selected").data("first_key");
        var second_key = $("select[name='second_classify']").find("option:selected").data("second_key");
        var third_key  = $("select[name='third_classify']").find("option:selected").data("third_key");
        // 将其他选择框置空
        $("#third").val(third_key);
        $("select[name='fourth_classify']").html('');
        // 没有下级不继续
        if(third_key == -1 || !("children" in  goods_spec[first_key]['children'][second_key]['children'][third_key])){
            window.form.render();
            return true;
        }
        var to_each = goods_spec[first_key]['children'][second_key]['children'][third_key]['children'];
        var fourth_html = '<option data-froth_key="-1" selected value="0">请选择分类</option>';
        $.each(to_each,function (ck,cv) {
            if(source == 1 && sel_fourth == cv.id){
                fourth_html +='<option selected data-froth_key="'+ck+'" value="'+cv.id+'">'+cv.title+'</option>';
            }else{
                fourth_html +='<option data-froth_key="'+ck+'" value="'+cv.id+'">'+cv.title+'</option>';
            }
        })
        $("select[name='fourth_classify']").html(fourth_html);
        window.form.render();
    }
    // 一级分类监听
    form.on('select(first_classify)', function(data){
        var first_key =  data.elem[data.elem.selectedIndex].dataset.first_key;
        //与之前选择的一样不处理
        if($("#first").val() == first_key){
            return true;
        }
        first(2);
    })
    // 二级分类监听
    form.on('select(second_classify)', function(data){
        var second_key  = data.elem[data.elem.selectedIndex].dataset.second_key;
        //与之前选择的一样不处理
        if($("#second").val() == second_key){
            return true;
        }
        second(2)
    })
    // 三级分类监听
    form.on('select(third_classify)', function(data){
        var third_key  =  data.elem[data.elem.selectedIndex].dataset.third_key;
        //与之前选择的一样不处理
        if($("#third").val() == third_key){
            return true;
        }
        third(2)
    })
    // 四级分类end

</script>
{/block}