<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 引入自定义的CSS文件 -->
    <link rel="stylesheet" href="/css/page_common.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子证明列表</title>
    <style>
        .list {
            display: flex;
            margin-top: 20px;
            width: 100%;
            justify-content: center;
            align-items: center;
        }

        .list_ctn {
            width: 90%;
            margin: 10px;
        }

        .certificate-item {
            background: #e0f2f1;
            margin: 5px;
            padding: 15px;
            border-radius: 5px;
            /* 框下划线1px,灰色  */
            border-bottom: 2px solid #ccc;
        }

        .certificate-item p {
            margin: 5px 0;
        }

        .no-certificates-message {
            text-align: center;
            padding: 20px;
            font-size: 16px;
            color: #555;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h2>电子证明列表</h2>

    </div>
    <div class="list">
        <div id="certificate-list" class="list_ctn"></div>
    </div>
</div>

<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/main.js"></script>
<script>

    $(document).ready(function () {
        fetchCertificates();
    });



    function fetchCertificates() {
        const params = getQueryParams();
        const   pid = params.pid ;
        //ajax发起post请求获取证明列表数据
        $.ajax({
            url: '/proof/listContent',
            type: 'POST',
            dataType: 'json',
            data: {
                pid: pid
            },
            success: function (res) {
                if (res.code === 200) {
                    extracted(res);
                } else {
                    alert(res.msg);
                }
            },
            error: function (err) {
                console.log(err);
            }
        });


        function getQueryParams() {
            const params = {};
            const queryString = window.location.search.slice(1);
            const pairs = queryString.split('&');
            for (const pair of pairs) {
                const delimiterIndex = pair.indexOf('=');
                const key = delimiterIndex !== -1 ? pair.slice(0, delimiterIndex) : pair;
                const value = delimiterIndex !== -1 ? pair.slice(delimiterIndex + 1) : '';
                params[decodeURIComponent(key)] = decodeURIComponent(value);
            }
            return params;
        }


        function extracted(res) {
            const certificates = res.data;
            const list = document.getElementById('certificate-list');

            // 清空列表内容
            list.innerHTML = '';
            if (certificates.length === 0) {
                // 如果certificates为空，显示提示信息
                const message = document.createElement('div');
                message.className = 'no-certificates-message';
                message.innerHTML = '您在当前系统中未开具电子证明';
                list.appendChild(message);
            } else {
                // 如果certificates不为空，正常显示证书列表
                certificates.forEach(cert => {
                    const item = document.createElement('div');
                    item.className = 'certificate-item';
                    item.innerHTML = `
                <p>证明确类型: ${cert.typeName}</p>
                <p>开具日期: ${cert.bizDate}</p>
                <p>证明确编号: ${cert.fnumber}</p>
                <input type="hidden" id="logId"    value="${cert.fid}">
                <input type="hidden" id="urlDir"   value="${cert.urlDir}">
                <input type="hidden" id="fileName" value="${cert.fileName}">
            `;

                    // 添加点击事件
                    item.addEventListener('click', function () {
                        // 访问pdf文件
                        const urlDir = this.querySelector('#urlDir').value;
                        const fileName = this.querySelector('#fileName').value;
                        // 发起get请求跳转到pdf页面
                        window.location.href = `/proof/pdfView?urlDir=${encodeURIComponent(urlDir)}&fileName=${encodeURIComponent(fileName)}`;
                    });
                    list.appendChild(item);
                });
            }
        }

    }

</script>
</body>
</html>
