<template>
    <div class="recommend">
        <!-- 热门版块 -->
        <div class="hot-box">
            <div class="hot-label" :class="{active: item.fid == fid}" v-for="(item, index) in hotList" :key="index" @click="hotLabelClick(item.fid)">{{ item.name }}</div>
        </div>
        <!-- 路径 -->
        <plate-navigation v-if="fid != 0" :fid="plate.fid" :stairname="plate.stairname" :subsectionsname="plate.subsectionsname"></plate-navigation>
        <section>
            <template v-if="list.length != 0 || loading">
                <index-list :list="list"></index-list>
                <div class="paging flexcenter" v-if="!loading">
                    <el-pagination small background layout="prev, pager, next" @current-change="currentChange" :current-page.sync="page" :page-size="limit" :total="count"> </el-pagination>
                    <!-- <el-pagination @current-change="currentChange" :current-page.sync="page" :page-size="limit" :total="count"> </el-pagination> -->
                </div>
            </template>
            <div class="result-empty-box flexcenter shadow" v-else>
                <img class="result-empty-icon" src="@/assets/img/icon/empty.png" />
            </div>
        </section>
    </div>
</template>

<script>
import plateNavigation from "@/components/PlateNavigation.vue"
import indexList from "@/components/IndexList"
export default {
    name: "Recommend", //推荐阅读
    data() {
        return {
            hotList: [],
            list: [],
            count: 0, // 总数
            limit: 20, // 列表
            page: 1, // 页数
            fid: 0, // 板块id
            plate: {
                stairname: "", // 一级版块名称
                subsectionsname: "", // 子版块名称
                fid: 0, // 一级板块id
            },
            loading: null,
            allForumList: this.$store.state.allForumList || [],
        }
    },

    watch: {
        "$parent.recommend": {
            handler(newV, oldV) {
                this.hotList = newV
            },
            immediate: true,
        },

        "$store.state.allForumList": {
            handler(newV, oldV) {
                this.allForumList = newV
                this.handleForumFid()
            },
            immediate: true,
        },
    },
    mounted() {
        let query = {}
        let {page, fid} = this.$route.query
        if (page) {
            this.page = Number(page)
            query["page"] = Number(page)
        }
        if (fid) {
            this.fid = fid
            this.handleForumFid()
            query["fid"] = Number(fid)
        }

        this.$parent["query"] = query

        this.init()
    },

    methods: {
        init() {
            this.$startupUnderLoading(this)
            this.$http
                .get("/api/home/threadList", {
                    limit: this.limit,
                    type: "recommend",
                    page: this.page,
                    fid: this.fid,
                })
                .then(res => {
                    if (res.code != 200) return
                    let data = res.data
                    this.list = data.data
                    this.limit = data.limit
                    this.page = data.page
                    this.count = data.count
                })
                .finally(() => {
                    this.$closeUnderLoading(this)
                })
        },

        // 初始化板块的头部
        handleForumFid() {
            let allForumList = this.allForumList
            if (!Array.isArray(allForumList) || allForumList.length <= 1) return
            allForumList.forEach((el, index) => {
                if (!Array.isArray(el["data"])) return
                el.data.forEach(element => {
                    if (element["fid"] == this.fid) {
                        this.plate.subsectionsname = element.name
                        this.plate.stairname = el.name
                        this.plate.fid = el.fid
                    }
                })
            })
        },

        currentChange() {
            let query = {
                page: this.page,
            }
            if (this.fid) query["fid"] = this.fid

            this.$router.push({path: `/recommend`, query})
        },

        hotLabelClick(fid) {
            let query = {
                page: 1,
                fid,
            }
            this.$router.push({path: `/recommend`, query})
        },
    },
    components: {
        plateNavigation,
        indexList,
    },
}
</script>

<style lang="scss" scoped>
.path-box {
    // margin-bottom: 0.2rem;
}

.paging {
    margin-top: 0.48rem;
    padding-bottom: 1rem;
                // background: rgba(98, 177, 255, 1);
    ::v-deep {
        // .el-pagination.is-background .el-pager li:not(.disabled).active {
            .el-pagination.is-background .el-pager li.active {
				background: rgba(98, 177, 255, 1);
                border-radius: 50%;
            }

            .el-pagination .btn-next .el-icon,
            .el-pagination .btn-prev .el-icon {
                font-size: 0.4rem;
            }

            .is-background.el-pagination--small .el-pager li {
                border-radius: 50% !important;
            }

            .el-pagination.is-background.el-pagination--small .btn-next,
            .el-pagination.is-background.el-pagination--small .btn-prev,
            .el-pagination.is-background.el-pagination--small .el-pager li {
                border-radius: 50%;
            }
        }
    // }
}

section {
    // padding-top: 0;
    padding-top: 0.45rem;
    // height: 10.3333rem;
}
</style>
