@{
    HideBread = true;
}
<br />
<template v-if="product">
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1>{{product.name}}</h1>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="/">产品列表</a></li>
                <li class="breadcrumb-item active">{{product.name}}</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" v-if="HasBatchCommand()">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <input type="checkbox" id="All" class="checkall" v-on:change="SelectDevice($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="SelectDevice($event)">反选</button>
                    </div>
                    <div class="card-tools">
                        <button class="btn btn-success" v-on:click="CallApiAll('On')">开</button>
                        <button class="btn btn-success" v-on:click="CallApiAll('Stop')" v-if="product.name.indexOf('窗帘电机')>=0">停</button>
                        <button class="btn btn-success" v-on:click="CallApiAll('Off')">关</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2 col-sm-4 col-xs-6" v-for="item in GetDevices()">
            <div class="card" debug="12021508">
                <div class="card-header">
                    <h3 class="card-title">
                        <label style="font-weight:normal;"><input type="checkbox" name="numbers[]" class="item" :value="item.number" v-if="HasBatchCommand()" v-on:change="SelectDevice($event)">{{item.name}}</label>
                    </h3>
                    <template v-if="HasBatchCommand()">
                        <div class="card-tools"> {{GetDataValue(item.number,'状态')}}</div>
                    </template>
                </div>
                <a class="card-body" :href="'@Url.Content("~")/Home/Device?number='+item.number+'&productNumber='+product.number" style="display:block;text-align:center;">
                    <img :alt="item.name" :src="'@Url.Content("~")'+product.image" style="margin:0 auto;max-width:64px;" />
                </a>
                <!-- 设备信息 Start -->

                <div class="card-body" style="font-size: 12px;" v-if="item.name === '温湿度传感器'">
                    <div class="row">
                        <div class="col-md-4">温度</div>
                        <div class="col-md-8">{{GetDataValue(item.number,'温度')}} {{GetDeviceDataAttr(item.number,'温度','Unit')}} {{GetDeviceDataAttr(item.number,'温度','description')}}</div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">湿度</div>
                        <div class="col-md-8">{{GetDataValue(item.number,'湿度')}} {{GetDeviceDataAttr(item.number,'湿度','Unit')}} {{GetDeviceDataAttr(item.number,'湿度','description')}}</div>
                    </div>
                </div>
                <!-- 设备信息 End -->
                @*<div class="card-footer">
                        {{item.node.name}}
                    </div>*@
            </div>
        </div>
    </div>
</template>
@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/product/getProducts',
                    product: null,
                };
            },
            mounted: function () {
                connect();
                this.load();
            },
            methods: {
                load: function () {
                    var vm = this;
                    axios.post(baseUrl + '/api/v1/product/getProduct?number=' + new URI().search(true).number).then(function (response) {
                        vm.product = response.data;
                    });
                },
                HasBatchCommand() {
                    return this.product.name === '调色灯'
                        || this.product.name.indexOf('窗帘电机') >= 0
                        || this.product.name.indexOf('开关') >= 0
                        || this.product.name.indexOf('插座') >= 0;
                },
                GetDevices() {
                    return Enumerable.from(this.product.devices).orderBy(function (o) { return o.displayOrder; }).orderBy(function (o) { return o.name; }).toArray();
                },
                GetDataValue(number, name) {
                    var device = Enumerable.from(this.product.devices)
                        .where(function (o) { return o.number === number; })
                        .firstOrDefault();
                    if (device !== null) {
                        var data = Enumerable.from(device.data)
                            .where(function (o) { return o.name === name; })
                            .firstOrDefault();
                        if (data !== null) {
                            return data.value;
                        }
                    }
                    return null;
                },
                GetDeviceDataAttr(number, name, attr) {
                    var device = Enumerable.from(this.product.devices).where(function (o) { return o.number === number; }).firstOrDefault();
                    var data = Enumerable.from(device.data).where(o => o.name === name).firstOrDefault();
                    if (data !== null) {
                        return data[attr];
                    }
                    return null;
                },
                SelectDevice: Select,
                CallApiAll(method) {
                    var numbers = [];
                    $('.item:checked').each(function () {
                        numbers.push($(this).val());
                    });
                    if (numbers.length) {
                        for (var i = 0; i < numbers.length; i++) {
                            execApi(numbers[i], this.product.path + method, null);
                        }
                    }
                }
            }
        });
        onMessage = function (method, json, to, from) {
            var item = JSON.parse(json);
            if (method === 'DeviceEntityInserted' ||
                method === 'DeviceEntityUpdated' ||
                method === 'DeviceEntityDeleted') {
                loadData();
            }
            else if (method === 'DataEntityInserted' ||
                method === 'DataEntityUpdated' ||
                method === 'DataEntityDeleted') {
                var device = Enumerable.from(app.product.devices).firstOrDefault(function (o) { return o.id === item.deviceId; });
                if (device) {
                    updateById(device.data, item);
                }
            }
        }
    </script>
}