<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--head部分-->
<head th:include="layout :: htmlhead" th:with="title='文件转换'">
</head>
<style>
    body{
        background-repeat: no-repeat;
        background-size:100% 100%;
        background-attachment: fixed;
    }
</style>
<body background="images\bg.jpg" >
<div class="layui-container" style="height: 100%">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 6%">
        <legend style="margin-left: 40%"><span style="font-weight: bold;font-size:22px;">文件转换系统</span></legend>
    </fieldset>

    <div class="layui-row">
        <div class="layui-col-xs3">
            <div class="grid-demo grid-demo-bg1">
                &nbsp;
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="grid-demo">
                <form id="useLogin" class="layui-form" action="">
                    <div class="layui-form-item">
                        <!--<label class="layui-form-label">文件路径</label>-->
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                            <legend>文件路径</legend>
                        </fieldset>
                        <div class="layui-input-inline">
                            <input id="filePath" name="filePath" lay-verify="required" placeholder="如：D://document" autocomplete="off" class="layui-input" type="tel"/>
                        </div>
                    </div>
                    <!--<div class="layui-form-item">-->
                        <!--<label class="layui-form-label">密&nbsp;&nbsp;码</label>-->
                        <!--<div class="layui-input-inline">-->
                            <!--<input id="password" name="password" lay-verify="required" autocomplete="off" class="layui-input" type="password"/>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="layui-form-item" style="margin-top: -20px;">-->
                        <!--<label class="layui-form-label"></label>-->
                        <!--<div class="layui-inline">-->
                            <!--<input type="checkbox" name="rememberMe" lay-skin="primary"  title="记住我"/>-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="layui-form-item">
                        <!--<div class="layui-input-block">-->
                            <button class="layui-btn" type="reset">重置</button>
                            <button id="loginBtn" class="layui-btn layui-btn-primary" lay-submit="" lay-filter="convert">开始转换</button>
                        <!--</div>-->
                    </div>
                </form>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                    <legend>转换进度</legend>
                </fieldset>
                <div class="layui-progress layui-progress-big"  lay-filter="demo">
                    <div class="layui-progress-bar" lay-percent="0%"></div>
                </div>
                <!--<div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
                    <button class="layui-btn site-demo-active" data-type="setPercent">设置50%</button>
                </div>-->
            </div>
        </div>
    </div>
</div>
<!--<script type="text/javascript" src="/js/login.js"></script>-->
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(convert)', function(data){
            $("#loginBtn").attr("disabled", true);
            $("#loginBtn").text("转换中...")
            $.post("/file/convert",$("#useLogin").serialize(),function(data){
                if(data.code == 1){
                    window.location.href=data.url;
                }else{
                    layer.alert(data.message,function(){
                        layer.closeAll();//关闭所有弹框
                    });
                }
                $("#loginBtn").attr("disabled", false);
                $("#loginBtn").text("开始转换")
            });
            return false;
        });
    });

</script>
<script>
    var socket;
    if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else{
        console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        //等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
        socket = new WebSocket("ws://localhost:8080/websocket");
        //打开事件
        socket.onopen = function() {
            console.log("Socket 已打开");
            //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        socket.onmessage = function(msg) {
            console.log(msg.data);
            //发现消息进入    开始处理前端触发逻辑
            layui.use('element', function(){
                var $ = layui.jquery
                    ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

                element.progress('demo', msg.data + '%');
            });
        };
        //关闭事件
        socket.onclose = function() {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            alert("Socket发生了错误");
            //此时可以尝试刷新页面
        }
        //离开页面时，关闭socket
        //jquery1.8中已经被废弃，3.0中已经移除
        // $(window).unload(function(){
        //     socket.close();
        //});
    }

</script>
</body>
</html>