{% extends "../theme.html" %}

{% block content %}
<style>
.btn-switch {
    cursor: pointer;
}
.button dt {
    margin-top: -9px;
    padding-bottom: 9px;
}
.button .btn-switch {
    border-radius: 0px;
    height:32px;
    width: 40px;
    font-size:12px;
    cursor: pointer;
    outline:none;
    margin-left:-9px;
}
.button .open {
    color:white;
}
.button .disabled {
    color:#bababa;
}
.button .loading {
    background-image: url(data:image/gif;base64,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);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 15px 15px;
}
</style>
    <div class="pannel">
    	<h2>批量控制</h2>
        <div class="ul3 clearfix">
            {% for value in data['list'] %}
            {%set layer = '' %}
            {% if value['oper'] %}
            {%set layer = value['oper'] %}
            {% end %}

            {% if '成功' in layer or '批量' in layer or '正在' in layer %}
            {%set hint = 'hint--info' %}
            {% else %}
            {%set hint = 'hint--error' %}
            {% end %}
            <dl>
                <dd class="controller"></dd>
                {% if value['device_type'] == 1 %}
                <dt>
                    <p href="javascript:;" {% if layer %}data-hint="{{layer}}"{% end %} data-status="{% if value['value'] == '1' %}2{% else %}1{% end %}"  onclick="Farm.Switch(this, '/device/mul', '{{value['id']}}')" class="{% if layer %}hint--top {{hint}} hint--always loading{% end %} btn-switch {% if value['value'] == '1' %}open{% end %}"><i></i></p>
                </dt>
                {% else %}
                <dt class="button">
                    <button {% if layer %}data-hint="{{layer}}"{% end %} onclick="Farm.Button(this, '/device/mul', '{{value['id']}}', 1, '#button_down_{{value['id']}}')" id="button_up_{{value['id']}}" class="btn-switch {% if layer and value['value'] in ('1','4') %}hint--top {{hint}} hint--always loading{% end %} {% if value['value'] in ('2','3') %}disabled{% end %} {% if value['value'] in ('1','4') %}open{% end %}">升</button>

                    <button {% if layer %}data-hint="{{layer}}"{% end %} onclick="Farm.Button(this, '/device/mul', '{{value['id']}}', 5)" id="button_stop_{{value['id']}}" class="btn-switch {% if layer and value['value'] == '5' %}hint--top {{hint}} hint--always loading{% end %} {% if value['value'] == '5' %}open{% end %}">停</button>

                    <button {% if layer %}data-hint="{{layer}}"{% end %} onclick="Farm.Button(this, '/device/mul', '{{value['id']}}', 2, '#button_up_{{value['id']}}')" id="button_down_{{value['id']}}" class="btn-switch {% if layer and value['value'] in ('2','3') %}hint--top {{hint}} hint--always loading{% end %} {% if value['value'] in ('1','4') %}disabled{% end %} {% if value['value'] in ('2','3') %}open{% end %}">降</button>
                </dt>
                {% end %}
                <dd class="tit">{{value['name']}}</dd>          
            </dl>
            {% end %}
        </div>
    </div>
{% end %}

{% block script %}
{%set loadUrl = '/device/mul?ajax=1' %}
{%include 'inc/load.html'%}
{% end %}