@{
    HideBread = true;
}
<br />
<div id="template">
    <template v-if="node">
        <!--场景-->
        <div class="row" v-if="scenes.length">
            <div class="col col-md-12">
                <div class="card">
                    <div class="card-header">场景</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col" v-for="scene in scenes()" v-on:click="execScene(scene.id)">
                                <div class="weui-grid__icon">
                                    <img class="weui-tabbar__icon" :src="'/IoTCenter'+scene.image" />
                                </div>
                                <p class="weui-grid__label">{{scene.name}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--环境-->
        <!--<div class="col col-md-12 my-2 px-3">环境</div>-->
        <div class="row">
            <!--光强检测器-->
            <div v-for="device in getDevices('光强检测器')" class="col" style="min-width:320px;">
                <iot-light v-bind:device="device"></iot-light>
            </div>
            <!--温湿度传感器-->
            <div v-for="device in getDevices('温湿度传感器')" class="col" style="min-width:320px;">
                <iot-humiture v-bind:device="device"></iot-humiture>
            </div>
            <!--烟雾报警器-->
            <div v-for="device in getDevices('烟雾报警器')" class="col" style="min-width:320px;">
                <iot-smoke v-bind:device="device"></iot-smoke>
            </div>
            <!--人体感应器-->
            <div v-for="device in getDevices('人体感应器')" class="col" style="min-width:320px;">
                <iot-person v-bind:device="device"></iot-person>
            </div>
            <!--</div>
            <div class="col col-md-12 my-2 px-3">用电</div>
            <div class="row">-->
            <!--调色灯-->
            <div v-for="device in getDevices('调色灯')" class="col" style="min-width:320px;">
                <iot-color-light v-bind:device="device"></iot-color-light>
            </div>
            <!--窗帘电机-->
            <div v-for="device in getDevices('窗帘电机')" class="col" style="min-width:320px;">
                <iot-curtain v-bind:device="device"></iot-curtain>
            </div>
            <!--一路开关-->
            <div v-for="device in getDevices('一路开关')" class="col" style="min-width:320px;">
                <iot-switch v-bind:device="device"></iot-switch>
            </div>

            <!--三路开关-->
            <div v-for="device in getDevices('三路开关')" class="col" style="min-width:320px;">
                <iot-switch3 v-bind:device="device"></iot-switch3>
            </div>
            <!--插座-->
            <div v-for="device in getDevices('插座')" class="col" style="min-width:320px;">
                <iot-socket v-bind:device="device"></iot-socket>
            </div>

            <!--智能插座-->
            <div v-for="device in getDevices('智能插座')" class="col" style="min-width:320px;">
                <iot-socket v-bind:device="device"></iot-socket>
            </div>
        </div>
        <!--<div class="col col-md-12 my-2 px-3">遥控器</div>-->
        <div class="row">
            <!--摄像头-->
            <div v-for="device in getDevices('摄像头')" class="col" style="min-width:320px;">
                <iot-camera v-bind:device="device"></iot-camera>
            </div>
            <!--红外转发器-->
            <div v-for="device in getDevices('红外转发器')" class="col" style="min-width:320px;">
                <iot-ir v-bind:device="device"></iot-ir>
            </div>
            <!--串口控制器-->
            <div v-for="device in getDevices('串口控制器')" class="col" style="min-width:320px;">
                <iot-serial-port v-bind:device="device"></iot-serial-port>
            </div>
        </div>
    </template>
</div>
@section styles{
    <style>
        .camera img {
            width: 32px;
            margin: 0 auto;
        }
    </style>
}
@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',
                    node: null,
                };
            },
            mounted: function () {
                connect();
                this.load();
            },
            methods: {
                load: function () {
                    var vm = this;
                    axios.post(baseUrl + '/api/v1/node/getNode?number=' + new URI().search(true).number).then(function (response) {
                        vm.node = response.data;
                    });
                },
                getDevices: function (name) {
                    return Enumerable.from(this.node.devices).where(function (o) { return o.name === name; }).toArray();
                },
                getDeviceDataAttr: function (number, name, attr) {
                    var device = Enumerable.from(this.node.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;
                },
                getDataValue: function (number, name) {
                    return this.getDeviceDataAttr(number, name, 'value');
                },
                node: function () {
                    return store.state.node;
                },
                scenes: function () {
                    return Enumerable.from(this.node.scenes).orderBy('o=>o.displayOrder').toArray();
                }
            }
        });
        onMessage = function (method, json, to, from) {
            console.log(method + ":" + json);
            var item = JSON.parse(json);
            if (method === 'DataEntityInserted' ||
                method === 'DataEntityUpdated' ||
                method === 'DataEntityDeleted') {
                var device = Enumerable.from(app.node.devices).where(function (o) { return o.id === item.deviceId; }).firstOrDefault();
                if (device) {
                    updateById(device.data, item);
                    app.updateChart();
                }
            }
        }
    </script>
}