<view class="fav-page">
    <nav-bar title="我的收藏" />

    <scroll-view
        class="fav-scroll"
        style="height: {{favScrollHeight}}px;"
        scroll-y
        enhanced
        show-scrollbar="{{false}}">
        <view class="fav-body">
            <view class="fav-seg">
                <view
                    class="fav-seg__pill {{activeTab === 'favorites' ? 'fav-seg__pill--active' : ''}}"
                    data-tab="favorites"
                    bindtap="onTabSwitch">
                    <text class="fav-seg__text">收藏的题型</text>
                </view>
                <view
                    class="fav-seg__pill {{activeTab === 'downloads' ? 'fav-seg__pill--active' : ''}}"
                    data-tab="downloads"
                    bindtap="onTabSwitch">
                    <text class="fav-seg__text">下载历史</text>
                </view>
            </view>

            <!-- 收藏的题型 -->
            <block wx:if="{{activeTab === 'favorites'}}">
                <view wx:if="{{favoriteList.length === 0}}" class="fav-empty">
                    <text class="fav-empty__emoji">🦆</text>
                    <text class="fav-empty__msg">鸭丫还没找到收藏呢</text>
                    <text class="fav-empty__sub">去发现好玩的练习纸吧~</text>
                    <button class="fav-empty__btn" bindtap="onDiscoverTap">
                        去发现
                    </button>
                </view>
                <view wx:else class="fav-list">
                    <block wx:for="{{favoriteList}}" wx:key="id">
                        <view
                            wx:if="{{item.variant === 'standard'}}"
                            class="fav-card fav-card--row">
                            <image
                                class="fav-card__thumb"
                                src="{{item.thumb}}"
                                mode="aspectFill" />
                            <view class="fav-card__main">
                                <text class="fav-card__title"
                                    >{{item.title}}</text
                                >
                                <view class="fav-card__meta">
                                    <text class="fav-card__meta-text"
                                        >{{item.metaLine}}</text
                                    >
                                    <view
                                        class="fav-card__stars"
                                        aria-label="{{item.stars}} 星">
                                        <van-icon
                                            wx:if="{{item.stars >= 1}}"
                                            name="star"
                                            size="22rpx"
                                            color="#d4a900" />
                                        <van-icon
                                            wx:if="{{item.stars >= 2}}"
                                            name="star"
                                            size="22rpx"
                                            color="#d4a900" />
                                        <van-icon
                                            wx:if="{{item.stars >= 3}}"
                                            name="star"
                                            size="22rpx"
                                            color="#d4a900" />
                                    </view>
                                </view>
                                <text class="fav-card__badge"
                                    >{{item.timeBadge}}</text
                                >
                            </view>
                            <view
                                class="fav-card__heart"
                                data-id="{{item.id}}"
                                catchtap="onRemoveFavorite"
                                aria-role="button"
                                aria-label="取消收藏">
                                <van-icon
                                    name="like"
                                    size="40rpx"
                                    color="#b02500" />
                            </view>
                        </view>
                        <view
                            wx:elif="{{item.variant === 'featured'}}"
                            class="fav-card fav-card--bento">
                            <view class="fav-bento__content">
                                <text class="fav-card__title fav-bento__title"
                                    >{{item.title}}</text
                                >
                                <text class="fav-bento__meta"
                                    >{{item.metaLine}}</text
                                >
                                <view class="fav-bento__tags">
                                    <text
                                        wx:for="{{item.tags}}"
                                        wx:for-item="tag"
                                        wx:key="*this"
                                        class="fav-bento__tag"
                                        ># {{tag}}</text
                                    >
                                </view>
                            </view>
                            <van-icon
                                class="fav-bento__deco"
                                name="font-o"
                                size="200rpx"
                                color="rgba(108, 90, 0, 0.12)" />
                            <view
                                class="fav-bento__heart"
                                data-id="{{item.id}}"
                                catchtap="onRemoveFavorite"
                                aria-role="button">
                                <van-icon
                                    name="like"
                                    size="40rpx"
                                    color="#b02500" />
                            </view>
                        </view>
                    </block>
                </view>
                <view wx:if="{{favoriteList.length > 0}}" class="fav-cta">
                    <text class="fav-cta__hint">发现更多有趣的内容？</text>
                    <button class="fav-cta__btn" bindtap="onDiscoverTap">
                        去发现页看看
                    </button>
                </view>
            </block>

            <!-- 下载历史 -->
            <block wx:if="{{activeTab === 'downloads'}}">
                <view
                    wx:if="{{downloadSections.length === 0}}"
                    class="fav-empty">
                    <van-icon
                        name="clock"
                        size="120rpx"
                        color="#b3ac9f"
                        class="fav-empty__icon" />
                    <text class="fav-empty__msg">暂无下载记录</text>
                    <button class="fav-empty__btn" bindtap="onDiscoverTap">
                        去发现
                    </button>
                </view>
                <view wx:else class="fav-dl">
                    <block
                        wx:for="{{downloadSections}}"
                        wx:for-item="section"
                        wx:key="key">
                        <text class="fav-dl__section-label"
                            >{{section.label}}</text
                        >
                        <view class="fav-dl__items">
                            <view
                                wx:for="{{section.items}}"
                                wx:for-item="row"
                                wx:key="id"
                                class="fav-dl-row {{row.placeholder === 'draw' ? 'fav-dl-row--muted' : ''}}">
                                <view
                                    wx:if="{{row.placeholder === 'draw'}}"
                                    class="fav-dl-row__thumb fav-dl-row__thumb--ph">
                                    <van-icon
                                        name="brush-o"
                                        size="56rpx"
                                        color="#6d5720" />
                                </view>
                                <image
                                    wx:else
                                    class="fav-dl-row__thumb"
                                    src="{{row.thumb}}"
                                    mode="aspectFill" />
                                <view class="fav-dl-row__main">
                                    <text class="fav-dl-row__title"
                                        >{{row.title}}</text
                                    >
                                    <view class="fav-dl-row__meta">
                                        <van-icon
                                            name="clock"
                                            size="26rpx"
                                            color="#605b50" />
                                        <text class="fav-dl-row__time"
                                            >{{row.time}}</text
                                        >
                                        <view class="fav-dl-row__dot" />
                                        <text
                                            class="fav-dl-row__status {{row.statusHighlight ? 'fav-dl-row__status--hi' : ''}}"
                                            >{{row.status}}</text
                                        >
                                    </view>
                                </view>
                                <view
                                    class="fav-dl-row__more"
                                    data-id="{{row.id}}"
                                    catchtap="onDownloadMore">
                                    <van-icon
                                        name="ellipsis"
                                        size="40rpx"
                                        color="#7c766a" />
                                </view>
                            </view>
                        </view>
                    </block>
                </view>
            </block>
        </view>
    </scroll-view>
</view>
