<template>
    <AppLayout title="新职位推荐" :use-scroll-view="false" :show-bg-image="false">
        <template #headerleft v-if="isMiniProgram">
            <view class="btnback">
                <image src="@/static/icon/back.png" @click="navBack"></image>
            </view>
        </template>
        <view class="reser-content">
            <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
                <view class="content-top">
                    <view
                        class="top-item button-click"
                        :class="{ active: state.tabIndex === 'all' }"
                        @click="changeOption('all')"
                    >
                        全部
                    </view>
                    <view
                        class="top-item button-click"
                        :class="{ active: state.tabIndex === index }"
                        v-for="(item, index) in userInfo.jobTitle"
                        :key="index"
                        @click="changeOption(index)"
                    >
                        {{ item }}
                    </view>
                </view>
            </scroll-view>
            <view class="main">
                <scroll-view class="scroll-view" scroll-y @scrolltolower="scrollBottom">
                    <view class="list">
                        <renderJobs
                            v-if="pageState.list.length"
                            :longitude="longitudeVal"
                            :latitude="latitudeVal"
                        ></renderJobs>
                        <empty v-else></empty>
                    </view>
                </scroll-view>
            </view>
        </view>
    </AppLayout>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted, onBeforeUnmount } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, navTo, debounce, customSystem, navBack } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useLocationStore from '@/stores/useLocationStore';
import useUserStore from '@/stores/useUserStore';
const { userInfo, isMiniProgram } = storeToRefs(useUserStore());
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());

const pageState = reactive({
    page: 0,
    list: [],
    total: 0,
    maxPage: 1,
    pageSize: 10,
    search: {},
    lastDate: '',
});
const state = reactive({
    tabIndex: 'all',
});

onLoad(() => {
    getList('refresh');
});

function scrollBottom() {
    getList();
}

function changeOption(index) {
    state.tabIndex = index;
    if (index === 'all') {
        pageState.search = {};
        getList('refresh');
    } else {
        pageState.search.jobTitle = userInfo.value.jobTitle[index];
        getList('refresh');
    }
}

function getList(type = 'add', loading = true) {
    if (type === 'refresh') {
        pageState.page = 1;
        pageState.maxPage = 1;
    }
    if (type === 'add' && pageState.page < pageState.maxPage) {
        pageState.page += 1;
    }
    let params = {
        current: pageState.page,
        pageSize: pageState.pageSize,
        ...pageState.search,
    };
    $api.createRequest('/app/notice/recommend', params).then((resData) => {
        const { rows, total } = resData;
        if (type === 'add') {
            const str = pageState.pageSize * (pageState.page - 1);
            const end = pageState.list.length;
            const reslist = rows;
            pageState.list.splice(str, end, ...reslist);
        } else {
            pageState.list = rows;
        }
        pageState.total = resData.total;
        pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
    });
}
</script>

<style lang="stylus" scoped>
.btnback{
    width: 64rpx;
    height: 64rpx;
}
image {
    height: 100%;
    width: 100%;
}
.reser-content{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .content-top{
        display: flex
        padding: 28rpx
        .top-item{
            font-weight: 400;
            font-size: 32rpx;
            margin-right: 48rpx
            color: #666D7F;
            white-space: nowrap
        }
        .top-item:last-child{
             padding-right: 38rpx
        }
        .active{
            font-weight: 500;
            font-size: 32rpx;
            color: #000000;
        }
    }
    .main{
        flex: 1
        overflow: hidden
        background: #F4F4F4
        .scroll-view{
            height: 100%
            .list{
                padding: 0 28rpx 28rpx 28rpx
                height: calc(100% - 28rpx)
            }
        }
    }
}
</style>
