<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="app-container">
            <view class="nearby-head">
                <view class="head-item" :class="{ actived: state.current === 0 }" @click="changeType(0)">附近工作</view>
                <view class="head-item" :class="{ actived: state.current === 1 }" @click="changeType(1)">区县工作</view>
                <view class="head-item" :class="{ actived: state.current === 2 }" @click="changeType(2)">地铁周边</view>
                <view class="head-item" :class="{ actived: state.current === 3 }" @click="changeType(3)">商圈附近</view>
            </view>
            <view class="nearby-content">
                <swiper
                    class="swiper"
                    :disable-touch="disableTouch"
                    :current="state.current"
                    @change="changeSwiperType"
                >
                    <swiper-item
                        @touchstart.passive="handleTouchStart"
                        @touchmove.passive="handleTouchMove"
                        @touchend="disableTouch = false"
                        class="swiper-item"
                        v-for="(_, index) in 4"
                        :key="index"
                    >
                        <!-- #ifndef MP-WEIXIN -->
                        <component :is="components[index]" :ref="(el) => handelComponentsRef(el, index)" />
                        <!-- #endif -->
                        <!-- #ifdef MP-WEIXIN -->
                        <oneComponent v-show="currentIndex === 0" :ref="(el) => handelComponentsRef(el, index)" />
                        <twoComponent v-show="currentIndex === 1" :ref="(el) => handelComponentsRef(el, index)" />
                        <threeComponent v-show="currentIndex === 2" :ref="(el) => handelComponentsRef(el, index)" />
                        <fourComponent v-show="currentIndex === 3" :ref="(el) => handelComponentsRef(el, index)" />
                        <!-- #endif -->
                    </swiper-item>
                </swiper>
            </view>
        </view>
    </AppLayout>
</template>

<script setup>
import oneComponent from './components/one.vue';
import twoComponent from './components/two.vue';
import threeComponent from './components/three.vue';
import fourComponent from './components/four.vue';
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
const { isMiniProgram } = storeToRefs(useUserStore());
const { $api, debounce, throttle, navBack } = inject('globalFunction');
const loadedMap = reactive([false, false, false, false]);
const swiperRefs = [ref(null), ref(null), ref(null), ref(null)];
const components = [oneComponent, twoComponent, threeComponent, fourComponent];

const filterId = ref(0);
const showFilter = ref(false);
const showFilter1 = ref(false);
const showFilter2 = ref(false);
const showFilter3 = ref(false);

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

const state = reactive({
    current: 0,
    all: [{}],
});

onMounted(() => {
    handleTabChange(state.current);
});

const handelComponentsRef = (el, index) => {
    if (el) {
        swiperRefs[index].value = el;
    }
};

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 (state.current === 0) {
        if (diffX > THRESHOLD) {
            disableTouch.value = true;
        } else {
            disableTouch.value = false;
        }
        return;
    }

    if (state.current === 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 = state.current;

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

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

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

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

    const index = e.detail.current;
    state.current = index;
    handleTabChange(index);
    disableTouch.value = false;
}
function changeType(index) {
    state.current = index;
    handleTabChange(index);
}

function handleTabChange(index) {
    if (!loadedMap[index]) {
        swiperRefs[index].value?.loadData();
        loadedMap[index] = true;
    }
}
</script>

<style lang="stylus" scoped>
.btnback{
    width: 64rpx;
    height: 64rpx;
}
.btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 52rpx;
    height: 52rpx;
}
image {
    height: 100%;
    width: 100%;
}
.app-container
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .nearby-head
        height: 63rpx;
        line-height: 63rpx;
        text-align: center;
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 32rpx;
        color: #666D7F;
        .head-item
            width: calc(100%  / 4);
            z-index: 9
        .actived
            // width: 169rpx;
            // height: 63rpx;
            // background: #13C57C;
            // box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
            // border-radius: 0rpx 0rpx 0rpx 0rpx;
            font-weight: 500;
            font-size: 32rpx;
            color: #000000;
    .nearby-content
        flex: 1;
        overflow: hidden;
        .swiper
            height: 100%;
            .swiper-item
                display: flex;
                flex-direction: column;
</style>
