<template>
    <div id="my-guard-index" class="tab-page">
        <SlideHorizontal
            v-model:index="state.navIndex"
            class="guard-horizontal"
            name="guard-nav"
            :change-active-index-use-anim="false"
        >
            <SlideItem>
                <ImageFeed feed-id="guard-my" :farms="guardMyFarms" />
            </SlideItem>
            <SlideItem>
                <ImageFeed feed-id="guard-recommend" :farms="guardRecommendFarms" />
            </SlideItem>
        </SlideHorizontal>
        <div class="guard-indicator-wrap">
            <IndicatorHome
                v-model:index="state.navIndex"
                :loading="loading"
                hide-mask
                name="guard-nav"
                @show-slidebar="_no"
            />
        </div>
        <BaseFooter :init-tab="3" />

        <guardSucessPopup v-model:show="showGuardSucessPopup" :treeObj="treeObj" />
    </div>
</template>

<script setup lang="ts">
import { onActivated, onMounted, reactive, ref } from "vue";
import BaseFooter from "@/components/BaseFooter.vue";
import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
import SlideItem from "@/components/slide/SlideItem.vue";
import IndicatorHome from "@/views/home/components/IndicatorHome.vue";
import ImageFeed from "./components/ImageFeed.vue";
import { guardMyFarms, guardRecommendFarms } from "@/mock/homeData";
import { _no } from "@/utils";
import guardSucessPopup from "./components/guardSucessPopup.vue";
import { useRoute } from "vue-router";
const route = useRoute();
const loading = ref(false);
const showGuardSucessPopup = ref(false);
const state = reactive({
    navIndex: 0,
});

const treeObj = ref(null);
onMounted(() => {
  console.log(route.query.showGuardSucessPopup, 'route.query.showGuardSucessPopup');
    if (route.query.showGuardSucessPopup) {
        getTreeObj();
        showGuardSucessPopup.value = true;
    }
});

const getTreeObj = async () => {
    const res = await VE_API.lj_home.getBySampleId({ sampleId: 110884 });
    treeObj.value = res.data;
};
</script>

<style scoped lang="less">
.tab-page {
    width: 100%;
    height: 100%;
    min-height: calc(var(--vh, 1vh) * 100);
    background: #000;
    position: relative;
    overflow: hidden;
}

.guard-horizontal {
    width: 100%;
    height: 100% !important;
    overflow: hidden;
}

.guard-indicator-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    pointer-events: none;

    :deep(.toolbar) {
        pointer-events: auto;
    }

    :deep(.search) {
        pointer-events: auto;
    }
}
</style>
