<template>
    <div class="page">
        <NavBar :showIcon="true" :showTitle="true" title="投递管理" backgroundBox="#FFFFFF"></NavBar>

        <div class="filter-bar flex-between" :style="{ position: 'sticky', top: contentHeight, background: '#fff', zIndex: 99 }">
            <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" :type="'recommend'" />
            </div>
            <wd-status-tip v-if="list.length == 0" image="../../../static/image/enmpty-dt.png" tip="暂无记录" />
        </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("EnumPositionApplication");
    EnumJobApplication.value.unshift({
        text: "总投递",
        code: ""
    });
};
getFilterData();
const contentHeight = ref("100rpx");
const changeFilter = code => {
    apiParams.pageNo = 1;
    apiParams.status = code;
    list.value = [];
    flag = true;
    getApplicationList();
};
/* 获取路由参数 */
let jobIds = 0;
onLoad(({ jobId, status }) => {
    jobIds = jobId;
    if (!status) {
        apiParams.status = "";
    } else {
        apiParams.status = status * 1;
    }
    apiParams.positionId = jobId;
    getApplicationList();
    xma.xh.getSystemInfo({
        success(res) {
            // console.log('设备信息', res); // 设备信息
        }
    });
    xma.xh.getMenuButtonBoundingClientRect({
        success(res) {
            contentHeight.value = (res.top + res.bottom) / 2 + 25 + "px";
        }
    });
});
/* 获取列表 */
const apiParams = reactive({
    status: "",
    positionId: "",
    pageNo: 1,
    pageSize: 10
});
const list = ref([]);
let flag = true;
const getApplicationList = () => {
    if (!flag) return;
    uni.showLoading({ title: "加载中...", mask: true });
    getApplicationListApi(apiParams).then(res => {
        if (res.data?.length && flag) {
            list.value.push(...res.data);
            apiParams.pageNo++;
        } else {
            flag = false;
        }
        uni.hideLoading();
    });
};
</script>

<style lang="scss" scoped>
.page {
    // display: flex;
    // flex-direction: column;
}
.filter-bar {
    padding: 16rpx 40rpx;
    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: 100%;
    .item {
        padding: 16rpx 32rpx;
        margin-top: 16rpx;
        background: #ffffff;
        border-bottom: 16rpx solid #f3f4f8;
    }
}
</style>
