feiniao-farm-h5/src/components/pageComponents/ArchivesFarmTimeLine.vue

<template>
    <div class="timeline-container" ref="timelineContainerRef">
        <div class="timeline-list" ref="timelineListRef">
            <div class="timeline-middle-line"></div>
            <div
                v-for="(t, tIdx) in solarTerms"
                :key="`term-${uniqueTimestamp}-${tIdx}`"
                class="timeline-term"
                :style="getTermStyle(t, tIdx)"
            >
                <span class="term-name">{{ t.displayName }}</span>
                <span class="term-date">01-05</span>
            </div>
            <div v-for="(p, idx) in phenologyList" :key="`phenology-${uniqueTimestamp}-${idx}`" class="phenology-bar">
                <div 
                    class="phenology-title" 
                    :class="{ 'phenology-red': !shouldShowBlue(p), 'phenology-blue': shouldShowBlue(p) }"
                    v-if="p.reproductiveList[0]?.phenologyName === getNextPhenologyName(idx, 0)"
                >
                    {{ p.reproductiveList[0]?.phenologyName }}
                </div>
                <div
                    v-for="(r, rIdx) in Array.isArray(p.reproductiveList) ? p.reproductiveList : []"
                    :key="`reproductive-${uniqueTimestamp}-${idx}-${rIdx}`"
                    class="reproductive-item"
                >
                    <div class="arranges">
                        <div
                            v-for="(fw, aIdx) in Array.isArray(r.farmWorkArrangeList) ? r.farmWorkArrangeList : []"
                            :key="`arrange-${uniqueTimestamp}-${idx}-${rIdx}-${aIdx}`"
                            class="arrange-card"
                            :class="[
                                getArrangeStatusClass(fw),
                                { 'first-card': aIdx === 0 && rIdx !== 0 },
                                { 'last-card': aIdx === r.farmWorkArrangeList.length - 1 && rIdx !== r.farmWorkArrangeList.length - 1 },
                                // 右侧农事卡片跟随物候期颜色：未来节气对应的农事卡片置灰
                                { 'future-card': !shouldShowBlue(p) }
                            ]"
                            @click="handleRowClick(fw)"
                        >
                            <div class="card-content">
                                <div class="card-left">
                                    <div class="left-date">{{ formatDate(fw.createTime) }}</div>
                                    <span>张扬 上传了作物照片</span>
                                </div>
                                <div class="card-right">
                                    <img src="@/assets/img/home/farm.png" alt="">
                                    <div class="num">2</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <template v-if="r.name === r.phenologyName">
                        <div 
                            class="phenology-name single" 
                            :class="{ 'phenology-red': !shouldShowBlue(p), 'phenology-blue': shouldShowBlue(p) }"
                            :style="r.phenologyName === getNextPhenologyName(idx, rIdx) ? 'padding: 6px 0;' : ''"
                        >
                            {{ r.name }}
                        </div>
                    </template>
                    <template v-else>
                        <template v-if="r.phenologyName === getNextPhenologyName(idx, rIdx)">
                            <div 
                                class="phenology-name" 
                                :class="{ 'text-red': !shouldShowBlue(p), 'text-blue': shouldShowBlue(p) }"
                            >
                                {{ r.name }}
                            </div>
                        </template>
                        <template v-else>
                            <div 
                                class="phenology-name" 
                                :class="{ 'text-red': !shouldShowBlue(p), 'text-blue': shouldShowBlue(p) }"
                            >
                                {{ r.name }}
                            </div>
                            <div 
                                class="phenology-name mr" 
                                :class="{ 'phenology-red': !shouldShowBlue(p), 'phenology-blue': shouldShowBlue(p) }"
                            >
                                {{ r.phenologyName }}
                            </div>
                        </template>
                    </template>
                </div>
            </div>
        </div>
    </div>
    <!-- 互动设置弹窗 -->
    <interact-popup ref="interactPopupRef" @handleSaveSuccess="updateFarmWorkPlan"></interact-popup>
</template>

<script setup>
import { ref, nextTick, watch, onMounted, onUnmounted } from "vue";
import interactPopup from "@/components/popup/interactPopup.vue";
import { ElMessage } from "element-plus";
import { WarningFilled } from "@element-plus/icons-vue";

const props = defineProps({
    // 农场 ID，用于请求农事规划数据
    farmId: {
        type: [String, Number],
        default: null,
    },
    // 页面类型：种植方案 / 农事规划，用来控制高度样式
    pageType: {
        type: String,
        default: "",
    },
    // 是否禁用所有点击事件（用于只读展示）
    disableClick: {
        type: Boolean,
        default: false,
    },
    containerId: {
        type: [Number, String],
        default: null,
    },
    // 是否是标准农事
    isStandard: {
        type: Boolean,
        default: false,
    },
    // 方案ID
    schemeId: {
        type: [Number, String],
        default: null,
    },
});

const farmWorkType = {
    0: "预警农事",
    1: "标准农事",
    2: "建议农事",
    3: "自建农事",
};

const emits = defineEmits(["row-click"]);

const solarTerms = ref([]);
const phenologyList = ref([]);
const timelineContainerRef = ref(null);
const timelineListRef = ref(null);
// 标记是否为首次加载
const isInitialLoad = ref(true);
// 存储timeline-list的实际渲染高度
const timelineListHeight = ref(0);
// 生成唯一的时间戳，用于确保key的唯一性
const uniqueTimestamp = ref(Date.now());
// ResizeObserver 实例，用于监听高度变化
let resizeObserver = null;

// 获取当前季节
const getCurrentSeason = () => {
    const month = new Date().getMonth() + 1; // 1-12
    if (month >= 3 && month <= 5) {
        return "spring"; // 春季：3-5月
    } else if (month >= 6 && month <= 8) {
        return "summer"; // 夏季：6-8月
    } else if (month >= 9 && month <= 10) {
        return "autumn"; // 秋季：9-10月
    } else {
        return "winter"; // 冬季：11-2月
    }
};

// 安全解析时间到时间戳（ms）
const safeParseDate = (val) => {
    if (!val) return NaN;
    if (val instanceof Date) return val.getTime();
    if (typeof val === "number") return val;
    if (typeof val === "string") {
        // 兼容 "YYYY-MM-DD HH:mm:ss" -> Safari
        const s = val.replace(/-/g, "/").replace("T", " ");
        const d = new Date(s);
        return isNaN(d.getTime()) ? NaN : d.getTime();
    }
    return NaN;
};

const batchValidateData = ref({});
const allTrue = ref(false);
const invalidIds = ref([]);
const invalidArr = ref([]);
// 验证农事卡片药肥报价信息是否完整
const batchValidatePesticideFertilizerQuotes = (ids, items) => {
    if (props.isStandard) {
        return;
    }
    VE_API.monitor
        .batchValidatePesticideFertilizerQuotes({ ids, schemeId: props.schemeId })
        .then(({ data, code }) => {
            if (code === 0) {
                batchValidateData.value = data || {};
                allTrue.value = Object.values(data).every((value) => value === true);
                invalidIds.value = Object.keys(data).filter((key) => data[key] !== true);

                // 清空之前的arrangeIds
                invalidArr.value = [];
                // 遍历items，判断farmWorkId是否在invalidIds中，如果对应上了就把item.id push进去
                items.forEach((item) => {
                    // 判断item.farmWorkId是否在invalidIds数组中（需要转换为字符串进行比较）
                    const farmWorkIdStr = String(item.farmWorkId);
                    if (invalidIds.value.includes(farmWorkIdStr)) {
                        invalidArr.value.push({
                            arrangeId: item.id,
                            farmWorkId: item.farmWorkId,
                        });
                    }
                });
            }
        })
        .catch(() => {});
};

// 获取下一个reproductive-item的phenologyName
const getNextPhenologyName = (currentPhenologyIdx, currentReproductiveIdx) => {
    const currentPhenology = phenologyList.value[currentPhenologyIdx];
    if (!currentPhenology || !Array.isArray(currentPhenology.reproductiveList)) {
        return null;
    }
    
    // 如果当前reproductive-item不是最后一个，获取同一个物候期的下一个
    if (currentReproductiveIdx < currentPhenology.reproductiveList.length - 1) {
        const nextReproductive = currentPhenology.reproductiveList[currentReproductiveIdx + 1];
        return nextReproductive?.phenologyName || null;
    }
    
    // 如果当前reproductive-item是最后一个，获取下一个物候期的第一个reproductive-item
    if (currentPhenologyIdx < phenologyList.value.length - 1) {
        const nextPhenology = phenologyList.value[currentPhenologyIdx + 1];
        if (nextPhenology && Array.isArray(nextPhenology.reproductiveList) && nextPhenology.reproductiveList.length > 0) {
            const firstReproductive = nextPhenology.reproductiveList[0];
            return firstReproductive?.phenologyName || null;
        }
    }
    
    return null;
};

// 计算物候期需要的实际高度（基于农事数量）
const getPhenologyRequiredHeight = (item) => {
    // 统计该物候期内的农事数量
    let farmWorkCount = 0;

    if (Array.isArray(item.reproductiveList)) {
        item.reproductiveList.forEach((reproductive) => {
            if (Array.isArray(reproductive.farmWorkArrangeList)) {
                farmWorkCount += reproductive.farmWorkArrangeList.length;
            }
        });
    }

    // 如果没有农事，给一个最小高度
    if (farmWorkCount === 0) {
        return 50; // 最小50px
    }

    // 每个农事卡片的高度（根据实际内容，卡片高度可能因内容而异）
    // 卡片包含：padding(8px*2) + header(约25px) + content margin(4px+2px) + content(约25-30px) = 约72-77px
    // 考虑到内容可能换行，实际高度可能更高，设置为120px更安全，避免卡片重叠
    const farmWorkCardHeight = 120; // 卡片高度估算，确保能容纳内容且不重叠
    // 卡片之间的间距（与CSS中的gap保持一致）
    const cardGap = 12;

    // 计算总高度：卡片数量 * 卡片高度 + (卡片数量 - 1) * 间距
    // 如果有多个卡片，需要加上它们之间的间距
    const totalHeight = farmWorkCount * farmWorkCardHeight + (farmWorkCount > 1 ? (farmWorkCount - 1) * cardGap : 0);

    // 返回精确的总高度，只保留最小高度限制，不添加额外余量
    return Math.max(totalHeight, 50); // 最小50px，精确匹配农事卡片高度
};

// 计算所有物候期的累积位置和总高度
const calculatePhenologyPositions = () => {
    let currentTop = 10; // 起始位置，留出顶部间距
    const positions = new Map();

    // 按progress排序物候期，确保按时间顺序排列
    const sortedPhenologyList = [...phenologyList.value].sort((a, b) => {
        const aProgress = Math.min(Number(a?.progress) || 0, Number(a?.progress2) || 0);
        const bProgress = Math.min(Number(b?.progress) || 0, Number(b?.progress2) || 0);
        return aProgress - bProgress;
    });

    sortedPhenologyList.forEach((phenology) => {
        const height = getPhenologyRequiredHeight(phenology);
        // 使用与数据生成时相同的ID生成逻辑
        const itemId =
            phenology.id ?? phenology.phenologyId ?? phenology.name ?? `${phenology.progress}-${phenology.progress2}`;
        positions.set(itemId, {
            top: currentTop,
            height: height,
        });
        currentTop += height; // 紧挨着下一个物候期，不留间距
    });

    return {
        positions,
        totalHeight: currentTop, // 总高度 = 最后一个物候期的底部位置，不添加额外间距
    };
};

// 计算所有农事的总高度（基于物候期紧挨排列）
const calculateTotalHeightByFarmWorks = () => {
    const { totalHeight } = calculatePhenologyPositions();

    // 如果有物候期数据，直接使用计算出的总高度
    // totalHeight 已经包含了从 10 开始的起始位置和所有物候期的高度
    if (totalHeight > 10) {
        // 确保总高度至少能容纳所有节气（每个节气至少50px）
        const baseHeight = (solarTerms.value?.length || 0) * 50;
        // 返回物候期总高度和基础高度的较大值，确保节气能正常显示
        return Math.max(totalHeight, baseHeight);
    }

    // 如果没有物候期数据，返回基础高度
    const baseHeight = (solarTerms.value?.length || 0) * 50;
    return baseHeight || 100; // 至少返回100px，避免为0
};

const getTermStyle = (t, index) => {
    // 优先使用实际测量的timeline-list高度，如果没有测量到则使用计算值作为后备
    const totalHeight = timelineListHeight.value > 0 ? timelineListHeight.value : calculateTotalHeightByFarmWorks();
    // 获取节气总数
    const termCount = solarTerms.value?.length || 1;

    // 等分高度：总高度 / 节气数量
    const termHeight = totalHeight / termCount;

    // 计算top位置：索引 * 每个节气的高度
    const top = index * termHeight;

    return {
        position: "absolute",
        top: `${top}px`,
        left: 0,
        width: "32px",
        height: `${termHeight}px`, // 高度等分，使用实际测量的高度
        display: "flex",
        alignItems: "center",
    };
};

// 点击季节 → 滚动到对应节气（立春/立夏/立秋/立冬）
const handleSeasonClick = (seasonValue) => {
    const mapping = {
        spring: "立春",
        summer: "立夏",
        autumn: "立秋",
        winter: "立冬",
    };
    const targetName = mapping[seasonValue];
    if (!targetName) return;

    // 查找对应的节气
    const targetIndex = solarTerms.value.findIndex((t) => (t?.displayName || "") === targetName);
    if (targetIndex === -1) return;

    // 计算目标节气的top位置
    const totalHeight = timelineListHeight.value > 0 ? timelineListHeight.value : calculateTotalHeightByFarmWorks();
    const termCount = solarTerms.value?.length || 1;
    const termHeight = totalHeight / termCount;
    const targetTop = targetIndex * termHeight;

    // 滚动到目标位置
    const wrap = timelineContainerRef.value;
    if (!wrap) return;
    const viewH = wrap.clientHeight || 0;
    const maxScroll = Math.max(0, wrap.scrollHeight - viewH);
    // 将目标位置稍微靠上（使用 0.1 视口高度做偏移）
    let scrollTop = Math.max(0, targetTop - viewH * 0.1);
    if (scrollTop > maxScroll) scrollTop = maxScroll;
    wrap.scrollTo({ top: scrollTop, behavior: "smooth" });
};

// 农事状态样式映射（0:取消关注，1:关注，2:托管农事，）
const getArrangeStatusClass = (fw) => {
    const t = fw?.isFollow;
    // const warningStatus = shouldShowIncompleteStatus(fw.farmWorkId);
    if (t == 0) return "normal-style";
    // if (warningStatus) return "status-warning";
    // if (t >= 0 && t <= 4) return "status-normal";
    // if (t === 5) return "status-complete";
    return "status-normal";
};

const handleRowClick = (item) => {
    // 记录当前页面滚动位置
    if (timelineContainerRef.value) {
        const scrollTop = timelineContainerRef.value.scrollTop || 0;
        sessionStorage.setItem('timelineScrollTop', scrollTop.toString());
    }
    
    // item.isEdit = shouldShowIncompleteStatus(item.farmWorkId);
    item.invalidIds = invalidIds.value;
    item.invalidArr = invalidArr.value;
    emits("row-click", item);
};

const interactPopupRef = ref(null);
const handleEdit = (item) => {
    if (props.disableClick) return;
    if (interactPopupRef.value) {
        interactPopupRef.value.showPopup(item);
    }
};

// 获取农事规划数据
const getFarmWorkPlan = () => {
    if (!props.farmId) return;
    // 更新时间戳，确保key变化，触发DOM重新渲染
    uniqueTimestamp.value = Date.now();
    // 重置测量高度，等待重新测量
    timelineListHeight.value = 0;
    let savedScrollTop = 0;
    if (!isInitialLoad.value && timelineContainerRef.value) {
        savedScrollTop = timelineContainerRef.value.scrollTop || 0;
    }

    VE_API.monitor
        .getArchivesList({ farmId: props.farmId })
        .then(({ data, code }) => {
            if (code === 0) {
                const list = Array.isArray(data?.solarTermsList) ? data.solarTermsList : [];
                const filtered = list
                    .filter((t) => t && t.type === 1)
                    .map((t) => ({
                        id:
                            t.id ??
                            t.solarTermsId ??
                            t.termId ??
                            `${t.name || t.solarTermsName || t.termName || "term"}-${t.createDate || ""}`,
                        displayName: t.name || t.solarTermsName || t.termName || "节气",
                        createDate: t.createDate || null,
                        progress: Number(t.progress) || 0,
                    }));
                solarTerms.value = filtered;
                // 物候期数据
                phenologyList.value = Array.isArray(data?.phenologyList)
                    ? data.phenologyList.map((it) => {
                          const reproductiveList = Array.isArray(it.reproductiveList)
                              ? it.reproductiveList.map((r) => {
                                    const farmWorkArrangeList = Array.isArray(r.broadcastList)
                                        ? r.broadcastList.map((fw) => ({
                                              ...fw,
                                              containerSpaceTimeId: it.containerSpaceTimeId,
                                          }))
                                        : [];
                                    return {
                                        ...r,
                                        farmWorkArrangeList,
                                    };
                                })
                              : [];
                          return {
                              id: it.id ?? it.phenologyId ?? it.name ?? `${it.progress}-${it.progress2}`,
                              progress: Number(it.progress) || 0, // 起点 %
                              progress2: Number(it.progress2) || 0, // 终点 %
                              startDate: it.startDate,
                              startTimeMs: safeParseDate(
                                  it.startDate || it.beginDate || it.startTime || it.start || it.start_at
                              ),
                              reproductiveList,
                          };
                      })
                    : [];
                // 使用多次 nextTick 和 requestAnimationFrame 确保DOM完全渲染
                nextTick(() => {
                    requestAnimationFrame(() => {
                        nextTick(() => {
                            requestAnimationFrame(() => {
                                // 测量timeline-list的实际渲染高度
                                if (timelineListRef.value) {
                                    const height =
                                        timelineListRef.value.offsetHeight || timelineListRef.value.clientHeight;
                                    if (height > 0) {
                                        timelineListHeight.value = height;

                                        // 如果是首次加载，滚动到当前季节对应的节气
                                        if (isInitialLoad.value) {
                                            const currentSeason = getCurrentSeason();
                                            handleSeasonClick(currentSeason);
                                            isInitialLoad.value = false;
                                        }
                                    }
                                }

                                if (isInitialLoad.value) {
                                    // 如果测量失败，延迟一下再尝试滚动
                                    setTimeout(() => {
                                        if (timelineListRef.value) {
                                            const height =
                                                timelineListRef.value.offsetHeight ||
                                                timelineListRef.value.clientHeight;
                                            if (height > 0) {
                                                timelineListHeight.value = height;
                                            }
                                        }
                                        const currentSeason = getCurrentSeason();
                                        handleSeasonClick(currentSeason);
                                        isInitialLoad.value = false;
                                    }, 200);
                                } else {
                                    // 尝试恢复之前保存的滚动位置
                                    const savedScrollTopFromStorage = sessionStorage.getItem('timelineScrollTop');
                                    if (savedScrollTopFromStorage) {
                                        // 等待 DOM 完全渲染后再恢复滚动位置
                                        nextTick(() => {
                                            requestAnimationFrame(() => {
                                                if (timelineContainerRef.value) {
                                                    const scrollTop = Number(savedScrollTopFromStorage);
                                                    timelineContainerRef.value.scrollTop = scrollTop;
                                                    // 恢复后清除保存的位置，避免下次误恢复
                                                    sessionStorage.removeItem('timelineScrollTop');
                                                }
                                            });
                                        });
                                    } else if (timelineContainerRef.value && savedScrollTop > 0) {
                                        timelineContainerRef.value.scrollTop = savedScrollTop;
                                    }
                                }
                            });
                        });
                    });
                });

                // 收集所有farmWorkId
                const farmWorkIds = [];
                const farmWorks = [];
                phenologyList.value.forEach((phenology) => {
                    if (Array.isArray(phenology.reproductiveList)) {
                        phenology.reproductiveList.forEach((reproductive) => {
                            if (Array.isArray(reproductive.farmWorkArrangeList)) {
                                reproductive.farmWorkArrangeList.forEach((farmWork) => {
                                    if (farmWork.farmWorkId && farmWork.isFollow !== 0) {
                                        farmWorkIds.push(farmWork.farmWorkId);
                                        farmWorks.push(farmWork);
                                    }
                                });
                            }
                        });
                    }
                });

                // 调用验证方法，传入所有ids
                if (farmWorkIds.length > 0) {
                    batchValidatePesticideFertilizerQuotes(farmWorkIds, farmWorks);
                }
            }
        })
        .catch((error) => {
            console.error("获取农事规划数据失败:", error);
            ElMessage.error("获取农事规划数据失败");
        });
};

const updateFarmWorkPlan = () => {
    solarTerms.value = [];
    phenologyList.value = [];
    getFarmWorkPlan();
};

watch(
    () => props.farmId || props.containerId,
    (val) => {
        if (val) {
            isInitialLoad.value = true;
            updateFarmWorkPlan();
        }
    },
    { immediate: true }
);
watch(
    () => props.schemeId,
    (val) => {
        // if (val) {
            updateFarmWorkPlan();
        // }
    }
);

// 格式化日期为 MM-DD 格式
const formatDate = (dateStr) => {
    if (!dateStr) return "--";
    const date = new Date(dateStr);
    if (Number.isNaN(date.getTime())) return dateStr;
    const m = `${date.getMonth() + 1}`.padStart(2, "0");
    const d = `${date.getDate()}`.padStart(2, "0");
    return `${m}-${d}`;
};

// 获取下一个即将到来的节气（当前节气）的 progress
const getNextTermProgress = () => {
    if (!solarTerms.value || solarTerms.value.length === 0) return Infinity;
    
    const now = new Date();
    now.setHours(0, 0, 0, 0);
    
    let nextTermProgress = Infinity;
    
    // 找到当前日期之后的下一个节气（当前节气）
    solarTerms.value.forEach((term) => {
        const termDate = safeParseDate(term.createDate);
        if (!isNaN(termDate)) {
            const termDateObj = new Date(termDate);
            termDateObj.setHours(0, 0, 0, 0);
            // 找到大于等于当前日期的第一个节气
            if (termDateObj >= now) {
                const termProgress = Number(term.progress) || 0;
                if (termProgress < nextTermProgress) {
                    nextTermProgress = termProgress;
                }
            }
        }
    });
    
    // 如果没有找到未来的节气，说明所有节气都已过，返回 Infinity（所有物候期都显示蓝色）
    return nextTermProgress === Infinity ? Infinity : nextTermProgress;
};

// 根据物候期的 progress 判断它所属节气的 progress
const getPhenologyTermProgress = (phenologyProgress) => {
    if (!solarTerms.value || solarTerms.value.length === 0) return -1;
    
    const progress = Number(phenologyProgress) || 0;
    
    // 找到物候期所属的节气（progress 最接近且小于等于的节气）
    let matchedTermProgress = -1;
    solarTerms.value.forEach((term) => {
        const termProgress = Number(term.progress) || 0;
        if (progress >= termProgress && termProgress > matchedTermProgress) {
            matchedTermProgress = termProgress;
        }
    });
    
    // 如果物候期的 progress 小于所有节气，返回第一个节气的 progress
    if (matchedTermProgress === -1 && solarTerms.value.length > 0) {
        const firstTermProgress = Number(solarTerms.value[0].progress) || 0;
        return firstTermProgress;
    }
    
    return matchedTermProgress;
};

// 判断物候期是否应该显示蓝色（已过或当前节气的物候期）
const shouldShowBlue = (phenology) => {
    // 获取下一个即将到来的节气（当前节气）的 progress
    const nextTermProgress = getNextTermProgress();
    
    // 如果所有节气都已过（nextTermProgress === Infinity），所有物候期都显示蓝色
    if (nextTermProgress === Infinity) {
        return true;
    }
    
    // 根据物候期的 progress 判断它属于哪个节气
    const phenologyProgress = Math.min(Number(phenology?.progress) || 0, Number(phenology?.progress2) || 0);
    const phenologyTermProgress = getPhenologyTermProgress(phenologyProgress);
    
    // 找到下一个节气的完整信息，用于判断物候期是否属于当前节气
    let nextTerm = null;
    solarTerms.value.forEach((term) => {
        const termProgress = Number(term.progress) || 0;
        if (termProgress === nextTermProgress) {
            nextTerm = term;
        }
    });
    
    // 如果物候期所属的节气的 progress < 下一个节气的 progress，显示蓝色
    // 如果物候期所属的节气的 progress === 下一个节气的 progress，也显示蓝色（当前节气）
    // 也就是说，只有属于当前节气或之前节气的物候期才显示蓝色
    if (phenologyTermProgress === -1) {
        return false;
    }
    
    // 如果物候期正好属于下一个节气，需要判断它的 progress 是否在下一个节气的范围内
    if (phenologyTermProgress === nextTermProgress && nextTerm) {
        // 如果物候期的 progress 小于等于下一个节气的 progress，说明它属于当前节气，显示蓝色
        return phenologyProgress <= nextTermProgress;
    }
    
    // 如果物候期所属的节气的 progress < 下一个节气的 progress，显示蓝色
    return phenologyTermProgress < nextTermProgress;
};

defineExpose({
    updateFarmWorkPlan,
});

// 使用 ResizeObserver 监听高度变化，确保在DOM完全渲染后获取准确高度
const setupResizeObserver = () => {
    if (!timelineListRef.value || typeof ResizeObserver === "undefined") {
        return;
    }

    // 如果已经存在观察者，先断开
    if (resizeObserver) {
        resizeObserver.disconnect();
    }

    // 创建新的观察者
    resizeObserver = new ResizeObserver((entries) => {
        for (const entry of entries) {
            const height = entry.contentRect.height;
            if (height > 0 && height !== timelineListHeight.value) {
                timelineListHeight.value = height;
            }
        }
    });

    // 开始观察
    resizeObserver.observe(timelineListRef.value);
};

// 组件挂载后设置 ResizeObserver
onMounted(() => {
    nextTick(() => {
        requestAnimationFrame(() => {
            setupResizeObserver();
        });
    });
});

// 组件卸载前清理 ResizeObserver
onUnmounted(() => {
    if (resizeObserver) {
        resizeObserver.disconnect();
        resizeObserver = null;
    }
});

// 在数据更新后重新设置 ResizeObserver
watch(
    () => phenologyList.value.length,
    () => {
        nextTick(() => {
            requestAnimationFrame(() => {
                setupResizeObserver();
            });
        });
    }
);
</script>

<style scoped lang="scss">
.timeline-container {
    height: 100%;
    overflow: auto;
    position: relative;
    box-sizing: border-box;
    .timeline-list {
        position: relative;
    }
    .timeline-middle-line {
        position: absolute;
        left: 15px; /* 位于节气文字列中间（列宽约30px） */
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e8e8e8;
        z-index: 1;
    }
    .phenology-bar {
        align-items: stretch;
        justify-content: center;
        box-sizing: border-box;
        position: relative;
        .phenology-title{
            width: 18px;
            height: 98.5%;
            color: #fff;
            font-size: 12px;
            position: absolute;
            left: 32px;
            z-index: 10;
            text-align: center;
            display: flex;
            align-items: center;
            &.phenology-blue {
                background: #2199f8;
            }
            &.phenology-red {
                background: #F1F1F1;
                color: #808080;
            }
        }
        .reproductive-item {
            font-size: 12px;
            text-align: center;
            word-break: break-all;
            writing-mode: vertical-rl;
            text-orientation: upright;
            letter-spacing: 3px;
            width: 100%;
            line-height: 23px;
            color: inherit;
            position: relative;
            .phenology-name {
                width: 18px;
                line-height: 16px;
                height: 100%;
                color: #fff;
                padding: 4px 0;
                font-size: 12px;
                box-sizing: border-box;
                &.mr{
                    margin-right: 3px;
                }
                &.single{
                    width: 39px;
                    line-height: 39px;
                }
                &.phenology-blue {
                    background: #2199f8;
                }
                &.phenology-red {
                    background: #F1F1F1;
                    color: #808080;
                }
                &.text-blue{
                    background: rgba(33, 153, 248, 0.15);
                    color: #2199f8;
                    border: 1px solid #2199f8;
                    line-height: 16px;
                    box-sizing: border-box;
                }
                &.text-red{
                    background:rgba(128, 128, 128,.15);
                    color: #808080;
                    border: 1px solid rgba(128, 128, 128,.35);
                    line-height: 16px;
                    box-sizing: border-box;
                }
            }
            .arranges {
                display: flex;
                max-width: calc(100vw - 111px);
                min-width: calc(100vw - 111px);
                gap: 5px;
                letter-spacing: 0px;
                .arrange-card {
                    width: 95%;
                    border: 0.5px solid #2199f8;
                    border-radius: 8px;
                    background: #fff;
                    box-sizing: border-box;
                    position: relative;
                    padding: 8px 15px 8px 10px;
                    writing-mode: horizontal-tb;
                    &.first-card{
                        margin-top: 10px;
                    }
                    &.last-card{
                        margin-bottom: 10px;
                    }
                    .card-content {
                        color: #242424;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-size: 14px;
                        .card-left {
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            .left-date{
                                color: #fff;
                                background: #2199f8;
                                padding: 1px 5px;
                                border-radius: 2px;
                                font-size: 12px;
                            }
                        }
                        .card-right {
                            display: flex;
                            align-items: center;
                            position: relative;
                            img {
                                width: 45px;
                                height: 45px;
                            }
                            .num {
                                position: absolute;
                                width: 18px;
                                height: 18px;
                                box-sizing: border-box;
                                top: -4px;
                                right: -6px;
                                background: #2199f8;
                                color: #fff;
                                font-size: 12px;
                                border-radius: 50%;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }
                        }
                    }
                    &::before {
                        content: "";
                        position: absolute;
                        left: -5px;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 0;
                        height: 0;
                        border-top: 5px solid transparent;
                        border-bottom: 5px solid transparent;
                        border-right: 5px solid #2199f8;
                    }
                }
                .arrange-card.normal-style {
                    opacity: 0.3;
                }
                .arrange-card.future-card .card-content {
                    color: #808080;
                }
                .arrange-card.status-warning {
                    border-color: #ff953d;
                    &::before {
                        border-right-color: #ff953d;
                    }
                }
                .arrange-card.status-complete {
                    border-color: #1ca900;
                    &::before {
                        border-right-color: #1ca900;
                    }
                }
                .arrange-card.status-normal {
                    border-color: #2199f8;
                    &::before {
                        border-right-color: #2199f8;
                    }
                }
                // 未来节气对应的农事卡片：跟随左侧物候期的“未开始”灰色样式
                .arrange-card.future-card {
                    border-color: #E4E4E4;
                    .card-left{
                        .left-date{
                            background: #E4E4E4;
                            color: #fff;
                        }
                    }
                    &::before {
                        border-right-color: #E4E4E4;
                    }
                }
            }
        }
    }
    .reproductive-item + .reproductive-item {
        padding-top: 3px;
    }
    .phenology-bar + .phenology-bar {
        padding-top: 3px;
    }
    .timeline-term {
        position: absolute;
        width: 32px;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        z-index: 2; /* 置于中线之上 */
        color: rgba(174, 174, 174, 0.6);
        .term-name {
            display: inline-block;
            width: 100%;
            min-height: 35px;
            line-height: 30px;
            background: #fff;
            font-size: 12px;
            word-break: break-all;
            writing-mode: vertical-rl;
            text-orientation: upright;
            text-align: center;
        }
        .term-date {
            // position: absolute;
            bottom: 0;
            left: 0;
            font-size: 12px;
            color: #242424;
        }
    }
}
</style>