<template>
    <AppLayout title="我的收藏" :show-bg-image="false" :use-scroll-view="false">
        <template #headerleft v-if="isMiniProgram">
            <view class="btn">
                <image src="@/static/icon/back.png" @click="navBack"></image>
            </view>
        </template>
        <view class="collection-content">
            <view class="header">
                <view class="button-click" :class="{ active: type === 0 }" @click="changeType(0)">工作职位</view>
                <view class="button-click" :class="{ active: type === 1 }" @click="changeType(1)">公司企业</view>
            </view>
            <view class="coll-main">
                <swiper class="swiper" :disable-touch="disableTouch" :current="type" @change="changeSwiperType">
                    <swiper-item
                        class="list"
                        @touchstart.passive="handleTouchStart"
                        @touchmove.passive="handleTouchMove"
                        @touchend="disableTouch = false"
                    >
                        <scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
                            <view class="mian">
                                <renderJobCollectionRecord
                                    v-if="pageState.list.length"
                                    :list="pageState.list"
                                    :longitude="longitudeVal"
                                    :latitude="latitudeVal"
                                ></renderJobCollectionRecord>
                                <empty v-else></empty>
                            </view>
                        </scroll-view>
                    </swiper-item>
                    <swiper-item
                        class="list"
                        @touchstart.passive="handleTouchStart"
                        @touchmove.passive="handleTouchMove"
                        @touchend="disableTouch = false"
                    >
                        <scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLowerCompany">
                            <view class="mian">
                                <renderCompanyCollectionRecord
                                    :list="pageCompanyState.list"
                                    v-if="pageCompanyState.list.length"
                                    :longitude="longitudeVal"
                                    :latitude="latitudeVal"
                                ></renderCompanyCollectionRecord>
                                <empty v-else></empty>
                            </view>
                        </scroll-view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
    </AppLayout>
</template>

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

const pageState = reactive({
    page: 0,
    list: [],
    total: 0,
    maxPage: 1,
    pageSize: 10,
});

const pageCompanyState = reactive({
    page: 0,
    list: [],
    total: 0,
    maxPage: 1,
    pageSize: 10,
});

const disableTouch = ref(false);
const startPointX = ref(0);
const totalPage = 2;
const THRESHOLD = 5;

onShow(() => {
    getJobList();
    getCompanyList();
});

function handleTouchStart(e) {
    // 确保有触摸点
    if (e.touches.length > 0) {
        startPointX.value = e.touches[0].clientX;
        disableTouch.value = false;
    }
}

function handleTouchMove(e) {
    if (e.touches.length === 0) return;

    const currentX = e.touches[0].clientX;
    const diffX = currentX - startPointX.value;

    if (type.value === 0) {
        if (diffX > THRESHOLD) {
            disableTouch.value = true;
        } else {
            disableTouch.value = false;
        }
        return;
    }

    if (type.value === totalPage - 1) {
        if (diffX < -THRESHOLD) {
            disableTouch.value = true;
        } else {
            disableTouch.value = false;
        }
        return;
    }
    disableTouch.value = false;
}

function changeSwiperType(e) {
    const newIndex = e.detail.current;
    const lastIndex = type.value;

    const isSwipingRight = newIndex < lastIndex;
    const isSwipingLeft = newIndex > lastIndex;

    if (lastIndex === 0 && isSwipingRight) {
        disableTouch.value = true;
        type.value = 0;
        setTimeout(() => {
            disableTouch.value = false;
        }, 50);
        return;
    }

    if (lastIndex === totalPage - 1 && isSwipingLeft) {
        disableTouch.value = true;
        type.value = lastIndex;

        setTimeout(() => {
            disableTouch.value = false;
        }, 50);
        return;
    }

    const current = e.detail.current;
    type.value = current;
    disableTouch.value = false;
}

function changeType(e) {
    type.value = e;
}

function handleScrollToLower() {
    getJobList();
}

function handleScrollToLowerCompany() {
    getCompanyList();
}

function getJobList(type = 'add') {
    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,
    };
    const LoadCache = (resData) => {
        console.log(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.list = resData.rows;
        pageState.total = resData.total;
        pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
    };
    $api.createRequestWithCache('/app/user/collection/job', params, 'GET', false, {}, LoadCache).then(LoadCache);
}

function getCompanyList(type = 'add') {
    if (type === 'refresh') {
        pageCompanyState.page = 1;
        pageCompanyState.maxPage = 1;
    }
    if (type === 'add' && pageCompanyState.page < pageCompanyState.maxPage) {
        pageCompanyState.page += 1;
    }
    let params = {
        current: pageCompanyState.page,
        pageSize: pageCompanyState.pageSize,
    };
    const LoadCache = (resData) => {
        const { rows, total } = resData;
        if (type === 'add') {
            const str = pageCompanyState.pageSize * (pageCompanyState.page - 1);
            const end = pageCompanyState.list.length;
            const reslist = rows;
            pageCompanyState.list.splice(str, end, ...reslist);
        } else {
            pageCompanyState.list = rows;
        }
        // pageCompanyState.list = resData.rows;
        pageCompanyState.total = resData.total;
        pageCompanyState.maxPage = Math.ceil(pageCompanyState.total / pageCompanyState.pageSize);
    };
    $api.createRequestWithCache('/app/user/collection/company', params, 'GET', false, {}, LoadCache).then(LoadCache);
}
</script>

<style lang="stylus" scoped>
.btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 60rpx;
    height: 60rpx;
    image {
        height: 100%;
        width: 100%;
    }
}
.collection-content{
   background: #F4F4F4;
   height: 100%
   display: flex
   flex-direction: column
   .header{
        background: #FFFFFF;
        display: flex
        justify-content: space-evenly;
        align-items: center
        padding: 28rpx 100rpx
        font-weight: 400;
        font-size: 32rpx;
        color: #666D7F;
        .active {
            font-weight: 500;
            font-size: 32rpx;
            color: #000000;
        }
    }
   .coll-main{
        flex: 1
        overflow: hidden
        .main-scroll,
        .swiper{
            height: 100%
            .mian{
                height: 100%
                padding: 0 28rpx 28rpx 28rpx
            }
        }
   }
}
</style>
