{extend name="basePcUser" /}
{block name="title"}{$strTitle??''}{/block}
{block name="keywords"}{$strKeywords??''}{/block}
{block name="description"}{$strDescription??''}{/block}
{block name="head"}
<!-- 社交媒体标签 -->
<meta property="og:title" content="{$strTitle??''}" />
<meta property="og:description" content="{$strDescription??''}" />
<meta property="og:url" content="https://{$DomainModel->d_domain}/user" />
<meta property="og:type" content="article" />
<!-- 结构化数据 -->
<script type="application/ld+json">
{
  "@context": "https://{$DomainModel->d_domain}/user",
  "@type": "article",
  "headline": "{$strTitle??''}",
  "description": "{$strDescription??''}",
  "datePublished": "{:date('Y-m-d')}"
}
</script>
{block name="head-js"}{/block}


{block name="main"}
<div class="i-right">
    <!--bot mod -->
    <div class="i-bot">
        <!--left mod -->
        <div class="l-botMod">
            <div class="myMod" id="myMod">
                <div class="i-title">
                    我的书架
                    <a href="/pc/bookshelf" class="clickMore">查看更多&gt;&gt;</a>
                </div>
                <ul class="bookUl" id="bookshelf-ul">


                </ul>
            </div>
            <div class="myMod">
                <div class="i-title">
                    最近阅读
                    <a href="/pc/history" class="clickMore">查看更多&gt;&gt;</a>
                </div>
                <ul class="bookUl" id="history-ul">


                </ul>
            </div>
            <div class="myMod hotMod">
                <div class="i-title">
                    热读作品

                </div>
                <div class="tabBd">
                    <ul class="hotBookBd  " >
                        {volist name="arrMoonRankNovel" id="Novel" key="key"}
                        {include file="Pc/Public/endNovelList" /}
                        {/volist}

                    </ul>
                    

                </div>
            </div>
        </div>
        <!--right mod -->
        <div class="r-botMod">
            <div class="myWorks myLike">
                <div class="i-title">推荐作品</div>
                <ul>
                    {volist name="arrRecommendEndNovel" id="Novel" key="key"}
                    <li>
                        <a href='/pc{site:nurl n_id="$Novel->n_id" n_py="$Novel->og_novel_pin_yin"/}' 
                            alt="{$Novel.og_novel_book_name ?? ''}" title="{$Novel.og_novel_book_name ?? ''}">
                            <img src="{$Novel.n_cover_path ?? ''}">
                        </a>
                        <p>
                            <a href="/novel/332.html">
                                <span class="bookName other">{$Novel.og_novel_book_name ?? ''}</span>
                            </a>
                            <a href="/search.html?keyword={$Novel->og_novel_author ?? ''}&page=1">
                                <span class="bookStatus other">{$Novel->og_novel_author ?? ''}</span>
                            </a>
                            <span class="bookBrief">
                                {$Novel.og_description  ?? ''}</span>
                        </p>
                    </li>
                    {/volist}

                </ul>
            </div>
        </div>
    </div>
</div>

<script>

    document.addEventListener("DOMContentLoaded", function () {

        displayBookshelfInUser()
        displayHistoryInUser()
    })

    // 展示 书架
    function displayBookshelfInUser() {

        // 获取书架数据
        const arrBookshelf = JSON.parse(localStorage.getItem('strBookshelfKey')) || [];

        if (arrBookshelf.length === 0) {
            console.log('书架为空');
            return;
        }

        // 渲染书籍列表
        const DomBookshelfContainer = document.getElementById('bookshelf-ul');
        DomBookshelfContainer.innerHTML = ''
        arrBookshelf.forEach(book => {
            const bookElement = document.createElement('li');
            if (isMobile()) {
                bookElement.innerHTML = `
                <a href="/xiaoshuo/${book.og_novel_pin_yin}-${book.n_id}"  alt="${book.og_novel_book_name}" title="${book.og_novel_book_name}">
                    <img src="${book.n_cover_path}">
                </a>
                <p>
                    <a href="/xiaoshuo/${book.og_novel_pin_yin}-${book.n_id}" >
                        <span class="bookName">${book.og_novel_book_name}</span>
                    </a>
                    <span class="bookStatus">
                        <b class="authorSt"><em>${book.og_novel_status}</em>
                            <a href="/search.html?keyword=${book.og_novel_author}">
                                <em class="none">${book.og_novel_author}</em>
                            </a>
                        </b>
                        <b class="authorSt chapterSt">
                            <a href="/xiaoshuo/${book.og_novel_pin_yin}-${book.n_id}/zhang-${book.c_sort_num}" >
                                <em class="ct">${book.c_name}</em>
                            </a>
                            <em class="time">${book.og_novel_update_time}</em></b>
                    </span>
                    <a href="/xiaoshuo/${book.og_novel_pin_yin}-${book.n_id}/zhang-${book.c_sort_num}" > 
                        <i class="goon">阅读</i>
                    </a>
                </p>
        `;
            } else {
                bookElement.innerHTML = `
            <a href="/xiaoshuo/${book.og_novel_pin_yin}-${book.n_id}"  alt="${book.og_novel_book_name}" title="${book.og_novel_book_name}">
                    <img src="${book.n_cover_path}">
                </a>
                <p>
                    <a href="/xiaoshuo/${book.og_novel_pin_yin}-${book.n_id}" >
                        <span class="bookName">${book.og_novel_book_name}</span>
                    </a>
                    <span class="bookStatus">
                        <b class="authorSt"><em>${book.og_novel_status}</em>
                            <a href="/search.html?keyword=${book.og_novel_author}">
                                <em class="none">${book.og_novel_author}</em>
                            </a>
                        </b>
                        <b class="authorSt chapterSt">
                            <a href="/xiaoshuo/${book.og_novel_pin_yin}-${book.n_id}/zhang-${book.c_sort_num}" >
                                <em class="ct">${book.c_name}</em>
                            </a>
                            <em class="time">${book.og_novel_update_time}</em></b>
                    </span>
                    <a href="/xiaoshuo/${book.og_novel_pin_yin}-${book.n_id}/zhang-${book.c_sort_num}" > 
                        <i class="goon">阅读</i>
                    </a>
                </p>
            
        `;
            }
            DomBookshelfContainer.appendChild(bookElement);
        });
    }

    // 展示 书架
    function displayHistoryInUser() {

        // 获取书架数据
        const arrBookshelf = JSON.parse(localStorage.getItem('strHistoryKey')) || [];

        if (arrBookshelf.length === 0) {
            console.log('书架为空');
            return;
        }

        // 渲染书籍列表
        const DomBookshelfContainer = document.getElementById('history-ul');
        DomBookshelfContainer.innerHTML = ''
        arrBookshelf.forEach(book => {
            const bookElement = document.createElement('li');
            if (isMobile()) {
                bookElement.innerHTML = `
        <a href="/xiaoshuo/${book.og_novel_pin_yin}-${book.n_id}"  alt="${book.og_novel_book_name}" title="${book.og_novel_book_name}">
            <img src="${book.n_cover_path}">
        </a>
        <p>
            <a href="/xiaoshuo/${book.og_novel_pin_yin}-${book.n_id}" >
                <span class="bookName">${book.og_novel_book_name}</span>
            </a>
            <span class="bookStatus">
                <b class="authorSt"><em>${book.og_novel_status}</em>
                    <a href="/search.html?keyword=${book.og_novel_author}">
                        <em class="none">${book.og_novel_author}</em>
                    </a>
                </b>
                <b class="authorSt chapterSt">
                    <a href="/xiaoshuo/${book.og_novel_pin_yin}-${book.n_id}/zhang-${book.c_sort_num}" >
                        <em class="ct">${book.c_name}</em>
                    </a>
                    <em class="time">${book.og_novel_update_time}</em></b>
            </span>
            <a href="/xiaoshuo/${book.og_novel_pin_yin}-${book.n_id}/zhang-${book.c_sort_num}" > 
                <i class="goon">阅读</i>
            </a>
        </p>
`;
            } else {
                bookElement.innerHTML = `
    <a href="/xiaoshuo/${book.og_novel_pin_yin}-${book.n_id}"  alt="${book.og_novel_book_name}" title="${book.og_novel_book_name}">
            <img src="${book.n_cover_path}">
        </a>
        <p>
            <a href="/xiaoshuo/${book.og_novel_pin_yin}-${book.n_id}" >
                <span class="bookName">${book.og_novel_book_name}</span>
            </a>
            <span class="bookStatus">
                <b class="authorSt"><em>${book.og_novel_status}</em>
                    <a href="/search.html?keyword=${book.og_novel_author}">
                        <em class="none">${book.og_novel_author}</em>
                    </a>
                </b>
                <b class="authorSt chapterSt">
                    <a href="/xiaoshuo/${book.og_novel_pin_yin}-${book.n_id}/zhang-${book.c_sort_num}" >
                        <em class="ct">${book.c_name}</em>
                    </a>
                    <em class="time">${book.og_novel_update_time}</em></b>
            </span>
            <a href="/xiaoshuo/${book.og_novel_pin_yin}-${book.n_id}/zhang-${book.c_sort_num}" > 
                <i class="goon">阅读</i>
            </a>
        </p>
    
`;
            }
            DomBookshelfContainer.appendChild(bookElement);
        });
    }

</script>
{/block}

{block name="customize"} {/block}