{extend name="basePcUser" /}

{block name="title"}个人中心{/block}
{block name="keywords"}个人中心{/block}
{block name="description"}个人中心{/block}

{block name="head"}
<!-- 社交媒体标签 -->
<meta property="og:title" content="个人中心" />
<meta property="og:description" content="个人中心" />
<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": "个人中心",
  "description": "个人中心",
  "datePublished": "{:date('Y-m-d')}"
}
</script>
{block name="head-js"}{/block}


{block name="main"}

{site:grm page_code="userinfo" diff="0" num="100" g_key="arrGrm" /}

<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  ">
                        {novel:list count="10" sort_type="news" d_key="key" d_val="Novel"  cache_life="86400"}
                        {include file="pc/public/endNovelList" start="0"/}
                        {/novel:list}

                    </ul>


                </div>
            </div>
        </div>
        {$arrGrm[4]|raw}
        <!--right mod -->
        <div class="r-botMod">
            <div class="myWorks myLike">
                <div class="i-title">推荐作品</div>
                <ul>
                    {novel:list count="10" sort_type="tuijian" d_key="key" d_val="Novel"  cache_life="86400"}
                    {$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>
                    {/novel:list}

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

<script>
     const strNovelUrlTemp = `{site:replace code="NOVEL_INFO_URL"}`;
    const strNovelChapterUrlTemp = `{site:replace code="CONTENT_INFO_URL"}`;
    const strSearchUrlTemp = `{site:replace code="SEARCH_INFO_URL"}`;


    document.addEventListener("DOMContentLoaded", function () {
        displayBookshelfInUser()
        displayHistoryInUser()
    })

    // 展示 书架
    function displayBookshelfInUser() {
        const strBookshelfKey = window.location.hostname + 'strBookshelfKey';
        // 获取书架数据
        const arrBookshelf = JSON.parse(localStorage.getItem(strBookshelfKey)) || [];
        console.log(arrBookshelf)

        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 strHistoryKey = window.location.hostname + 'strHistoryKey';
        // 获取最近阅读数据
        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}