<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知识库</title>
    <link rel="stylesheet" href="{$smarty.const.CSS_URL}/css/common.css?v={$smarty.const.CSS_JS_VERSION}">
    <link rel="stylesheet" href="{$smarty.const.CSS_URL}/css/index.css?v={$smarty.const.CSS_JS_VERSION}">
    <script src="{$smarty.const.CSS_URL}/js/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div class="home-page">
        {include file="include/header.html"}

        <div class="home-main-content">
            <div class="home-main">
                <div class="tab-list index-nav-wrap flex">
                    <ul class="tab-wrap">
                        <li class="index-nav-wrap-li" type="1"><span class="active">待审批</span></li>
                        <li class="index-nav-wrap-li" type="2"><span>已审批</span></li>
                        <li class="index-nav-wrap-li" type="3"><span>已删除</span></li>
                    </ul>
                    <button class="addNewBtn">
                        <img src="{$smarty.const.CSS_URL}/images/add.svg" alt="">新增自录入
                    </button>
                </div>


                <div class="list_all" id="data-list">
                </div>


                <!-- 数据列表 -->
                <!-- <ul id="data-list"></ul> -->

                <!-- 分页控件 -->
                <div class="pagination hide">
                    <img id="prev-page" src="{$smarty.const.CSS_URL}/images/prev.svg" alt="">
                    <ul id="page-numbers"></ul>
                    <img id="next-page" src="{$smarty.const.CSS_URL}/images/next.svg" alt="">
                    <div class="input-page">
                        <span>前往</span>
                        <input type="number" id="jump-to-page" min="1" placeholder="页码">
                        <span>页</span>
                    </div>
                    <button id="go-to-page">跳转</button>
                </div>

                <!-- 放大后的图片容器 -->
                <div id="large-image-container">
                    <h2>预览</h2>
                    <img id="large-image" src="{$smarty.const.CSS_URL}/images/viewimg1.png" alt="Large Image">
                    <span id="close-btn2">×</span>
                </div>

                <!-- 放大后的视频容器 -->
                <div id="large-video-container">
                    <video id="large-video" controls>
                        <source id="large-viedo-url" src="" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                    <button id="close-btn">×</button>
                </div>

                <!-- 弹框 -->
                <div class="modal-overlay"></div>
                <div class="modal">
                    <div class="modal_top">
                        <b id="header_title">编辑</b>
                        <img src="{$smarty.const.CSS_URL}/images/close_modal.svg" id="close_modal" alt="">
                    </div>

                    <div class="add-form">
                        <div class="form-item radio-form">
                            <input type="hidden" id="id" value="">
                            <div class="form-left">
                                录入形式
                            </div>
                            <div class="form-right radio-wrap flex">
                                <div class="radio_box radio_box_active">
                                    <input value="1" type="radio"id="edu1">
                                    <div></div>
                                    <label >信息段录入</label>
                                </div>
                                <div class="radio_box">
                                    <input value="2" type="radio"id="edu2">
                                    <div></div>
                                    <label >问答式录入</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-item normal-form" style="display: none;">
                            <div class="form-left">
                                提问信息
                            </div>
                            <div class="form-right">
                                <div class="text-area-container">
                                    <textarea class="edit-input normal-input" ></textarea>
                                    <div class="char-count wordNum">0/100</div>
                                  </div>
                            </div>
                        </div>

                        <div class="form-item">
                            <div class="form-left common-input">
                                回答信息
                            </div>
                            <div class="form-right">
                                <div class="text-area-container">
                                    <textarea class="edit-input answer-input" ></textarea>
                                    <div class="char-count1 wordNum">0/100</div>
                                  </div>
                            </div>
                        </div>
                    </div>
                    {literal}
                    <script>
                        const maxLength = 100; // 设置最大字数限制
                        $('.normal-input').on('input', function () {
                            var currentLength = $(this).val().length;
                            $('.char-count').text(currentLength + '/' + maxLength);
                            if (currentLength > maxLength) {
                                $('.normal-input').val($('.normal-input').val().slice(0, maxLength))
                                $('.char-count').text(maxLength + '/' + maxLength);
                            }
                        });
                        $('.answer-input').on('input', function () {
                            var currentLength = $(this).val().length;
                            $('.char-count1').text(currentLength + '/' + maxLength);
                            if (currentLength > maxLength) {
                                $('.answer-input').val($('.answer-input').val().slice(0, maxLength))
                                $('.char-count1').text(maxLength + '/' + maxLength);
                            }
                        });
                    </script>
                    {/literal}
                    <div class="img_list2" style="display: none;"></div>
                    <div class="preview"></div>

                    <div class="modal_upload_btn flex hide">
                        <div class="flex modal_btns">
                            <button id="upload-image-btn" class="button upload_btn">
                                <img src="{$smarty.const.CSS_URL}/images/img_upload.svg" alt="">上传图片
                            </button>
                            <button id="upload-video-btn" class="button upload_btn">
                                <img src="{$smarty.const.CSS_URL}/images/vedio_upload.svg" alt="">上传视频
                            </button>
                        </div>
                        <p>支持 jpg、png、mp4 格式,单个文件不超过 10MB</p>
                    </div>
                    <input type="file" id="upload-image" accept="image/*" style="display: none;" multiple>
                    <input type="file" id="upload-video" accept="video/*" style="display: none;" multiple>
                    <div class="buttons flex">
                        <button id="submit" class="button ">仅保存</button>
                        <button id="savePass" class="button button-primary">保存并通过审批</button>
                    </div>
                </div>
            </div>
        </div>
        {include file="include/footer.html"}
    </div>
</body>
<script src="{$smarty.const.CSS_URL}/js/index.js?v={$smarty.const.CSS_JS_VERSION}"></script>

</html>