{extend name="common/common2" /}
{block name="main"}
<link rel="stylesheet" href="/static/bootstrap-multiselect-0.9.15/dist/css/bootstrap-multiselect.css">
<style>

</style>
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-content">
                <form method="post" action="{:url('add')}" class="form-horizontal">
                    <input type="hidden" name="plan_id" value="{$plan_id}">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">开始日期<span class="text-danger">*</span></label>
                        <div class="col-sm-6">
                            {:widget_view('common/datepicker',['name'=>'start', 'val' =>isset($info)?$info['start']:''])}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">结束日期<span class="text-danger">*</span></label>
                        <div class="col-sm-6">
                            {:widget_view('common/datepicker',['name'=>'end', 'val' =>isset($info)?$info['end']:''])}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">任务项<span class="text-danger">*</span></label>
                        <div class="col-sm-6">
                            <select id="plantype" name="forms[]" multiple="multiple">
                                {volist name="type" id="v"}
                                <option value="{$v['id']}" {if condition="isset($info['forms']) and in_array($v['id'],$info['forms'])"}selected{/if}>{$v['title']}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">地点<span class="text-danger">*</span></label>
                        <div class="col-sm-6">
                            <select id="planaddr" name="addrs[]" multiple="multiple">
                                {volist name="address" id="v"}
                                <option value="{$v['id']}" {if condition="isset($info['addrs']) and in_array($v['id'],$info['addrs'])"}selected{/if}>{$v['title']}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">人员<span class="text-danger">*</span></label>
                        <div class="col-sm-6">
                            {:widget_view('common/multiselect',['name'=>'user','lists' =>$user, 'val' =>isset($info['user'])?$info['user']:[]])}
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-6">
                            <textarea name="remark" class="form-control" rows="3" value="{$info.remark|default=''}"></textarea>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="col-sm-6 col-sm-offset-2">
                            <button class="btn btn-primary ajax-post" data-layer="1" target-form="form-horizontal" type="submit">确 定</button>
                            <button  class="btn cancel-btn btn-default" type="button">取 消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script src="/static/bootstrap-multiselect-0.9.15/dist/js/bootstrap-multiselect.js"></script>
<script>
    $(document).ready(function(){

        $('#plantype').multiselect({
            buttonText: function(options, select) {
                if (options.length === 0) {
                    return '请选择';
                }
                else if (options.length > 2) {
                    return '已选择'+options.length+'项';
                }
                else {
                    var labels = [];
                    options.each(function() {
                        if ($(this).attr('label') !== undefined) {
                            labels.push($(this).attr('label'));
                        }
                        else {
                            labels.push($(this).html());
                        }
                    });
                    return labels.join(', ') + '';
                }
            },
            filterPlaceholder: '搜索',
            includeSelectAllOption: true, // 显示全选
            selectAllText: '全选',
            maxHeight: 300,
            // enableClickableOptGroups: true, // 分组可选
            // enableCollapsibleOptGroups: true, // 分组可折叠
            enableFiltering: true, // 开启搜索
            buttonClass: 'btn btn-primary',
            onChange: function(option, checked) {
                console.log(option.length + ' options ' + (checked ? 'selected' : 'deselected'));
            }
        });

        $('#planaddr').multiselect({
            buttonText: function(options, select) {
                if (options.length === 0) {
                    return '请选择';
                }
                else if (options.length > 2) {
                    return '已选择'+options.length+'项';
                }
                else {
                    var labels = [];
                    options.each(function() {
                        if ($(this).attr('label') !== undefined) {
                            labels.push($(this).attr('label'));
                        }
                        else {
                            labels.push($(this).html());
                        }
                    });
                    return labels.join(', ') + '';
                }
            },
            filterPlaceholder: '搜索',
            includeSelectAllOption: true, // 显示全选
            selectAllText: '全选',
            maxHeight: 300,
            // enableClickableOptGroups: true, // 分组可选
            // enableCollapsibleOptGroups: true, // 分组可折叠
            enableFiltering: true, // 开启搜索
            buttonClass: 'btn btn-primary',
            onChange: function(option, checked) {
                console.log(option.length + ' options ' + (checked ? 'selected' : 'deselected'));
            }
        });
    });

</script>
{/block}