@{
    HideBread = true;
}
<div class="row" style="text-align:center;">
    <img src="~/images/home.png" style="max-width:100%;margin:0 auto;" />
</div>
<br />
<div class="row overlay-wrapper">
    <div class="col-md-2 col-sm-4 col-xs-6" v-for="item in products">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{item.name}}</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/Product/?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 class="col-md-12" v-if="scenes.length">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">全局场景</h3>
                <div class="card-tools"><span data-toggle="tooltip" class="badge bg-green">{{scenes.length}}</span></div>
            </div>
            <div class="card-body">
                <button class="btn btn-success" v-for="scene in scenes" v-on:click="execScene(scene.id)">{{scene.name}}</button>
            </div>
        </div>
    </div>
</div>
@section styles{
    <style>
        .card-body button.btn {
            margin-right: 5px;
        }
    </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',
                    products: [],
                    scenes: []
                };
            },
            mounted: function () {
                connect();
                this.load();
            },
            methods: {
                load: function () {
                    var vm = this;
                    axios.post(baseUrl + '/api/v1/product/getProducts').then(function (response) {
                        vm.products = response.data;
                    });
                    axios.post(baseUrl + '/api/v1/Scene/GetScenes').then(function (response) {
                        vm.scenes = response.data;
                    });
                }
            }
        });
        onMessage = function (method, json, to, from) {
            var item = JSON.parse(json);
            if (method === 'ProductEntityInserted' ||
                method === 'ProductEntityUpdated' ||
                method === 'ProductEntityDeleted' ||
                method === 'DeviceEntityInserted' ||
                method === 'DeviceEntityDeleted') {
                app.load();
            }
            else if (method === 'SceneEntityInserted' ||
                method === 'SceneEntityUpdated' ||
                method === 'SceneEntityDeleted') {
                if (item.nodeId === null) {
                    app.load();
                }
            }
        }
    </script>
}