<template>
    <div class="page">
        <div class="filter-bar flex-between">
            <p
                :class="{ active: apiParams.status == item.code }"
                v-for="(item, index) in EnumJobApplication"
                :key="index"
                @click="changeFilter(item.code)"
            >
                {{ item.text }}
            </p>
        </div>
        <scroll-view @scrolltolower="getApplicationList()" scroll-y>
            <div class="item" v-for="(item, index) in list" :key="index">
                <jobSeekersCard :data="item" />
            </div>
        </scroll-view>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { getEumData } from "@/utils/utils";
import jobSeekersCard from "@/components/jobSeekersCard/index.vue";

import { getApplicationListApi } from "@/api/postion";
/* 过滤条件 */
const EnumJobApplication = ref([]);
const getFilterData = async () => {
    EnumJobApplication.value = await getEumData("EnumJobApplication");
    EnumJobApplication.value.unshift({
        text: "总投递",
        code: ""
    });
};
getFilterData();
const changeFilter = code => {
    apiParams.pageNo = 1;
    apiParams.status = code;
    list.value = [];
    flag = true;
    getApplicationList();
};
/* 获取路由参数 */
let jobIds = 0;
onLoad(({ jobId, status }) => {
    jobIds = jobId;
    apiParams.status = status;
    apiParams.jobId = jobId;
    getApplicationList();
});
/* 获取列表 */
const apiParams = reactive({
    status: "",
    jobId: "",
    pageNo: 1,
    pageSize: 10
});
const list = ref([]);
let flag = true;
const getApplicationList = () => {
    if (!flag) return;
    getApplicationListApi(apiParams).then(res => {
        if (res.data?.length && flag) {
            list.value.push(...res.data);
            apiParams.pageNo++;
        } else {
            flag = false;
        }
    });
};
</script>

<style lang="scss" scoped>
.page {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.filter-bar {
    padding: 16rpx 40rpx;
    border-bottom: 16rpx solid #f3f4f8;
    p {
        font-size: 28rpx;
        line-height: 44rpx;
        color: #77818f;
        &.active {
            position: relative;
            font-size: 28rpx;
            color: #1f86ff;
            &::after {
                position: absolute;
                bottom: -16rpx;
                left: 50%;
                width: 80%;
                height: 4rpx;
                content: "";
                background: #1f86ff;
                border-radius: 4rpx;
                transform: translateX(-50%);
            }
        }
    }
}
scroll-view {
    flex-grow: 1;
    height: 200rpx;
    .item {
        padding: 16rpx 32rpx;
        border-bottom: 16rpx solid #f3f4f8;
    }
}
</style>
