{% extends '_base_list.html' %}
{% load i18n %}
{% load static %}
{% load common_tags %}
{% block custom_head_css_js %}
<link href="{% static 'css/plugins/select2/select2.min.css' %}" rel="stylesheet">
<script src="{% static 'js/plugins/select2/select2.full.min.js' %}"></script>

<style>
div.dataTables_wrapper div.dataTables_filter {
    margin-left: 15px;
    float: right !important;
}
div.dataTables_wrapper div.dataTables_filter,
.dataTables_length {
    float: right !important;
}
.custom{
    /*float:left;*/
    margin-right:5px;
    }
#modal .modal-body { max-height: 200px; }
</style>
{% endblock %}
{% block content_left_head %}{% endblock %}
{% block table_search %}{% endblock %}
{% block tags_list %}

<div class="ydxbd" id="ydxbd" style="display: none;">
    <div class="tagBtnList">
    {% for tag in tag_list %}
        <a href="{% url 'assets:asset-tags' tag_id=tag.0 %}"
           {% if tag.0|IntToStr == tag_id %}
           class="tagBtn2 label label-warning" name="tag_on">
           {% else %}
           class="tagBtn2 label label-default">
           {% endif %}
           {{ tag.1}}({{ tag.2 }})
        </a>
    {% endfor %}
        <a href="{% url 'assets:asset-list' %}" class="tagBtn2 label label-default" >移除选择</a>
    </div>
</div>
{% endblock %}

{% block table_head %}
    <th class="text-center"><input type="checkbox" id="check_all"  onclick="checkAll()"></th>
    <th id="th_no">id</th>
    <th class="text-center"><a href="{% url 'assets:asset-list' %}?sort=hostname">{% trans 'Hostname' %}</a></th>
    <th class="text-center"><a href="{% url 'assets:asset-list' %}?sort=username">{% trans 'IP' %}</a></th>
    <th class="text-center">{% trans 'Port' %}</th>
    <th class="text-center">{% trans 'Type' %}</th>
    <th class="text-center">{% trans 'Hardware' %}</th>
    <th class="text-center">{% trans 'Valid' %}</th>
    <th class="text-center"></th>
{% endblock %}

{% block table_body %}
     {% for asset in asset_list %}
         <tr class="gradeX"  name="oAssets">
             <td class="text-center">
                 <input type="checkbox" name="checked" value="{{ asset.id }}">
             </td>
             <td>{{ asset.id }}</td>
             <td class="text-center">
                 <a href="{% url 'assets:asset-detail' pk=asset.id %}">
                     {{ asset.hostname }}
                 </a>
             </td>
             <td class="text-center">{{ asset.ip }}</td>
             <td class="text-center">{{ asset.port }}</td>
             <td class="text-center">{{ asset.type }}</td>
             <td class="text-center">{{ asset.cpu }} {{ asset.memory }} {{ asset.disk }} </td>
             <td class="text-center">
                 {% if asset.is_valid.0 %}
                     <i class="fa fa-check text-navy"></i>
                 {% else %}
                     <i class="fa fa-times text-danger"></i>
                 {% endif %}
             </td>
             <td class="text-center">
                 <a href="{% url 'assets:asset-update' pk=asset.id %}" class="btn btn-xs btn-info">{% trans 'Update' %}</a>
                 <a onclick="objectDelete(this,'{{ asset.hostname }}','{% url 'assets:asset-delete' pk=asset.id %}')" class="btn btn-xs btn-danger del">{% trans 'Delete' %}</a>
             </td>
         </tr>
     {% endfor %}
{% endblock %}

{% block content_bottom_left %}
        <div class="input-group" id="actions">
            <select class="form-control m-b" style="width: auto" id="slct_bulk_update">
                <option value="delete">{% trans 'Delete selected' %}</option>
                <option value="update">{% trans 'Update selected' %}</option>
                <option value="deactive">{% trans 'Deactive selected' %}</option>
                <option value="export">{% trans 'Export selected' %}</option>
            </select>
            <div class="input-group-btn pull-left" style="padding-left: 5px;">
                <button id='btn_bulk_update' style="height: 32px;"  class="btn btn-sm btn-primary" >
                {% trans 'Submit' %}
                </button>
            </div>
        </div>
{% include "assets/_asset_bulk_update_modal.html" %}

<!-- 模态框（Modal） -->
<div class="modal fade" id="modal"  role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg">
      <div class="modal-content" id="box">
        <!--此部分为主体内容，将远程加载进来-->
      </div>
   </div>
</div>
{% endblock %}

{% block custom_foot_js %}
<script type="text/javascript">
    window.onload=function (){
        var tag_on = document.getElementsByName("tag_on");
        var oDiv = document.getElementById("ydxbd");
        if(tag_on.length > 0){
            oDiv.style.display = "block";
        }
    };

    function tagShow() {
        var oDiv = document.getElementById("ydxbd");
            if (oDiv.style.display == 'none'){
                oDiv.style.display = "block";
            }else{
                oDiv.style.display = "none";
            }
    };//onload;

    $(document).ready(function(){
        $('#modal').modal({
        show: false,
        backdrop: 'static',
        keyboard: 'false',
        remote:"{% url 'assets:asset-modal-update' %}",
    });

    $('#asset_bulk_update_modal').on('shown.bs.modal',function(){
        //alert('当弹窗完全加载完后，再触发；')
            $('.select2').select2();
            $("#id_tags").select2({
                tags: true,
                maximumSelectionLength: 8,  //最多能够选择的个数
                //closeOnSelect: false
            });
    });

    $('#asset_bulk_update_modal').modal({
        show: false,
        backdrop: 'static',
        keyboard: 'false',
    });
    var oTags = document.getElementById("ydxbd");
    var table = $('#editable').DataTable({
        "aLengthMenu": [[10, 25, 50, -1], ["10", "25", "50", "all"]],
        "iDisplayLength":25,
        "aaSorting": [[7, "asc"]],
        "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] }],
        "bAutoWidth": false,
        "language": {"url": "/static/js/plugins/dataTables/i18n/zh-hans.json"},
        "dom": '<"custom"fl>tip',
        "initComplete": function() {
            //alert( 'DataTables has finished its initialisation.' );
            $('#editable_length').before("<a href=\"{% url 'assets:asset-create' %}\" class=\"btn btn-sm btn-primary custom \"> {% trans 'Create asset' %} </a>&nbsp; <button class='btn btn-sm btn-primary custom' id='zksx' onclick='tagShow()'>标签</button>");
            $('#editable').before(oTags);
        },
        columns: [
            {data: "checkbox"},
            {data: "id"},
            {data: "name"},
            {data: "ip"},
            {data: "port"},
            {data: "type"},
            {data: "group"},
            {data: "dp"},
            {data: "op"}
        ]
        });
        //将ID列隐藏
        table.column('1').visible(false);
        $('#editable tbody').on( 'click', 'tr', function () {
        //alert($(this).hasClass('selected'));
            if($(this).hasClass('selected')){
                $(this).removeClass('selected');
                this.children[0].children[0].checked=0;
            }else{
                $(this).addClass('selected');
                this.children[0].children[0].checked=1;
            };
        });

        $('#btn_bulk_update').on('click',function(){
            var column2 = table.rows('.selected').data();
            var id_list = [];
            var plain_id_list = [];
            var the_url = "{% url 'assets:asset-bulk-update-api' %}";
            for(var i=0;i<column2.length;i++){
                id_list.push({id: column2[i].id,hostname:column2[i].ip});
                plain_id_list.push(parseInt(column2[i].id));
            };

            var url_delete = the_url + '?id__in=' + JSON.stringify(plain_id_list);
            //APIUpdateAttr({url: url_delete, method: 'DELETE', success: success, error: fail});
            function doDelete(){
                swal({
                    title: "{% trans 'Are you sure?' %}",
                    text: "{% trans 'This will delete the selected assets !!!' %}",
                    type: "warning",
                    showCancelButton: true,
                    cancelButtonText: 'Cancel',
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "{% trans 'Confirm' %}",
                    closeOnConfirm: false
                }, function () {
                        $.ajax({
                            type:'DELETE',
                            url:url_delete,
                            data:{
                                data:'true',
                            },
                            success:function(){
                                window.location.reload();
                            }
                        });
                });
            };

            function doUpdate() {
               // alert(plain_id_list);
               // $('#asset_bulk_update_modal').modal('show');
               window.location.href="{% url 'assets:asset-modal-update' %}?plain_id_lists="+plain_id_list
            };

            var action = $('#slct_bulk_update option:selected').val();
            if (id_list.length === 0) {
                action = 'default';
            };
            switch(action) {
                case 'deactive':
                    alert(action+"未完成");
                    //doDeactive();
                    break;
                case 'delete':
                    doDelete();
                    break;
                case 'update':
                    doUpdate();
                    break;
                case 'export':
                    alert(action+"未完成");
                    break;
                default:
                    swal({
                        title: "未选择任何元素",
                        text: "Please..."
                    });
                    break;
            }
        });//button

        $('#btn_asset_bulk_update').on('click',function(){

        });//button

    }); //$(document).ready

    var bCheck = 1;
    function checkAll(){
        if(bCheck){
            $("tr[name='oAssets']").each(function(){
                oCheckbox = this.children[0].children[0];
                $(this).toggleClass('selected',true);
                oCheckbox.checked=1;
            });
            document.getElementById('check_all').checked=1;
            bCheck = 0;
        }else{
            $("tr[name='oAssets']").each(function(){
                oCheckbox = this.children[0].children[0];
                $(this).toggleClass('selected',false);
                oCheckbox.checked=0;
            });
            document.getElementById('check_all').checked=0;
            bCheck = 1;
        };
    };

</script>
{% endblock %}