@*@page
    @model Applications.UniversalApi_WebConsole_App.Views.TankDetails.TestModel
    @{
    }*@

@{
   // Layout = null;
}

<script src="~/js/mqtt.min.js"></script>
<script src="~/js/Chart.bundle.js"></script>
<script src="~/js/jquery-3.4.1.min.js"></script>
<body style="width:1250px;height:780px;background-color:aqua">
    <div id="test_div" style=""> </div>
</body>
<script>

    //$(document).ready(function () {
    var hostname = 'localhost', //'192.168.1.2',
        port = 8384,
        clientId = 'mqttjs_' + (Math.random() * 1000000).toString(),
        timeout = 5000,
        keepAlive = 100,
        cleanSession = false,
        mqttVersion = 3,
        ssl = false;

    var options = {
        //mqtt客户端的id,这里面应该还可以加上其他参数,具体看官方文档
        clientId: 'mqttjs_' + (Math.random() * 1000000).toString(),
        timeout: timeout,
        useSSL: false
    }
    //浏览器采用websocket协议,host主机地址为192.168.0.200,端口为9001,路径为/mqtt
    //var client = mqtt.connect("ws://localhost:8384/mqtt", options); // you add a ws:// url here
    var client = mqtt.connect("ws://localhost:8384/mqtt", options);
    ////建立连接
    client.on('connect',
        function () {
            var a = document.getElementById("testmqqt");
            if (a != null) a.innerHTML = "connected";
            //订阅主题 presence
            client.subscribe('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankInventoryAsync_reply',
                function (err) {
                    if (!err) {

                        console.log("Subscribe TankReadig success");
                        //client.publish('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankReadingsAsync');
                    } else {
                        //打印错误
                        if (a != null) a.innerHTML = err;
                    }
                });
            client.subscribe('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTanksAsync_reply',
                function (err) {
                    if (!err) {
                        console.log("Subscribe getTAnk success");
                        client.publish('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTanksAsync',"[]");
                        //client.publish('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankReadingsAsync');
                    } else {
                        //打印错误
                        if (a != null) a.innerHTML = err;
                    }
                });
        });
    
    //如果连接错误,打印错误
    //如果连接错误,打印错误
    client.on('error',
        function (err) {
            var a = document.getElementById("test_div");
            if (a != null) a.innerHTML = err;
            client.end();
        });

    //如果client订阅主题成功,那么这里就是当接收到自己订阅主题的处理逻辑
    client.on('message',
        function (topic, message) {
            var a = document.getElementById("testmqqt");
            //if (a != null) a.innerHTML = message.toString();
            if (topic == "/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankInventoryAsync_reply") {
                //TableRowADD(JSON.parse(message.toString()));
                //GenerateHeadView();
                //GenerateFootView();
                //GenerateTanksView(JSON.parse(message.toString()), totaltanksnumber);
                //TankDataGet(JSON.parse(message.toString()));
            }
            if (topic == "/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTanksAsync_reply") {
                //TankIDGet(JSON.parse(message.toString()));
                //GenerateFootView();
                //var s = message.toString();
                //GenerateTankView(JSON.parse(message.toString()));
            }
        });

    //function TankDataGet(datas) {
    //    datas.forEach(function(d){
    //        FuelAmount.innerHTML = "实时油量:" + FormatFloat(d.FuelVolume, 0) + "升";
    //        FuelAmount.style = "font-size:16px; color:black;font-weight:bold;height:30px;width:180px;margin-top:16px;margin-left:0px";
    //        FuelVolume.innerHTML = "实时油位:" + FormatFloat(d.FuelHeight, 0) + "mm";
    //        FuelVolume.style = "font-size:16px; color:black;font-weight:bold;height:30px;width:180px;margin-top:6px;margin-left:0px";
    //        RemainingSpace.innerHTML = "剩余空间:" + FormatFloat(d.FuelTCVolume, 0) + "升";
    //        RemainingSpace.style = "font-size:16px; color:black;font-weight:bold;height:30px;width:180px;margin-top:6px;margin-left:0px";
    //        Temperature.innerHTML = "实时油温:" + FormatFloat(d.Temperture, 0) + "℃";
    //        Temperature.style = "font-size:16px; color:black;font-weight:bold;height:30px;width:180px;margin-top:6px;margin-left:0px";
    //        WaterLevel.innerHTML = "实时水位:" + FormatFloat(d.WaterHeight, 0) + "mm";
    //        WaterLevel.style = "font-size:16px; color:black;font-weight:bold;height:30px;width:180px;margin-top:6px;margin-left:0px";
    //    })
    //}
    //})

    //function TankIDGet(message) {
    //    if (message == null) {
    //        console.log("Invalid message got in tanks view");
    //        return;
    //    }

    //    var d = message;
    //    totaltanksnumber = message.length;
    //    for (i = 0; i < totaltanksnumber; ++i) {
    //        currentFuelID = d[i].Product.ProductLabel;
    //        currentFuelKind = d[i].Label;
    //        currentTankID = d[i].TankNumber;

    //        tanknumber["Parameters:"].tanknumber = i;
    //        client.publish('/sys/VeederRoot_ATG_Console_Tcp/VeederRoot_ATG_Console.Handler/thing/service/GetTankInventoryAsync', JSON.stringify(tanknumber));
    //    }
    //}


</script>