<template>
    <div class="policy">
        <NavBar :showIcon="false" :showTitle="true" title="政策"></NavBar>
        <div class="tab-name" :style="{ position: sticky, top: contentHeight }" :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="feedbackListFn">
            <wd-status-tip v-if="list.length == 0" image="../.././static/image/enmpty-dt.png" tip="暂无更多" />
            <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 contentHeight = ref("100rpx");
const typeList = ref([{ id: "", name: "全部" }]);
getArticleTypesApi(1).then(res => {
    typeList.value.push(...res.data);
});
const changeType = type => {
    active.value = type.id;
    params.value.categoryId = type.id;
    list.value.splice(0, list.length);
    refresh().then(() => {
        feedbackListFn();
    });
};

const params = ref({
    pageNo: 1,
    pageSize: 10,
    isEnd: false,
    type: 1,
    categoryId: active.value
});
const list = ref([]);

const refresh = () => {
    return new Promise((resolve, reject) => {
        list.value = [];
        params.value.pageNo = 1;
        params.value.isEnd = false;
        resolve();
    });
};
const feedbackListFn = () => {
    if (params.value.isEnd === true)
        return new Promise(resolve => {
            resolve();
        });
    xma.showLoading({
        title: "加载中...",
        mask: true
    });
    return getArticleListApi(params.value).then(res => {
        if (res.data.length < params.value.pageSize) {
            params.value.isEnd = true;
        }
        params.value.pageNo += 1;
        list.value = list.value.concat(res.data);
        xma.hideLoading();
    });
};
onPullDownRefresh(() => {
    refresh().then(() => {
        feedbackListFn().then(() => {
            xma.stopPullDownRefresh();
        });
    });
});
onLoad(() => {
    xma.xh.getSystemInfo({
        success(res) {
            // console.log('设备信息', res); // 设备信息
        }
    });
    xma.xh.getMenuButtonBoundingClientRect({
        success(res) {
            contentHeight.value = (res.top + res.bottom) / 2 + 25 + "px";
        }
    });
});
// 触底加载
onReachBottom(() => {
    feedbackListFn();
});
changeType({ id: "" });
</script>

<style lang="scss" scoped>
.policy {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 100rpx;
}
.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>
