{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}{$strUserUrlTemp}" />
<meta property="og:type" content="article" />
<!-- 结构化数据 -->
<script type="application/ld+json">
{
  "@context": "https://{$DomainModel->d_domain}{$strUserUrlTemp}",
  "@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">
                {$arrGrm[1]|raw}
                <div class="i-title">
                    我的书架
                    <a href="{$strPcPath}{$strBookShelfUrlTemp}" class="clickMore">查看更多&gt;&gt;</a>
                </div>
                <ul class="bookUl" id="bookshelf-ul">


                </ul>
            </div>
            {$arrGrm[2]|raw}
            <div class="myMod">
                <div class="i-title">
                    最近阅读
                    <a href="{$strPcPath}{$strHistoryUrlTemp}" class="clickMore">查看更多&gt;&gt;</a>
                </div>
                <ul class="bookUl" id="history-ul">


                </ul>
            </div>
            {$arrGrm[3]|raw}
            <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" start="0"/}
                        {/volist}

                    </ul>


                </div>
            </div>
        </div>
        {$arrGrm[4]|raw}
        <!--right mod -->
        <div class="r-botMod">
            <div class="myWorks myLike">
                <div class="i-title">推荐作品</div>
                <ul>
                    {volist name="arrRecommendEndNovel" id="Novel" key="key"}
                    {$arrGrm[$key]|raw}
                    <li>
                        <a href='{$strPcPath}{site:nurl n_id="$Novel[n_id]" n_py="$Novel[n_name_pinyin]"/}'
                            title="{$Novel.n_name ?? ''}">
                            <img src="{$Novel.n_cover_path ?? ''}" alt="{$Novel.n_name ?? ''}">
                        </a>
                        <p>
                            <a href='{$strPcPath}{site:nurl n_id="$Novel->n_id" n_py="$Novel->n_name_pinyin"/}'>
                                <span class="bookName other">{$Novel.n_name ?? ''}</span>
                            </a>
                            <a href='{$strPcPath}{site:souurl key="$Novel[n_author]" p="1"/}'>
                                <span class="bookStatus other">{$Novel->n_author ?? ''}</span>
                            </a>
                            <span class="bookBrief">
                                {$Novel.n_description ?? ''}</span>
                        </p>
                    </li>
                    {/volist}

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

<script>
    const strNovelUrlTemp = `{$strNovelUrlTemp}`;
    const strNovelChapterUrlTemp = `{$strNovelChapterUrlTemp}`;
    const strSearchUrlTemp = `{$strSearchUrlTemp}`;


    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 => {
            let strNovelUrl = formatNovelUrl(book.n_name_pinyin, book.n_id)
            let strNovelChapterUrl = formatNovelChapterUrl(book.n_name_pinyin, book.n_id, book.c_sort_num)
            let strSearchUrl = formatSearchUrl(book.n_author, 1)
            const bookElement = document.createElement('li');
            if (isMobile()) {

                bookElement.innerHTML = `
                <a href="${strNovelUrl}"  alt="${book.n_name}" title="${book.n_name}">
                    <img src="${book.n_cover_path}">
                </a>
                <p>
                    <a href="${strNovelUrl}" >
                        <span class="bookName">${book.n_name}</span>
                    </a>
                    <span class="bookStatus">
                        <b class="authorSt"><em>${book.n_status}</em>
                            <a href='${strSearchUrl}'>
                                <em class="none">${book.n_author}</em>
                            </a>
                        </b>
                        <b class="authorSt chapterSt">
                            <a href="${strNovelChapterUrl}" >
                                <em class="ct">${book.c_name}</em>
                            </a>
                            <em class="time">${book.n_update_time}</em></b>
                    </span>
                    <a href="${strNovelChapterUrl}" > 
                        <i class="goon">阅读</i>
                    </a>
                </p>
        `;
            } else {
                bookElement.innerHTML = `
            <a href="${strPcPath}${strNovelUrl}"  alt="${book.n_name}" title="${book.n_name}">
                    <img src="${book.n_cover_path}">
                </a>
                <p>
                    <a href="${strPcPath}${strNovelUrl}" >
                        <span class="bookName">${book.n_name}</span>
                    </a>
                    <span class="bookStatus">
                        <b class="authorSt"><em>${book.n_status}</em>
                            <a href='${strPcPath}${strSearchUrl}'>
                                <em class="none">${book.n_author}</em>
                            </a>
                        </b>
                        <b class="authorSt chapterSt">
                            <a href="${strPcPath}${strNovelChapterUrl}" >
                                <em class="ct">${book.c_name}</em>
                            </a>
                            <em class="time">${book.n_update_time}</em></b>
                    </span>
                    <a href="${strPcPath}${strNovelChapterUrl}" > 
                        <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 => {
            let strNovelUrl = formatNovelUrl(book.n_name_pinyin, book.n_id)
            let strNovelChapterUrl = formatNovelChapterUrl(book.n_name_pinyin, book.n_id, book.c_sort_num)
            let strSearchUrl = formatSearchUrl(book.n_author, 1)
            const bookElement = document.createElement('li');
            if (isMobile()) {
                bookElement.innerHTML = `
        <a href="${strNovelUrl}"  alt="${book.n_name}" title="${book.n_name}">
            <img src="${book.n_cover_path}">
        </a>
        <p>
            <a href="${strNovelUrl}" >
                <span class="bookName">${book.n_name}</span>
            </a>
            <span class="bookStatus">
                <b class="authorSt"><em>${book.n_status}</em>
                    <a href='${strSearchUrl}'>
                        <em class="none">${book.n_author}</em>
                    </a>
                </b>
                <b class="authorSt chapterSt">
                    <a href="${strNovelChapterUrl}" >
                        <em class="ct">${book.c_name}</em>
                    </a>
                    <em class="time">${book.n_update_time}</em></b>
            </span>
            <a href="${strNovelChapterUrl}" > 
                <i class="goon">阅读</i>
            </a>
        </p>
`;
            } else {
                bookElement.innerHTML = `
    <a href="${strPcPath}${strNovelUrl}"  alt="${book.n_name}" title="${book.n_name}">
            <img src="${book.n_cover_path}">
        </a>
        <p>
            <a href="${strPcPath}${strNovelUrl}" >
                <span class="bookName">${book.n_name}</span>
            </a>
            <span class="bookStatus">
                <b class="authorSt"><em>${book.n_status}</em>
                    <a href='${strSearchUrl}'>
                        <em class="none">${book.n_author}</em>
                    </a>
                </b>
                <b class="authorSt chapterSt">
                    <a href="${strPcPath}${strNovelChapterUrl}" >
                        <em class="ct">${book.c_name}</em>
                    </a>
                    <em class="time">${book.n_update_time}</em></b>
            </span>
            <a href="${strPcPath}${strNovelChapterUrl}" > 
                <i class="goon">阅读</i>
            </a>
        </p>
    
`;
            }
            DomBookshelfContainer.appendChild(bookElement);
        });
    }

</script>
{/block}

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