<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>FeastCoding</title>
    <link href="https://cdn.bootcss.com/semantic-ui/2.3.0/semantic.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .input_s1 {
            font-size: 20;
            color: red;
            background-color: ;
            border-top-width: 1px;
            border-right-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 1px
        }

        .input_s2 {
            font-size: 20;
            color: green;
            background-color: ;
            border-top-width: 1px;
            border-right-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 1px
        }

        .input_s3 {
            font-size: 20;
            color: black;
            background-color: ;
            border-top-width: 1px;
            border-right-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 1px
        }
    </style>
</head>

<body>
<div class="ui inverted segment">
    <div class="ui inverted secondary menu">
        <a class="item" href="<%=path %>/index/links">FeastCoding</a>
        <c:forEach items="${menuList}" var="menu">
            <a class="item" href="javascript:void(0)" onclick="view('${menu.id}','${menu.url}')">${menu.name}</a>
        </c:forEach>

        <div class="right menu">
            <div class="item">
                <a class="ui secondary button" href="<%=path%>/admin.do">后台管理</a>
            </div>
        </div>
    </div>
</div>
<div class="ui grid">
    <div class="eleven wide centered column">
        <div class="ui raised segment">
            <a class="ui blue ribbon label">Stock </a>上证指数： <input type="text" id="szzs" readonly="readonly" style="border: none;"></input>涨跌：<input type="text" id="cz_szzs" readonly="readonly" style="border: none;"></input>
            </span>
        </div>
        <div class="ui three cards" id="stocks">
        </div>
    </div>
</div>
<script type="text/javascript">
    function reload() {
        $.ajax({
            type:"GET",
            url:"<%=path%>/index/stock",
            success:function(data) {
                var stocks = data
                //上证指数
                var sz = stocks[0];
                document.getElementById("szzs").value = sz.split("~")[3];
                document.getElementById("cz_szzs").value = sz.split("~")[31];
                if(sz.split("~")[31] < 0) {
                    document.getElementById("szzs").className = "input_s2";
                    document.getElementById("cz_szzs").className = "input_s2";
                } else if(sz.split("~")[31] == 0) {
                    document.getElementById("szzs").className = "input_s3";
                    document.getElementById("cz_szzs").className = "input_s3";
                } else {
                    document.getElementById("szzs").className = "input_s1";
                    document.getElementById("cz_szzs").className = "input_s1";
                }

                var nodes = '';
                for (var i = 1; i < stocks.length; i++) {
                    //初始化元素
                    var node = initNode(stocks[i]);
                    nodes += node;
                    document.getElementById("stocks").innerHTML = nodes;
                }

                for (var i = 1; i < stocks.length; i++) {
                    //给元素赋值
                    initStock(stocks[i]);
                }
            },
            error:function(){
            }
        });
    }

    function initNode(stock) {
        var array = stock.split("~");
        var name = array[1];
        var node =
            "<div class='card'>" +
            "<div class='content'>" +
            "<div class='header'>" + name + " </div>" +
            "<div class='description'>" +
            "当前价格：<input type='text' id='" + name + "' readonly='readonly' style='border: none;'><br>" +
            "涨&emsp;&emsp;跌：<span id='cz_" + name + "'></span><br>" +
            "买一：<input type='text' id='buy1_" + name + "' readonly='readonly' style='border: none;'>" +
            "卖一：<input type='text' id='sale1_" + name + "' readonly='readonly' style='border: none;'><br>" +
            "买二：<input type='text' id='buy2_" + name + "' readonly='readonly' style='border: none;'>" +
            "卖二：<input type='text' id='sale2_" + name + "' readonly='readonly' style='border: none;'><br>" +
            "买三：<input type='text' id='buy3_" + name + "' readonly='readonly' style='border: none;'>" +
            "卖三：<input type='text' id='sale3_" + name + "' readonly='readonly' style='border: none;'><br>" +
            "</input>" +
            "</div>" +
            "</div>" +
            "</div>";
        return node;
    }

    function initStock(stock) {
        var array = stock.split("~");
        var name = array[1];
        document.getElementById(name).value = array[3];
        document.getElementById("cz_" + name).innerText = array[31];
        document.getElementById("buy1_" + name).value = array[9] + "   数量：" + getNum(array[10]);
        document.getElementById("sale1_" + name).value = array[19] + "   数量：" + getNum(array[20]);
        document.getElementById("buy2_" + name).value = array[11] + "   数量：" + getNum(array[12]);
        document.getElementById("sale2_" + name).value = array[21] + "   数量：" + getNum(array[22]);
        document.getElementById("buy3_" + name).value = array[13] + "   数量：" + getNum(array[14]);
        document.getElementById("sale3_" + name).value = array[23] + "   数量：" + getNum(array[24]);
        if(array[3] < array[4]) {
            document.getElementById(name).className = "input_s2";
            document.getElementById("cz_" + name).className = "input_s2";
        } else if(array[3] == array[4]) {
            document.getElementById(name).className = "input_s3";
            document.getElementById("cz_" + name).className = "input_s3";
        } else {
            document.getElementById(name).className = "input_s1";
            document.getElementById("cz_" + name).className = "input_s1";
        }
    }

    function getNum(num){
        if(Number(num) / 10000 > 1){
            return new Number(num / 10000).toFixed(2)+"万";
        }else{
            return new Number(num).toFixed(0);
        }
    }
    reload();
    setInterval(reload, 1000); //每两秒钟更新一次
</script>
<script src="https://cdn.bootcss.com/semantic-ui/2.3.0/semantic.min.js"></script>
</body>

</html>