<!--
 * @Author: PoJun
 * @Date: 2023-09-14 13:43:13
 * @LastEditors: PoJun
 * @LastEditTime: 2023-09-19 18:40:42
 * @Message: 论坛分类界面
-->
<template>
    <view class="page">
        <uv-vtabs
            :chain="false"
            :list="list"
            @change="change"
            :barItemStyle="{ 'text-align': 'center' }"
            :barItemActiveStyle="{ 'text-align': 'center', color: '#f8b700' }"
            :barItemActiveLineStyle="{ 'background-color': '#f8b700' }"
            :contentStyle="{ padding: '26rpx' }"
        >
            <uv-vtabs-item>
                <view class="content">
                    <view
                        @click="checkList(item2)"
                        class="content-item"
                        hover-class="uv-hover-class"
                        v-for="(item2, index2) in list2"
                        :key="index2"
                    >
                        <uv-image radius="6" v-if="item2.icon" width="36" height="36" :src="item2.icon">
                            <template v-slot:loading>
                                <uv-loading-icon></uv-loading-icon>
                            </template>
                        </uv-image>

                        <uv-icon v-else name="empty-history" size="24"></uv-icon>
                        <text class="content-item-text">{{ item2.name }}</text>
                    </view>
                </view>
            </uv-vtabs-item>
        </uv-vtabs>
    </view>
</template>

<script>
import { classifiedResources } from "@/static/js/constant.js";

export default {
    data() {
        return {
            list: [],
            value: 0,
        };
    },
    computed: {
        list2() {
            const _list = this.list[this.value]?.childrens;
            return _list ? _list : [];
        },
    },
    onReady() {
        this.list = classifiedResources;
    },
    methods: {
        change(index) {
            this.value = index;
        },
        checkList(item) {
            uni.$uv.route("/subpkg/forum/list/index", {
                name: encodeURI(item.name),
            });
        },
    },
};
</script>
<style scoped lang="scss">
.page {
    overflow: hidden;
}
.content {
    flex-direction: row;
    flex-wrap: wrap;

    &-item {
        display: flex;
        width: 33.33%;
        padding: 24rpx 0;
        align-items: center;

        &-text {
            margin-top: 10px;
            font-size: 28rpx;
        }
    }
    .uv-hover-class {
        background-color: $uv-info-light;
    }
}
</style>
