@{
    ViewData["IsHomePage"] = true;
}
<div class="row">
    <div class="col-md-2 col-sm-4 col-xs-6" v-for="p in Products">
        <div class="box box-solid">
            <div class="box-header with-border">
                <h3 class="box-title" style="font-size:12px;">{{p.Name}}</h3>
                <div class="pull-right box-tools">设备：{{p.DeviceCount}}</div>
            </div>
            <a class="box-body" :href="'Home/Product/id'+p.Id" style="display:block;text-align:center;">
                <img :alt="p.Name" :src="p.Image" style="margin:0 auto;max-width:100%;" />
            </a>
        </div>
    </div>
</div>
@section scripts{
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                Products: []
            },
            mounted() {
                this.load();
            },
            methods: {
                load: function () {
                    var url = '/Home/GetProducts?_='+Date.now()
                    axios.post(url)
                        .then(function (response) {
                            vm.Products = response.data;
                        })
                        .catch(function (error) {
                            alert(error, '警告', function () { })
                        });
                }
            }
        });
    </script>
    <script>
        var debug = true;
        var wsUrl = '/hub?group=page';
        var connectionId;
        const connection = new signalR.HubConnectionBuilder()
            .withUrl(wsUrl)
            .build();
        function connect() {
            if (debug) { console.log('start connect to server:' + Date()); }
            connection.start().then(function () {

            }).catch(function (err) {
                console.error(err.toString());
                setTimeout(connect, 15 * 1000);
            });
        }
        connection.on('Connected', function (id) {
            connectionId = id;
            console.log(connectionId);
        });
        connection.onclose(function (err) {
            console.error(err);
            setTimeout(connect, 15 * 1000);
        });
        connection.on("ServerToClient", function (method, json, from) {
            console.log(method + ':' + json);
            if (method == 'ProductEntityInserted' ||
                method == 'DeviceEntityInserted' ||
                method == 'DeviceEntityDeleted') {
                vm.load();
            }
        });
        setTimeout(connect, 0);
    </script>
}