{% load i18n %}
<!--
<script src="/static/js/jquerydatatable/DataTables-1.10.20/js/jquery.dataTables.min.js"></script>
<script src="/static/js/jquerydatatable/Buttons-1.6.1/js/dataTables.buttons.min.js"></script>
<script src="/static/js/jquerydatatable/Buttons-1.6.1/js/buttons.html5.min.js"></script>
<script src="/static/js/jquerydatatable/Buttons-1.6.1/js/jszip.min.js"></script>
<script src="/static/js/jquerydatatable/Buttons-1.6.1/js/buttons.print.min.js"></script>
<link  href="/static/js/jquerydatatable/datatables.min.css" rel="stylesheet">
<link  href="/static/js/jquerydatatable/Buttons-1.6.1/css/buttons.dataTables.css" rel="stylesheet">
-->


<style>
    .space{
        display:inline-block;
        width:10px;
    }    
</style>


<script type="text/javascript">    
    $(document).ready(function(){  
        $(function () { 
            $("[data-toggle='tooltip']").tooltip(); 
        });

        {% if is_saved %}  
            $('.btn').show();
            toastr.success("{% trans '数据保存成功!' %}",
                "{% trans '消息提示' %}",{timeOut: 800, positionClass: "toast-center-center"}
            ); 
        {% endif %}     

        $('.btn-add').click(function(){
            event.preventDefault();
            $.RefreshContent($(this).attr('href'));
        });

        {% if obj.id %}
            $('#user_id').val('{{obj.user_id}}');            
        {% endif %}


        $('input[type=radio][name="what"]').change(function() {  
            $("#auth_ids").empty();
            $('#div_series,#div_product').hide();  
            if(this.value=='series'){
                $('#div_series').show();            
            }else{
                $('#div_product').show(); 
            }
        });


        $('#auth_ids').on('dblclick','option',function(){
            $(this).remove();
        });

        function has_id(id){
            var b=0;
            $("#auth_ids option").each(function(i,el){
                if($(el).val()==id){
                    b=1;
                    return;
                };
            });
            return b;
        };


        $('#product_label').autocomplete({
            source: '/obj/ajax/autocomplete/product/',            
            select: function (event, ui) {
                $("#product_id").val(ui.item.value);
                $("#product_label").val(ui.item.label);
                return false;
            }
        });      

        $('.btn-add-product').click(function(){
            var id=$('#product_id').val();
            if(has_id(id)){
                toastr.error(
                    "当前授权的产品已在列表中!",
                    "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return;            
            };
            if(id==''){
                toastr.error(
                    "产品名称不能为空!",
                    "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return;            
            };               
            $('#auth_ids').append('<option value='+$('#product_id').val()+'>'+$('#product_label').val()+'</option>')
            
        });

        $('.btn-add-series').click(function(){
            var id=$('#series').val();
            if(has_id(id)){
                toastr.error(
                    "当前授权的产品系列已在列表中!",
                    "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return;            
            };
            if(id==''){
                toastr.error(
                    "产品系列不能为空!",
                    "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return;            
            };               
            $('#auth_ids').append('<option value='+id+'>'+$('#series').find("option:selected").text()+'</option>')
            
        });

        $('.btn-save').click(function(){
            var a=[];
            $("#auth_ids option").each(function(){
                a.push($(this).val());
            });
            if(a.length==0){
                toastr.error(
                    "产品授权不能为空!",
                    "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return;        
                
            }else{
                $('#auth_content').val(a.join(','));           
                $('.btn').hide();
                $.SubmitForm('#obj_form form','{{request.path}}');
            }
        });  
    });
</script>


<ol class="breadcrumb">
    <li>{% trans "公司管理" %}</li>
    <li>{% trans "稽察授权" %}</li>   

    {% if is_saved %}
        <a type="button" class='btn btn-add l-a create-btn pull-right'  href="/product/query/auth/">
            <span class='glyphicon glyphicon-plus' style='padding-right:5px;'></span>
            {% trans '新建' %}
        </a>
    {% endif %}    
</ol>


<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<br />    
<div id="obj_form"  style="width:100%;">       
    <form role="form" method='post' action='{{request.path}}' class="form-horizontal"> 
    {% csrf_token %}
    <div class="form-group">   
        <label class="control-label col-md-1">稽 察 员:</label>
        <div class="col-md-2">
            {% if obj.id %}
                <input type='hidden' id='user_id' name='user_id' />
                <span style='top:10px;'>{{obj.user.username}}</span>
            {% else %}
                <select name='user_id' class='form-control'>
                    {% for u in users %}
                        <option value="{{u.0}}">{{u.1}}</option>
                    {% endfor %}
                </select>
            {% endif %}
        </div>   
        <label class="control-label col-md-1">授权方式:</label>     
        <p class='col-md-3' style='margin-top:5px;'>
            产品系列<input type="radio" name="what" value="series" checked="" required  class="flat"/> 
            <span class='space'></span>
            产品名称<input type="radio" name="what" value="product" class="flat"/>
        </p>   

        <button type="button" class="btn btn-save btn-primary pull-right">保存</button>        
    </div>

  

    <div class="form-group" id='div_series'>
        <label class="control-label col-md-1">系列名称:</label>
        <div class="col-md-3">
            <select id="series" class='form-control' >
                {% for s in  series %}
                    <option value="{{s.0}}">{{s.1}}</option>
                {% endfor %}  
            </select>   
        </div>
         <button type="button" class="btn btn-success btn-add-series" data-placement="bottom"
            data-toggle="tooltip" data-original-title="添加之后，双击列表内容可删除">
             <i class="glyphicon glyphicon-arrow-down"></i>添加</button>
    </div>

    <div class="form-group" id='div_product' style='display:none'>
        <label class="control-label col-md-1">产品名称:</label>
        <div class="col-md-3">
            <input  id='product_id' type='hidden' value=''/>
            <input id='product_label' class='form-control' placeholder="请输入授权查询的产品名称" />    
        </div>
        <button type="button" class="btn btn-success btn-add-product" data-placement="bottom"
            data-toggle="tooltip" data-original-title="添加之后，双击列表内容可删除">
            <i class="glyphicon glyphicon-arrow-down"></i>添加</button>
    </div>


    <div class="form-group">       
        <label class="control-label col-md-1">授权列表:</label>
        <div class="col-md-11">
            <select class="form-control" id="auth_ids" multiple="multiple">
                {% for a in auths %}
                    <option value='{{a.0}}'>{{a.1}}</option>
                {% endfor %}          
            </select>
        </div>
    </div>
    <input type='hidden' name='content' id='auth_content' />
    </form>
<div>
    
</div>
</div>
</div>

