<template>
    <view style="height: 100%; padding-bottom: 40px">
        <NavBar :showIcon="false" backgroundBox="#ffffff" :showTitle="true" title="动态"></NavBar>
        <div class="policy">
            <div class="tab-name" :enable-flex="true" :scroll-x="true">
                <view :class="{ item: 1, active: active == v.id }" v-for="v in typeList" :key="v.id" @click="changeType(v)">{{
                    v.name
                }}</view>
            </div>
            <scroll-view :scroll-y="true" class="content" @scrolltolower="onReachBottom">
                <article-list :list="list"></article-list>
            </scroll-view>
        </div>
    </view>
</template>

<script setup>
import articleList from "@/components/articleList/index.vue";
import { getArticleListApi, getArticleTypesApi } from "@/api/article.js";
import { reactive, ref } from "vue";
const active = ref("");
const typeList = ref([{ id: -1, name: "招聘会" }]);
getArticleTypesApi(2).then(res => {
    typeList.value.push(...res.data);
});
onShow(() => {
    changeType({ id: "" });
});

const changeType = type => {
    active.value = type.id;
    pageNo = 1;
    list.value = []
    getData();
};
/* 文章 */
// 判断是否还有数据
let pageNo = 1;
const list = ref([]);

const getData = () => {
    const params = {
        type: 2,
        categoryId: active.value,
        pageNo,
        pageSize: 10
    }
    if (active.value === -1) {
        params.type = 3
        delete params.categoryId
    }
    getArticleListApi(params).then(res => {
        list.value.push(...res.data);
    });
};

const onReachBottom = () => {
    pageNo++
    getData()
}
</script>

<style lang="scss" scoped>
.policy {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.tab-name {
    display: flex;
    width: 100%;
    height: 80rpx;
    overflow-x: auto;
    white-space: nowrap;
    .item {
        padding: 22rpx 24rpx;
        font-size: 28rpx;
        &.active {
            background-image: url("https://lygsh-image.wjzpgz.com/icon/arc.png");
            background-repeat: no-repeat;
            background-position: 50% 100%;
            background-size: 35.64rpx 11.24rpx;
        }
    }
}
.content {
    flex-grow: 1;
    height: 200rpx;
    padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}
</style>
