feiniao-farm-h5/src/views/old_mini/agri_record/index.vue

<template>
    <custom-header v-if="isHeaderShow" :name="t('agriRecord.farmDetail')"></custom-header>
    <div class="monitor-index" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
        <!-- 天气遮罩 -->
        <div class="weather-mask" v-show="isExpanded" @click="handleMaskClick"></div>
        <!-- 头部 -->
        <div v-show="activeGardenTab === 'current'" class="agri-record-header">
            <weather-info ref="weatherInfoRef" :hasWeather="false" from="agri_record" class="weather-info"
                @weatherExpanded="weatherExpanded" @changeGarden="changeGarden" @changeGardenTab="changeGardenTab"
                @reportTabClick="handleReportTabClick" @farmInfoMaintain="handleFarmInfoMaintain" :isGarden="true"
                :gardenId="defaultGardenId" />
        </div>
        <!-- 农场列表 -->
        <div v-show="activeGardenTab === 'list'">
            <garden-list ref="gardenListRef" :garden-id="selectedGardenId" @loaded="handleGardenLoaded"
                @selectGarden="handleGardenSelected" />
        </div>
        <!-- 作物档案：Tab 固定顶部，仅农事列表区域滚动 -->
        <div class="archives-time-line" v-show="activeGardenTab === 'current'">
            <div class="archives-time-line-fixed">
                <div class="farm-work-tabs">
                    <div
                        v-for="tab in farmWorkTabs"
                        :key="tab.key"
                        class="farm-work-tabs__item"
                        :class="{ 'farm-work-tabs__item--active': activeFarmWorkTab === tab.key }"
                        @click="handleFarmWorkTabClick(tab.key)"
                    >
                        {{ t(tab.labelKey) }}
                    </div>
                </div>
            </div>
            <div ref="archivesScrollAreaRef" class="archives-time-line-content">
                <archives-farm-time-line :farmId="gardenId" :activeFarmWorkTab="activeFarmWorkTab"></archives-farm-time-line>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useI18n } from "@/i18n";
const { t } = useI18n();

import customHeader from "@/components/customHeader.vue";
import { ref, computed, onActivated, onDeactivated, watch, nextTick } from "vue";
import { useStore } from "vuex";
import weatherInfo from "@/components/weatherInfo.vue";
import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router";
import ArchivesFarmTimeLine from "@/components/pageComponents/ArchivesFarmTimeLine.vue";
import gardenList from "@/components/gardenList.vue";

const route = useRoute();
const router = useRouter();

const archivesScrollAreaRef = ref(null);
const getArchivesOuterScrollKey = () =>
    `agriRecordArchivesOuterScroll:${gardenId?.value ?? "none"}:${route.path}`;

const saveArchivesOuterScrollTop = () => {
    if (!archivesScrollAreaRef.value || activeGardenTab.value !== "current") return;
    const scrollTop = archivesScrollAreaRef.value.scrollTop || 0;
    sessionStorage.setItem(getArchivesOuterScrollKey(), String(scrollTop));
};

const restoreArchivesOuterScrollTop = () => {
    if (!archivesScrollAreaRef.value || activeGardenTab.value !== "current") return false;
    const raw = sessionStorage.getItem(getArchivesOuterScrollKey());
    if (raw == null) return false;
    const scrollTop = Number(raw);
    if (Number.isNaN(scrollTop)) return false;
    const el = archivesScrollAreaRef.value;
    const maxScrollTop = Math.max(0, (el.scrollHeight || 0) - (el.clientHeight || 0));
    el.scrollTop = Math.min(scrollTop, maxScrollTop);
    return true;
};

const restoreArchivesOuterScrollTopWithRetry = (retryCount = 6) => {
    const ok = restoreArchivesOuterScrollTop();
    if (ok || retryCount <= 0) return;
    setTimeout(() => restoreArchivesOuterScrollTopWithRetry(retryCount - 1), 50);
};

const defaultGardenId = ref(null);
const selectedGardenId = ref(null);
const gardenListRef = ref(null);
const activeGardenTab = ref('current');
const activeFarmWorkTab = ref('0');
const farmWorkTabs = [
    { key: '0', labelKey: 'agriRecord.allFarmWork' },
    { key: '1', labelKey: 'agriRecord.traceFarmWork' },
];

const handleFarmWorkTabClick = (tab) => {
    activeFarmWorkTab.value = tab;
};

const changeGardenTab = (tab) => {
    activeGardenTab.value = tab;
};

const currentFarmName = ref("");
const currentFarmVariety = ref(null);

const handleReportTabClick = (item) => {
    if (item.key === "historyRisk") {
        router.push(
            `/history_risk_report?farmVariety=${currentFarmVariety.value ?? ""}&currentFarmName=${currentFarmName.value ?? ""}`
        );
    }
};

const handleFarmInfoMaintain = (farmId) => {
    router.push(`/create_farm?type=edit&farmId=${farmId}&from=agri_record`);
};

const handleGardenLoaded = ({ hasFarm }) => {
    weatherInfoRef.value?.setGardenLoaded?.(hasFarm);
};

const handleGardenSelected = (garden) => {
    selectedGardenId.value = garden?.id ?? null;
    weatherInfoRef.value?.setSelectedGarden?.(garden);
};

const isHeaderShow = ref(false);
const weatherInfoRef = ref(null);

onActivated(() => {
    // 用来接收我的农场跳转过来的农场详情逻辑
    if (route.query.isHeaderShow) {
        isHeaderShow.value = true;
        defaultGardenId.value = route.query.farmId;
    }
    const savedFarmId = localStorage.getItem("selectedFarmId");
    selectedGardenId.value = savedFarmId ? Number(savedFarmId) : null;
    gardenListRef.value?.refreshFarmList?.();
    nextTick(() => {
        requestAnimationFrame(() => {
            restoreArchivesOuterScrollTopWithRetry();
        });
    });
});

onDeactivated(() => {
    saveArchivesOuterScrollTop();
});

onBeforeRouteLeave(() => {
    saveArchivesOuterScrollTop();
});

watch(activeGardenTab, (val, oldVal) => {
    if (oldVal === "current" && val !== "current") {
        saveArchivesOuterScrollTop();
    }
    if (val === "current") {
        nextTick(() => {
            requestAnimationFrame(() => {
                restoreArchivesOuterScrollTopWithRetry();
            });
        });
    }
});

const store = useStore();
const tabBarHeight = computed(() => store.state.home.tabBarHeight);

const isExpanded = ref(false);
const weatherExpanded = (isExpandedValue) => {
    isExpanded.value = isExpandedValue;
};

// 点击遮罩时收起天气
const handleMaskClick = () => {
    if (weatherInfoRef.value && weatherInfoRef.value.toggleExpand) {
        weatherInfoRef.value.toggleExpand();
    }
};

const gardenId = ref(store.state.home.gardenId);

const changeGarden = (data) => {
    if (!data?.id) return;
    gardenId.value = data.id;
    selectedGardenId.value = data.id;
    currentFarmName.value = data.name ?? "";
    currentFarmVariety.value = data.farm_variety ?? null;
    store.commit("home/SET_GARDEN_ID", data.id);
};
</script>

<style scoped lang="scss">
.monitor-index {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: linear-gradient(180deg, #2199F8 8%, #F5F5F5 19%, #F5F5F5 73%, #F5F5F5 100%);

    .weather-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.52);
        z-index: 11;
    }

    .agri-record-header {
        position: absolute;
        z-index: 12;
        left: 10px;
        top: 12px;
        width: calc(100% - 20px);
        transform: translateZ(0);

        .weather-info {
            width: 100%;
            position: relative;
            left: auto;
            top: auto;

            :deep(.garden-tabs) {
                .garden-item.left-item.active .current-name {
                    color: #2199F8;
                    font-weight: 600;
                }
            }
        }
    }

    .archives-time-line {
        position: relative;
        height: 100%;
        padding: 12px;
        padding-top: 100px;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        box-sizing: border-box;

        .archives-time-line-fixed {
            flex-shrink: 0;
        }

        .farm-work-tabs {
            display: flex;
            gap: 8px;
            margin-top: 10px;

            &__item {
                flex: 1;
                padding: 5px 0;
                border-radius: 2px;
                text-align: center;
                background: #EFEFEF;
                color: #858585;

                &--active {
                    background: #2199f8;
                    color: #ffffff;
                }
            }
        }

        .archives-time-line-content {
            margin-top: 10px;
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            background: #fff;
            border-radius: 8px;
            padding: 10px;
            box-sizing: border-box;

            :deep(.timeline-container) {
                height: auto;
                overflow: visible;
            }
        }
    }
}
</style>