{extend name="layout"/}
{block name="css"}
<style>
    .sortablejs ul {
        margin: 0;
        padding: 0;
    }
    .sortablejs li {
        padding: 4px 10px;
        margin-bottom: 8px;
        list-style: none;
        border-radius:3px;
        cursor:pointer
    }
    .sortablejs-inline li {
        margin-right: 5px;
        display: inline-block;
    }
</style>
{/block}
{block name="content"}
<div class="panel">
    <div class="panel-heading">
        <div class="panel-title">编辑钩子'{$info.name}'</div>
    </div>
    <form class="panel-body" method="post" action="" onsubmit="return getBehavior();">
        <fieldset class="form-group">
            <label>钩子描述*</label>
            <input type="text" class="form-control" name="title" placeholder="钩子描述" value="{$info.title}">
            <small class="text-muted">中文说明</small>
        </fieldset>
        <div class="row">
            <div class="col-sm-7 form-group sortablejs sortablejs-inline">
                <label for="grid-input-16">关联行为</label>
                <ul id="bind-behavior">
                    {volist name="nowblist" id="vo"}
                    <li class="bg-primary" data-value="{$vo}"><i class="fa fa-arrows"></i> {$allblist[$vo]}  <i class="fa fa-times" onclick="delBehavior(this)"></i></li>
                    {/volist}
                </ul>
            </div>
            <div class="col-sm-5 form-group">
                <label for="grid-input-17">行为选择</label>
                <select id="allbehavior" class="form-control  select2-hidden-accessible" style="width: 100%" data-allow-clear="true" tabindex="-1" aria-hidden="true">
                    <option></option>
                    {volist name="allblist" id="vo"}
                    <option value="{$key}">{$vo}</option>
                    {/volist}
                </select>
            </div>
        </div>
        <fieldset class="form-group">
            <label>排序</label>
            <input type="number" class="form-control" name="orders" placeholder="只能是正整数" value="{$info.orders}">
            <small class="text-muted">数字越大越靠前</small>
        </fieldset>
        <fieldset class="form-group">
            <label>状态</label>
            <label for="switcher-primary" class="switcher switcher-primary">
                <input type="checkbox" name="status" value="1" id="switcher-primary" {if $info.status}checked=""{/if}>
                       <div class="switcher-indicator">
                    <div class="switcher-yes">启用</div>
                    <div class="switcher-no">禁用</div>
                </div>
                &nbsp;
            </label>
        </fieldset>
        <div class="panel-footer text-right">
            <input type="hidden" name="id" value="{$info['id']}">
            <input type="hidden" name="name" value="{$info['name']}">
            <input id="behavior" type="hidden" name="behavior" value="">
            <input type="submit" class="btn btn-primary" value="确认编辑">
        </div>
    </form>
</div>
<script>
    function getBehavior() {
        var bindBehavior = '';
        $('#bind-behavior li').each(function () {
            bindBehavior += $(this).data('value') + ',';
        });
        if ('' != bindBehavior) {
            bindBehavior = bindBehavior.substring(0, bindBehavior.length - 1);
        }
        $('#behavior').val(bindBehavior);
        return true;
    }
    function delBehavior(bbtn) {
        $(bbtn).parent().remove();
    }
    $(function () {
        Sortable.create(document.getElementById('bind-behavior'), {animation: 150});
        $('#allbehavior').select2({
            placeholder: '选择行为'
        });
        $('#allbehavior').change(function () {
            var v = $(this).val();
            var n = $(this).find('option:selected').text();
            var ifhnotexist = true;
            $('#bind-behavior li').each(function () {
                if ($(this).data('value') == v) {
                    ifhnotexist = false;
                }
            });
            if (v && n && ifhnotexist) {
                $('#bind-behavior').append('<li class="bg-primary" data-value="' + v + '"><i class="fa fa-arrows"></i> ' + n + ' <i class="fa fa-times" onclick="delBehavior(this)"></i></li>');
            }
        });
    });
</script>
{/block}