<template>
    <AppLayout title="更多岗位" :use-scroll-view="true" :show-bg-image="false" @onScrollBottom="loadMore">
        <template #headerleft v-if="isMiniProgram">
            <view class="btnback">
                <image src="@/static/icon/back.png" @click="navBack"></image>
            </view>
        </template>
        <view class="collection-content">
            <renderJobs :list="list" :longitude="longitudeVal" :latitude="latitudeVal"></renderJobs>
            <loadmore ref="loadmoreRef"></loadmore>
        </view>
    </AppLayout>
</template>

<script setup>
import dictLabel from '@/components/dict-Label/dict-Label.vue';
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import useUserStore from '@/stores/useUserStore';
const { $api, navTo, navBack, vacanciesTo } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useLocationStore from '@/stores/useLocationStore';
import { usePagination } from '@/hook/usePagination';
import { jobMoreMap } from '@/utils/markdownParser';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const { isMiniProgram } = storeToRefs(useUserStore());
const loadmoreRef = ref(null);

// 响应式搜索条件（可以被修改）
const searchParams = ref({});
const pageSize = ref(10);
const { list, loading, refresh, loadMore } = usePagination(
    (params) => $api.createRequest('/app/job/list', params, 'GET', true),
    null, // 转换函数
    {
        pageSize: pageSize,
        search: searchParams,
        autoWatchSearch: true,
        onBeforeRequest: () => {
            loadmoreRef.value?.change('loading');
        },
        onAfterRequest: () => {
            loadmoreRef.value?.change('more');
        },
    }
);

onLoad((options) => {
    let params = jobMoreMap.get(options.jobId);
    if (params) {
        uni.setStorageSync('jobMoreMap', params);
    } else {
        params = uni.getStorageSync('jobMoreMap');
    }
    const objs = removeNullProperties(params);
    searchParams.value = objs;
    refresh();
});

function removeNullProperties(obj) {
    for (const key in obj) {
        if (obj.hasOwnProperty(key) && obj[key] === null) {
            delete obj[key]; // 删除值为 null 的属性
        }
    }
    return obj;
}
</script>

<style lang="stylus" scoped>
.btnback{
    width: 64rpx;
    height: 64rpx;
}
image {
    height: 100%;
    width: 100%;
}
.collection-content{
    padding: 1rpx 28rpx 20rpx 28rpx;
    background: #F4F4F4;
    height: 100%;
}
</style>
