<div id="index-container" nz-row>
    <div id="index-left" nz-col nzOffset="2" nzSpan="14">
        <ng-template [ngIf]="articles&&articles.total">
            <c-article-detail-card *ngFor="let item of articles.list" [data]="item">
            </c-article-detail-card>
        </ng-template>
        <nz-pagination (nzPageIndexChange)="getArticles($event)"
                       *ngIf="articles" [nzPageIndex]="articles.pageNum"
                       [nzPageSize]="articles.pageSize"
                       [nzTotal]="articles.total"
                       style="text-align: center">

        </nz-pagination>
    </div>
    <div id="index-right" nz-col nzOffset="1" nzSpan="5">
        <!--   关于博主     -->
        <c-card-detail title="关于博主">
            <div id="index-bloger-container" title="">
                <img [src]="imgUrl"
                     alt="pic" id="index-bloger-pic">
                <div id="index-bloger-desc">
                    <p><span [title]="desc"
                             style="font-weight: bold;font-size: x-large;"> 郑 海</span></p>
                    <p><i nz-icon nzType="blog:location"></i> Location : 武汉</p>
                    <p><i nz-icon nzTheme="outline" nzType="github"></i>
                        Github : <a href="https://github.com/xiaohai2271" target="_blank"> link>></a>
                    </p>
                </div>
            </div>
            <div id="index-bloger-button-area" title="">
                <div id="index-bloger-qq-btn">
                    <i (mouseenter)="changeImg(qqQrImgUrl)" (mouseleave)="changeImg()" nz-icon nzTheme="outline"
                       nzType="qq"
                       style="color: #ff8936;border-color: #ff8936;cursor: pointer" title="QQ二维码"></i>
                </div>
                <div id="index-bloger-wx-btn">
                    <i (mouseenter)="changeImg(wxQrImgUrl)" (mouseleave)="changeImg()" nz-icon nzTheme="outline"
                       nzType="wechat"
                       style="color: #7bcfa6;border-color: #7bcfa6;cursor: pointer" title="微信二维码"></i>
                </div>
            </div>
        </c-card-detail>

        <!--  分类云  -->
        <c-card-detail title="分类云">
            <div style="text-align: center;user-select: none" title="">
                <c-tag-tag (tagClick)="toCategory(category.name)"
                           *ngFor="let category of categoryList"
                           [tag]="{name:category.name,size:category.articles.length}">
                </c-tag-tag>
            </div>
        </c-card-detail>

        <!--  标签云  -->
        <c-card-detail title="标签云">
            <div style="text-align: center;user-select: none" title="">
                <c-tag-tag (tagClick)="toTag(tag.name)" *ngFor="let tag of tagNameAndNumber" [tag]="tag">
                </c-tag-tag>
            </div>
        </c-card-detail>

        <!--  网站信息  -->
        <c-card-detail id="index-site-info" title="网站信息">
            <p *ngIf="counts && counts.articleCount">
                <i nz-icon nzTheme="outline" nzType="info-circle"></i>文章总数: {{counts.articleCount}}篇
            </p>
            <p *ngIf="counts && counts.categoryCount">
                <i nz-icon nzTheme="outline" nzType="info-circle"></i>分类总数: {{counts.categoryCount}}个
            </p>
            <p *ngIf="counts && counts.tagCount">
                <i nz-icon nzTheme="outline" nzType="info-circle"></i>标签总数: {{counts.tagCount}}个
            </p>
            <p *ngIf="counts && counts.visitorCount">
                <i nz-icon nzTheme="outline" nzType="info-circle"></i>访客总数: {{counts.visitorCount}}次
            </p>
            <p *ngIf="lastestUpdate">
                <i nz-icon nzTheme="outline" nzType="info-circle"></i>上次更新时间: {{lastestUpdate.lastUpdateTime}}
            </p>
            <p *ngIf="lastestUpdate&&lastestUpdate.committerDate">
                <i nz-icon nzTheme="outline" nzType="info-circle"></i>上次提交代码时间: {{lastestUpdate.committerDate}}
            </p>
        </c-card-detail>

        <c-card-detail class="index-words">
            <p>何为遗憾?</p>
            <p>鲥鱼多刺 海棠无香 红楼未完。</p>
            <p>可否具体?</p>
            <p>从别后 忆相逢 几回魂梦与伊同。</p>
            <p>可否再具体?</p>
            <p>终丢了你。</p>
        </c-card-detail>

        <c-card-detail class="index-words">
            <p>何为放下?</p>
            <p>喜你，成疾，药无医。</p>
            <p>可否具体?</p>
            <p>爱而，不得，终可惜。</p>
            <p>可否再具体?</p>
            <p>所有，来生，再相依。</p>
        </c-card-detail>
    </div>
</div>

