{extend name='admin@main'}

{block name="content"}
<form onsubmit="return false;" data-auto="true" method="post" class='layui-form layui-card' autocomplete="off">

    <div class="layui-card-body">
        <div style="padding-left:45px;">
            <fieldset>
                <legend>页面信息</legend>
                <div class="layui-form-item block relative">
                    <h3 class="color-green"><sup class='color-red font-s14 absolute' style="margin-left:-10px">*</sup>页面标题</h3>
                    <input name="title" required class="layui-input" placeholder="请输入页面标题" value="{$vo.title|default=''}">
                </div>
                <div class="layui-form-item block relative">
                    <span class="color-green margin-right-10">页面类型</span>
                    {foreach ['one'=>'单页模式','mul'=>'多页模式'] as $k => $v}
                    <label class="think-radio">
                        {if isset($vo.type) and $vo.type eq $k}
                        <input name="type" checked lay-ignore type="radio" value="{$k}"> {$v}
                        {else}
                        <input name="type" lay-ignore type="radio" value="{$k}"> {$v}
                        {/if}
                    </label>
                    {/foreach}
                </div>
            </fieldset>

            <fieldset data-type-box="one">
                <legend>单页模式</legend>
                <div>
                    <div class="layui-form-item block relative">
                        <h3 class="color-green"><sup class='color-red font-s14 absolute' style="margin-left:-10px">*</sup>展示图片</h3>
                        <input name="one[image]" required class="layui-input" placeholder="请上传展示图片" value="{$vo.one.image|default=''}">
                        <button class="layui-btn layui-btn-sm" data-file="btn" data-field="one[image]" data-type="png,jpg,gif">上传图片</button>
                    </div>
                    <div class="layui-form-item block relative">
                        <h3 class="color-green"><sup class='color-red font-s14 absolute' style="margin-left:-10px">*</sup>绑定商品</h3>
                        <select name="one[goods]" class="layui-select" lay-search>
                            {foreach $goodsList as $v}
                            {if isset($vo.one.goods) and $vo.one.goods eq $v.id}
                            <option selected value="{$v.id}">{$v.title|default=''}</option>
                            {else}
                            <option value="{$v.id}">{$v.title|default=''}</option>
                            {/if}
                            {/foreach}
                        </select>
                    </div>
                </div>
            </fieldset>

            <fieldset data-type-box="mul" class="padding-bottom-15">
                <legend>多页模式</legend>
                <div id="item-list-box">
                    {notempty name='vo.mul.goods'}
                    {foreach $vo.mul.goods as $g}
                    <div class="layui-form-item block relative">
                        <h3 class="color-green"><sup class='color-red font-s14 absolute' style="margin-left:-10px">*</sup>绑定商品</h3>
                        <div class="layui-row">
                            <div class="layui-col-xs8">
                                <select name="mul[goods][]" class="layui-select" lay-search>
                                    {foreach $goodsList as $v}
                                    {if $g eq $v.id}
                                    <option selected value="{$v.id}">{$v.title|default=''}</option>
                                    {else}
                                    <option value="{$v.id}">{$v.title|default=''}</option>
                                    {/if}
                                    {/foreach}
                                </select>
                            </div>
                            <div class="layui-col-xs4 padding-top-5 padding-left-10">
                                <a onclick="moveUp(this)" class="layui-btn layui-btn-sm">上移</a>
                                <a onclick="moveDn(this)" class="layui-btn layui-btn-sm">下移</a>
                                <a onclick="moveRm(this)" class="layui-btn layui-btn-sm layui-btn-danger">移除</a>
                            </div>
                        </div>
                    </div>
                    {/foreach}
                    {/notempty}
                </div>
                <button onclick="addItem()" type="button" class="layui-btn layui-btn-sm">增加商品</button>
            </fieldset>
        </div>

        <div class="layui-form-item text-center margin-top-20">
            {notempty name='vo.id'}<input type="hidden" name="id" value="{$vo.id}">{/notempty}
            <button class="layui-btn layui-btn-danger" onclick="history.back()" type="button">取消编辑</button>
            <button class="layui-btn" type="submit">保存页面</button>
        </div>

    </div>
</form>

{/block}

{block name='script''}
<div id="page-template-id" class="layui-hide">
    <div class="layui-form-item block relative">
        <h3 class="color-green"><sup class='color-red font-s14 absolute' style="margin-left:-10px">*</sup>绑定商品</h3>
        <div class="layui-row">
            <div class="layui-col-xs8">
                <select name="mul[goods][]" class="layui-select" lay-search>
                    {foreach $goodsList as $v}
                    {if isset($data.goods) and $data.goods eq $v.id}
                    <option selected value="{$v.id}">{$v.title|default=''}</option>
                    {else}
                    <option value="{$v.id}">{$v.title|default=''}</option>
                    {/if}
                    {/foreach}
                </select>
            </div>
            <div class="layui-col-xs4 padding-top-5 padding-left-10">
                <a onclick="moveUp(this)" class="layui-btn layui-btn-sm">上移</a>
                <a onclick="moveDn(this)" class="layui-btn layui-btn-sm">下移</a>
                <a onclick="moveRm(this)" class="layui-btn layui-btn-sm layui-btn-danger">移除</a>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        // 页面模式处理
        window.form.render();
        // 页面模式切换处理
        $('input[name="type"]').on('click', function () {
            $('[data-type-box]').not($('[data-type-box="' + this.value + '"]').show()).hide();
            console.log(this.value)
        });
        // 自动切换页面模式
        var $radio = $('input[name="type"]:checked');
        if ($radio.size() < 1) $radio = $('input[name="type"]:first');
        $radio.trigger('click');
    });

    function addItem() {
        $('#item-list-box').append($('#page-template-id').html());
        window.form.render();
    }

    // 移除选项
    function moveRm(that) {
        $.msg.confirm('确定要移除这个选项吗?', function (index) {
            $(that).parents('.layui-form-item').remove(), $.msg.close(index);
        });
    }

    // 上移选项
    function moveUp(that) {
        var $item = $(that).parents(".layui-form-item");
        if ($item.index() > 0) $item.prev().before($item);
    }

    // 下移选项
    function moveDn(that) {
        var $item = $(that).parents(".layui-form-item");
        if ($item.index() < $item.siblings('.layui-form-item').size()) $item.next().after($item);
    }
</script>
{/block}