<%@ 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>
        .concept-name {
            color: #1E9FFF;
            cursor: pointer;
        }
        .concept-name:hover {
            text-decoration: underline;
        }
        .stock-name {
            color: #1E9FFF;
            cursor: pointer;
        }
        .stock-name:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">股票概念查询</a>
        <a><cite>股票概念查询</cite></a>
    </span>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so" action="<%=path %>/stockAnalyse/queryStockConcept" method="post">
            <input type="text" name="stockCode" placeholder="请输入股票代码" value="${stockCode}" autocomplete="off" class="layui-input">
            <button class="layui-btn" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>
    
    <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>领涨股票</th>
            <th>领涨股涨跌幅</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${pages.list}" var="item">
            <tr>
                <td>${item.ranking}</td>
                <td><span class="concept-name" onclick="showConceptStocks('${item.concept_name}')">${item.concept_name}</span></td>
                <td>${item.concept_code}</td>
                <td>${item.price}</td>
                <td>${item.amount}</td>
                <td>${item.plimit}</td>
                <td>${item.allamount}</td>
                <td>${item.turnrate}</td>
                <td>${item.count1}</td>
                <td>${item.count2}</td>
                <td>${item.stock}</td>
                <td>${item.stock_zdf}</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/queryStockConcept?stockCode=${stockCode}&curPage=1">首页</a>
            <c:if test="${pages.hasPreviousPage}">
                <a href="<%=path %>/stockAnalyse/queryStockConcept?stockCode=${stockCode}&curPage=${pages.pageNum-1}">上一页</a>
            </c:if>
            <c:forEach items="${pages.navigatepageNums}" var="pageNum">
                <a href="<%=path %>/stockAnalyse/queryStockConcept?stockCode=${stockCode}&curPage=${pageNum}">${pageNum}</a>
            </c:forEach>
            <c:if test="${pages.hasNextPage}">
                <a href="<%=path %>/stockAnalyse/queryStockConcept?stockCode=${stockCode}&curPage=${pages.pageNum+1}">下一页</a>
            </c:if>
            <a class="num" href="<%=path %>/stockAnalyse/queryStockConcept?stockCode=${stockCode}&curPage=${pages.pages}">尾页</a>
        </div>
    </div>
</div>
<script>
layui.use(['layer'], function() {
    var layer = layui.layer;
    window.layer = layer;  // 使layer在全局可用
});

function showConceptStocks(conceptName) {
    if(!conceptName) {
        layer.msg('概念名称不能为空');
        return;
    }
    $.ajax({
        url: '<%=path%>/stockAnalyse/queryConceptStocks',
        type: 'GET',
        data: {
            conceptName: conceptName
        },
        success: function(result) {
            if(result.code === 0) {
                let data = result.data;
                let content = '<div style="padding: 20px;">';
                content += '<table class="layui-table">';
                content += '<thead><tr><th>股票代码</th><th>股票名称</th></tr></thead>';
                content += '<tbody>';
                data.forEach(function(item) {
                    content += '<tr>';
                    content += '<td>' + item.code + '</td>';
                    content += '<td><a href="javascript:;" class="stock-name" onclick="showKLine(\'' + item.code + '\', \'' + item.name + '\')">' + item.name + '</a></td>';
                    content += '</tr>';
                });
                content += '</tbody></table></div>';

                layer.open({
                    type: 1,
                    title: conceptName + ' - 相关股票',
                    area: ['500px', '400px'],
                    shadeClose: true,
                    content: content
                });
            } else {
                layer.msg(result.msg || '获取数据失败');
            }
        },
        error: function(xhr, status, error) {
            layer.msg('获取数据失败: ' + error);
            console.error('Ajax error:', status, error);
        }
    });
}
</script>
</body>
</html>