<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ 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>股票管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="<%=path%>/static/css/font.css">
    <link rel="stylesheet" href="<%=path%>/static/css/xadmin.css">
    <script type="text/javascript" src="<%=path%>/static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="<%=path%>/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=path%>/static/js/xadmin.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <style>
        .stock-name {
            color: #1E9FFF;
            cursor: pointer;
        }
        .stock-name:hover {
            text-decoration: underline;
        }
        .rise {
            color: #ec0000;
        }
        .fall {
            color: #00da3c;
        }
    </style>
</head>

<body>
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">股票分析列表</a>
        <a><cite>股票分析列表</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i>
    </a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so" action="<%=path %>/stockAnalyse/query" method="post">
            <input type="text" id="date" name="date"  placeholder="请输入日期" value="${stockAnalyse.date}" autocomplete="off" readonly class="layui-input">
            <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>
<%--    <xblock>--%>
<%--        <button class="layui-btn" onclick="x_admin_show('添加','<%=path%>/stockAnalyse/add',700,400)">--%>
<%--            <i class="layui-icon"></i>添加--%>
<%--        </button>--%>
<%--    </xblock>--%>
    <table class="layui-table">
        <thead>
        <tr>
            <th>
                股票代码
            </th>
            <th>
                股票名称
            </th>
            <th>
                行业
            </th>
            <th>
                分析时间
            </th>
            <th>
                分析价格
            </th>
            <th>
                当前价格
            </th>
            <th>
                分析排名
            </th>
            <th>
                当前排名
            </th>
            <th>
                当前涨跌幅
            </th>
            <th>
                分析后涨跌幅
            </th>
<%--            <th>--%>
<%--                20天最低点--%>
<%--            </th>--%>
            <th>
                20天涨跌幅
            </th>
<%--            <th>--%>
<%--                买入次数--%>
<%--            </th>--%>
<%--            <th>--%>
<%--                买入价格--%>
<%--            </th>--%>
            <th>
                资金流入排名
            </th>
            <th>
                主力资金流入额
            </th>
        </thead>
        <tbody>
        <c:forEach items="${pages.list}" var="item">
            <tr>
            <td width="70px">
                ${item.code}
            </td>
            <td width="70px">
                <a href="javascript:;" class="stock-name" onclick="showKLine('${item.code}', '${item.name}')">${item.name}</a>
            </td>
            <td>
                ${item.industry}
            </td>
            <td>
                ${item.date}
            </td>
                <td>
                        ${item.price}
                </td>
                <td>
                        ${item.nowPrice}
                </td>
                <td>
                        <c:choose>
                            <c:when test="${!empty item.sentiment && item.sentiment != null && item.sentiment <= 200}">
                                <span class="rise">${item.sentiment}</span>
                            </c:when>
                            <c:otherwise>
                                ${item.sentiment}
                            </c:otherwise>
                        </c:choose>
                </td>
                <td>
                        <c:choose>
                            <c:when test="${!empty item.sentiment1 && item.sentiment1 != null && item.sentiment1 <= 200}">
                                <span class="rise">${item.sentiment1}</span>
                            </c:when>
                            <c:otherwise>
                                ${item.sentiment1}
                            </c:otherwise>
                        </c:choose>
                </td>
                <td>
                        <c:choose>
                            <c:when test="${!empty item.zdf && item.zdf != null && item.zdf > '0'}">
                                <span class="rise">+${item.zdf}</span>
                            </c:when>
                            <c:when test="${!empty item.zdf && item.zdf != null && item.zdf < '0'}">
                                <span class="fall">${item.zdf}</span>
                            </c:when>
                            <c:otherwise>
                                ${item.zdf}
                            </c:otherwise>
                        </c:choose>
                </td>
                <td>
                        <c:choose>
                            <c:when test="${!empty item.zdf1 && item.zdf1 != null && item.zdf1 > '0'}">
                                <span class="rise">+${item.zdf1}</span>
                            </c:when>
                            <c:when test="${!empty item.zdf1 && item.zdf1 != null && item.zdf1 < '0'}">
                                <span class="fall">${item.zdf1}</span>
                            </c:when>
                            <c:otherwise>
                                ${item.zdf1}
                            </c:otherwise>
                        </c:choose>
                </td>
                <%--<td>
                        ${item.dd}
                </td>--%>
                <td>
                        ${item.zdf2}
                </td>
                <%--<td>
                        ${item.buyCount}
                </td>
                <td>
                        ${item.buyPrice}
                </td>--%>
                <td>
                        ${item.zjpm}
                </td>
                <td>
                        ${item.flow}
                </td>

<%--                <td class="td-manage">--%>
<%--                    <a title="编辑" onclick="x_admin_show('编辑','<%=path %>/stockAnalyse/update?id=${item.id}',700,400)" href="javascript:;">--%>
<%--                        <i class="layui-icon">&#xe642;</i>--%>
<%--                    </a>--%>
<%--                    <a title="删除" onclick="stockAnalyse_del(this,'${item.id}')" href="javascript:;">--%>
<%--                        <i class="layui-icon">&#xe640;</i>--%>
<%--                    </a>--%>
<%--                    <a title="详情" onclick="x_admin_show('详情','<%=path %>/stockAnalyse/detail?id=${item.id}',700,400)" href="javascript:;">--%>
<%--                        <i class="layui-icon">&#xe60a;</i>--%>
<%--                    </a>--%>
<%--                </td>--%>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <div class="page">
        <div>第&nbsp;${pages.pageNum}&nbsp;页/共&nbsp;${pages.pages}&nbsp;页</div>
        <div>
            <a class="num" href="<%=path %>/stockAnalyse/query?curPage=1">首页</a>
            <c:if test="${pages.hasPreviousPage}">
                <a href="<%=path %>/stockAnalyse/query?curPage=${pages.pageNum-1}" aria-label="Previous"> 上一页</a>
            </c:if>
            <c:if test="${!pages.hasPreviousPage}">
                <a href="javascript:;" aria-label="Previous"> 上一页</a>
            </c:if>
            <c:forEach items="${pages.navigatepageNums}" var="pageNum">
                <a href="<%=path %>/stockAnalyse/query?curPage=${pageNum}">${pageNum}</a>
            </c:forEach>
            <c:if test="${pages.hasNextPage}">
                <a href="<%=path %>/stockAnalyse/query?curPage=${pages.pageNum+1}" aria-label="Next"> 下一页</a>
            </c:if>
            <c:if test="${!pages.hasNextPage}">
                <a href="javascript:;" aria-label="Next"> 下一页</a>
            </c:if>
            <a class="num" href="<%=path %>/stockAnalyse/query?curPage=${pages.pages}">尾页</a>
        </div>
    </div>

</div>
<script>
layui.use(['laydate', 'layer'], function () {
    var laydate = layui.laydate;
    var layer = layui.layer;
    window.layer = layer;  // 使layer在全局可用

    laydate.render({
        elem: '#date'
    })
})

function stockAnalyse_del(obj, id) {
    layer.confirm('确认要删除吗？', function (index) {
        $.ajax({
            type: "GET",
            url: "<%=path %>/stockAnalyse/delete",
            data: {
                id :id
            },
            success: function (data) {
                $(obj).parents("tr").remove();
                layer.msg('已删除!', {icon: 1, time: 1000});
            }
        });
    });
}

function showKLine(stockCode, stockName) {
    // 创建弹窗内容
    let content = '<div id="klineChart" style="width: 100%; height: 100%;"></div>';

    // 打开弹窗
    layer.open({
        type: 1,
        title: stockName + '(' + stockCode + ') K线图',
        area: ['900px', '600px'],
        shadeClose: true,
        content: content,
        success: function(layero, index) {
            // 初始化echarts实例
            setTimeout(function() {
                var myChart = echarts.init(document.getElementById('klineChart'));
                myChart.showLoading();

                // 获取数据
                $.ajax({
                    url: '<%=path%>/stockAnalyse/getKLineData',
                    type: 'GET',
                    data: {
                        stockCode: stockCode
                    },
                    success: function(result) {
                        myChart.hideLoading();
                        if(result.code === 0) {
                            let data = result.data;
                            let dates = data.map(item => item.date);
                            let values = data.map(item => [
                                parseFloat(item.open),
                                parseFloat(item.close),
                                parseFloat(item.low),
                                parseFloat(item.high)
                            ]);
                            let volumes = data.map(item => parseFloat(item.volume));

                            // 配置K线图
                            let option = {
                                backgroundColor: '#fff',
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'cross'
                                    }
                                },
                                legend: {
                                    data: ['K线', '成交量']
                                },
                                grid: [
                                    {
                                        left: '10%',
                                        right: '10%',
                                        top: '10%',
                                        height: '60%'
                                    },
                                    {
                                        left: '10%',
                                        right: '10%',
                                        top: '75%',
                                        height: '15%'
                                    }
                                ],
                                xAxis: [
                                    {
                                        type: 'category',
                                        data: dates,
                                        scale: true,
                                        boundaryGap: false,
                                        axisLine: {onZero: false},
                                        splitLine: {show: false},
                                        splitNumber: 20
                                    },
                                    {
                                        type: 'category',
                                        gridIndex: 1,
                                        data: dates,
                                        scale: true,
                                        boundaryGap: false,
                                        axisLine: {onZero: false},
                                        axisTick: {show: false},
                                        splitLine: {show: false},
                                        axisLabel: {show: false},
                                        splitNumber: 20
                                    }
                                ],
                                yAxis: [
                                    {
                                        scale: true,
                                        splitArea: {
                                            show: true
                                        }
                                    },
                                    {
                                        scale: true,
                                        gridIndex: 1,
                                        splitNumber: 2,
                                        axisLabel: {show: false},
                                        axisLine: {show: false},
                                        axisTick: {show: false},
                                        splitLine: {show: false}
                                    }
                                ],
                                dataZoom: [
                                    {
                                        type: 'inside',
                                        xAxisIndex: [0, 1],
                                        start: 50,
                                        end: 100
                                    },
                                    {
                                        show: true,
                                        xAxisIndex: [0, 1],
                                        type: 'slider',
                                        bottom: '0%',
                                        start: 50,
                                        end: 100
                                    }
                                ],
                                series: [
                                    {
                                        name: 'K线',
                                        type: 'candlestick',
                                        data: values,
                                        itemStyle: {
                                            color: '#ec0000',
                                            color0: '#00da3c',
                                            borderColor: '#8A0000',
                                            borderColor0: '#008F28'
                                        }
                                    },
                                    {
                                        name: '成交量',
                                        type: 'bar',
                                        xAxisIndex: 1,
                                        yAxisIndex: 1,
                                        data: volumes
                                    }
                                ]
                            };

                            myChart.setOption(option);
                            $(window).on('resize', function() {
                                myChart.resize();
                            });
                        } else {
                            layer.msg(result.msg || '获取数据失败');
                        }
                    },
                    error: function(xhr, status, error) {
                        myChart.hideLoading();
                        layer.msg('获取数据失败: ' + error);
                        console.error('Ajax error:', status, error);
                    }
                });
            }, 100);
        }
    });
}
</script>
</body>
</html>