<template>
    <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="getData()">
            <article-list :list="list"></article-list>
        </scroll-view>
    </div>
</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: "", name: "全部" }]);
getArticleTypesApi(1).then(res => {
    typeList.value.push(...res.data);
});
const changeType = type => {
    active.value = type.id;
    pageNo = 1;
    list.splice(0, list.length);
    flag = false;
    getData();
};
/* 文章 */
// 判断是否还有数据
let pageNo = 1;
let flag = false;
const list = reactive([]);

const getData = () => {
    if (flag) {
        return;
    }
    getArticleListApi({
        type: 1,
        categoryId: active.value,
        pageNo: pageNo++,
        pageSize: 10
    }).then(res => {
        if (res.data.length < 10) {
            flag = true;
        }
        list.push(...res.data);
    });
};
changeType({ id: "" });
</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;
}
</style>
