@{
    HideBread = true;
}
<br />
<div class="row">
    <div class="col-md-12" v-if="model.length">
        <div class="card">
            <div class="card-header">
                <div class="card-title">
                    <input type="checkbox" id="All" class="checkall" v-on:change="SelectNode($event)" />
                    <label for="All" class="btn btn-sm btn-info" style="height:31px;margin-bottom:0;">全选</label>
                    <button class="btn btn-sm btn-info uncheck" v-on:click="SelectNode($event)">反选</button>
                </div>
                <div class="card-tools">
                    <button class="btn btn-success" v-on:click="Power('On')">开</button>
                    <button class="btn btn-success" v-on:click="Power('Off')">关</button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6" v-for="item in GetNodes()">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <label style="font-weight:normal;"><input type="checkbox" name="numbers[]" class="item" :value="item.number" v-on:change="SelectNode($event)">{{item.name}}</label>
                </h3>
                <div class="card-tools"><span data-toggle="tooltip" class="badge bg-green">{{item.count}}</span></div>
            </div>
            <a class="card-body" :href="'@Url.Content("~")/Home/Node/?number='+item.number" style="display:block;text-align:center;">
                <img :alt="item.name" :src="'@Url.Content("~")'+item.image" style="margin:0 auto;width:64px;" />
            </a>
        </div>
    </div>
</div>
@section scripts{
    <script>
        var baseUrl = '@Url.Content("~")';
        var hubUrl = "@Url.Content("~")/hub?group=page";
        var onMessage = null;
    </script>
    <script src="~/lib/WXInlinePlayer/index.js"></script>
    <script src="~/js/util.js"></script>
    <script src="~/js/iot.js"></script>
    <script src="~/js/message.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    title: "产品",
                    url: '/api/v1/node/getNodes',
                    model: []
                };
            },
            mounted: function () {
                connect();
                this.load();
            },
            methods: {
                load: function () {
                    var vm = this;
                    axios.post(baseUrl + '/api/v1/node/getNodes').then(function (response) {
                        vm.model = response.data;
                    });
                },
                GetNodes() {
                    return Enumerable.from(this.model).orderBy('o=>o.displayOrder').toArray();
                },
                SelectNode: Select,
                Power(method) {
                    var numbers = [];
                    $('.item:checked').each(function () {
                        numbers.push($(this).val());
                    });
                    if (numbers.length) {
                        for (var i = 0; i < numbers.length; i++) {
                            nodePower(numbers[i], method);
                        }
                    }
                    else {
                        toastr.error('没有选中任何项');
                    }
                }
            }
        });
        onMessage = function (method, json, to, from) {
            var item = JSON.parse(json);
            if (method === 'NodeEntityInserted' ||
                method === 'NodeEntityUpdated' ||
                method === 'NodeEntityDeleted' ||
                method === 'DeviceEntityInserted' ||
                method === 'DeviceEntityDeleted') {
                loadData();
            }
        }
    </script>
}