<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>股票估值分析工具</title>
    <!-- 引入jQuery（必须在Bootstrap之前）-->
    <script src="../static/js/jquery.min.js"></script>
    <!-- 引入Bootstrap CSS -->
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入ECharts -->
    <script src="../static/js/echarts.min.js"></script>
    <!-- 引入Select2 CSS 和 JS (用于可搜索的下拉框) -->
    <link href="../static/css/select2.min.css" rel="stylesheet" />
    <script src="../static/js/select2.min.js"></script>
    <!-- 引入自定义CSS -->
    <link href="/static/css/style.css" rel="stylesheet">
    <style>
        /* 自定义Select2样式使其与Bootstrap兼容 */
        .select2-container .select2-selection--single {
            height: 38px;
            line-height: 38px;
            border: 1px solid #ced4da;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 38px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">股票估值分析工具</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" href="/">个股估值分析</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/industry">行业估值分析</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/hsgt">资金情况</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <h1 class="text-center mb-4">个股估值分析</h1>
        
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">股票估值分析</h5>
            </div>
            <div class="card-body">
                <form id="valuationForm" class="row g-3">
                    <div class="col-md-6">
                        <label for="stockCode" class="form-label">股票代码</label>
                        <input type="text" class="form-control" id="stockCode" placeholder="例如: SH603986" required>
                        <div class="form-text">请输入股票代码（带前缀SH/SZ）</div>
                    </div>
                    
                    <div class="col-md-6">
                        <label for="startDate" class="form-label">开始日期</label>
                        <input type="date" class="form-control" id="startDate" value="2018-01-01" required>
                    </div>
                    
                    <div class="col-md-4">
                        <label for="metric" class="form-label">估值指标</label>
                        <select class="form-select" id="metric" required>
                            <option value="pe" selected>PE (市盈率)</option>
                            <option value="pb">PB (市净率)</option>
                        </select>
                    </div>
                    
                    <div class="col-md-4">
                        <label for="industryName" class="form-label">行业名称（可选）</label>
                        <select class="form-control select2" id="industryName">
                            <option value="">请选择行业</option>
                            <!-- 选项将通过JS动态加载 -->
                        </select>
                    </div>
                    
                    <div class="col-md-4">
                        <label for="conceptName" class="form-label">概念板块（可选）</label>
                        <select class="form-control select2" id="conceptName">
                            <option value="">请选择概念板块</option>
                            <!-- 选项将通过JS动态加载 -->
                        </select>
                    </div>
                    
                    <div class="col-12 text-center mt-4">
                        <button type="submit" class="btn btn-primary px-4" id="analyzeBtn">
                            <span class="spinner-border spinner-border-sm d-none" id="loadingSpinner" role="status" aria-hidden="true"></span>
                            分析
                        </button>
                        <button type="button" class="btn btn-secondary px-4" id="resetBtn">重置</button>
                    </div>
                </form>
            </div>
        </div>
        
        <div class="card mb-4 d-none" id="resultCard">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0" id="resultTitle">分析结果</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-8">
                        <!-- 图表容器，明确指定宽度和高度 -->
                        <div id="valuationChart" style="width:100%; height:500px; min-height:350px;"></div>
                    </div>
                    <div class="col-md-4">
                        <!-- 估值分位数据 -->
                        <div class="card">
                            <div class="card-header bg-info text-white">
                                <h6 class="mb-0">估值分位数据</h6>
                            </div>
                            <div class="card-body">
                                <table class="table table-striped">
                                    <tbody id="percentileTable">
                                        <!-- 将通过JS动态填充 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                        <!-- 行业/概念统计 -->
                        <div class="card mt-3 d-none" id="industryStats">
                            <div class="card-header bg-info text-white">
                                <h6 class="mb-0">行业统计数据</h6>
                            </div>
                            <div class="card-body">
                                <table class="table table-striped">
                                    <tbody id="industryStatsTable">
                                        <!-- 将通过JS动态填充 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                        <div class="card mt-3 d-none" id="conceptStats">
                            <div class="card-header bg-info text-white">
                                <h6 class="mb-0">概念板块统计数据</h6>
                            </div>
                            <div class="card-body">
                                <table class="table table-striped">
                                    <tbody id="conceptStatsTable">
                                        <!-- 将通过JS动态填充 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="alert alert-danger d-none" id="errorAlert">
            <strong>错误：</strong> <span id="errorMessage"></span>
        </div>
    </div>
    
    <!-- 引入Bootstrap JS (确保在jQuery之后) -->
    <script src="../static/js/bootstrap.bundle.min.js"></script>
    <!-- 引入自定义JS -->
    <script src="/static/js/valuation.js"></script>
    <script>
        // 行业和概念板块互斥选择逻辑
        $(document).ready(function() {
            // 行业选择变化时
            $('#industryName').on('change', function() {
                if ($(this).val()) {
                    // 如果选择了行业，禁用概念板块
                    $('#conceptName').prop('disabled', true);
                    // 同时更新Select2的状态
                    $('#conceptName').select2({disabled: true});
                } else {
                    // 如果清空了行业，启用概念板块
                    $('#conceptName').prop('disabled', false);
                    // 同时更新Select2的状态
                    $('#conceptName').select2({disabled: false});
                }
            });

            // 概念板块选择变化时
            $('#conceptName').on('change', function() {
                if ($(this).val()) {
                    // 如果选择了概念，禁用行业
                    $('#industryName').prop('disabled', true);
                    // 同时更新Select2的状态
                    $('#industryName').select2({disabled: true});
                } else {
                    // 如果清空了概念，启用行业
                    $('#industryName').prop('disabled', false);
                    // 同时更新Select2的状态
                    $('#industryName').select2({disabled: false});
                }
            });
        });
    </script>
</body>
</html> 