feiniao-farm-h5/src/views/old_mini/growth_report/components/CropAlertPanel.vue

<template>
    <div class="crop-alert-floating-panel">
        <floating-panel
            class="floating-panel"
            :class="{ 'background-panel': isBackground }"
            :style="{ bottom: `${tabBarHeight}px` }"
            v-model:height="height"
            :anchors="anchors"
            :content-draggable="true"
            @height-change="handleHeightChange"
        >
            <div class="floating-panel-content">
                <div class="panel-shell" ref="panelShellRef">
                    <div class="crop-header">
                        <div class="crop-info">
                            <el-avatar class="crop-avatar" :size="24" :src="cropAvatar" />
                            <span class="crop-name">{{ currentCropName }}</span>
                            <span class="crop-badge">当前作物</span>
                        </div>
                        <div class="switch-wrap">
                            <el-tooltip
                                v-model:visible="cropMenuVisible"
                                placement="bottom"
                                trigger="click"
                                effect="light"
                                :show-arrow="true"
                                popper-class="crop-switch-tooltip"
                                :teleported="true"
                            >
                                <template #content>
                                    <div class="crop-option-list">
                                        <div
                                            v-for="item in cropOptions"
                                            :key="item"
                                            class="crop-option-item"
                                            :class="{ active: item === currentCropName }"
                                            @click="handleSelectCrop(item)"
                                        >
                                            {{ item }}
                                        </div>
                                    </div>
                                </template>
                                <div
                                    class="switch-btn"
                                    :class="{ 'is-open': cropMenuVisible }"
                                    @click="dismissGuide"
                                >
                                    <span>{{ t("growthReport.switchCategory") }}</span>
                                    <el-icon
                                        class="switch-btn__icon"
                                        :class="{ 'is-open-icon': cropMenuVisible }"
                                    >
                                        <CaretBottom />
                                    </el-icon>
                                </div>
                            </el-tooltip>
                            <div v-if="guideVisible" class="crop-guide-bubble">
                                <span class="crop-guide-bubble__arrow"></span>
                                <div class="crop-guide-bubble__content">
                                    当下作物为<span class="crop-guide-bubble__crop">{{ currentCropName }}</span>，请录入拟种植的作物，之后变为对应作物的气象预警
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="alert-list" v-show="!isBackground">
                        <div
                            v-for="(item, index) in alertCards"
                            :key="index"
                            class="alert-card"
                        >
                            <div class="alert-card__header">
                                <div class="alert-card__title-wrap">
                                    <img class="alert-card__icon" :src="item.icon" alt="" />
                                    <span class="alert-card__title">{{ item.title }}</span>
                                </div>
                                <span class="alert-card__link" @click="handleViewDetail(item)">
                                    查看详情
                                </span>
                            </div>
                            <div class="alert-card__content-wrap">
                                <span class="alert-card__content">{{ item.content }}</span>
                                <span
                                    v-if="item.patrolTip"
                                    class="alert-card__patrol"
                                    @click="handlePatrolTip(item)"
                                >
                                    <el-icon class="alert-card__patrol-icon"><Link /></el-icon>
                                    <span>{{ item.patrolTip }}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </floating-panel>
    </div>
</template>

<script setup>
import { FloatingPanel } from "vant";
import { CaretBottom, Link } from "@element-plus/icons-vue";
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
import { useStore } from "vuex";
import { useI18n } from "@/i18n";
import { useRouter } from "vue-router";

const router = useRouter();
const store = useStore();
const { t } = useI18n();

const GUIDE_STORAGE_KEY = "GROWTH_REPORT_CROP_SWITCH_GUIDE";
const QUERY_PARAMS = {
    farm_id: "321",
    zone_id: "46",
    date: "2026-08-11",
};
const CARD_ID = {
    WARNING: "warning",
    STRESS: 2,
};

const props = defineProps({
    cropName: {
        type: String,
        default: "水稻",
    },
    cropAvatar: {
        type: String,
        default: require("@/assets/img/home/banner.png"),
    },
    cropOptions: {
        type: Array,
        default: () => ["水稻", "荔枝", "香蕉"],
    },
});

const emit = defineEmits(["switchCategory", "viewDetail", "heightChange"]);

const weatherIcon = require("@/assets/img/report/weather.png");

/** 底部 tabBar 高度（含小程序安全区），优先读 DOM / store */
const resolveTabBarHeight = () => {
    const fromDom = document.querySelector(".van-tabbar")?.offsetHeight;
    const fromStore = Number(store.state.home.tabBarHeight) || 0;
    const fromStorage = Number(localStorage.getItem("tabBarHeight")) || 0;
    return fromDom || fromStore || fromStorage || 50;
};

const tabBarHeight = ref(resolveTabBarHeight());

const currentCropName = ref(props.cropName);
const cropMenuVisible = ref(false);
const guideVisible = ref(false);

watch(
    () => props.cropName,
    (name) => {
        if (name) currentCropName.value = name;
    }
);

const dismissGuide = () => {
    if (!guideVisible.value) return;
    guideVisible.value = false;
    localStorage.setItem(GUIDE_STORAGE_KEY, "1");
};

const tryShowGuide = () => {
    if (localStorage.getItem(GUIDE_STORAGE_KEY)) return;
    guideVisible.value = true;
};

const handleOutsideClick = (event) => {
    if (!guideVisible.value) return;
    const target = event.target;
    if (target?.closest?.(".crop-guide-bubble") || target?.closest?.(".switch-btn")) return;
    dismissGuide();
};

watch(cropMenuVisible, (visible) => {
    if (visible) dismissGuide();
});

const handleSelectCrop = (name) => {
    dismissGuide();
    if (!name || name === currentCropName.value) {
        cropMenuVisible.value = false;
        return;
    }
    currentCropName.value = name;
    cropMenuVisible.value = false;
    emit("switchCategory", name);
};

const PANEL_HEADER_BAR = 14; // van-floating-panel 原生 header 高度
const PANEL_BOTTOM_GAP = 12;
/** 收起态：仅作物头，高度不含 tabBar（tabBar 用 bottom 顶开） */
const COLLAPSED_CONTENT_HEIGHT = 72;

/** 锚点只算面板自身高度，底部用 style.bottom 避开 tabBar，避免高度+padding 重复抬高 */
const getCollapsedAnchor = () => COLLAPSED_CONTENT_HEIGHT;

const anchors = ref([getCollapsedAnchor(), 280]);
const height = ref(anchors.value[1]);
const isBackground = ref(false);
const panelShellRef = ref(null);
let resizeObserver = null;
let syncing = false;

const emitPanelHeight = (panelH = height.value) => {
    // 对外抛出「距视口底」的占用高度，方便邀请按钮等避让
    emit("heightChange", panelH + tabBarHeight.value);
};

const syncMidAnchor = () => {
    const shell = panelShellRef.value;
    if (!shell || syncing) return;

    tabBarHeight.value = resolveTabBarHeight();
    const collapsed = getCollapsedAnchor();

    // scrollHeight 才是内容真实高度；offsetHeight 在被裁切时会偏小
    const contentH = shell.scrollHeight;
    const idealMid = Math.round(contentH + PANEL_HEADER_BAR + PANEL_BOTTOM_GAP);
    // 留一点顶部空间，并扣掉底部 tabBar
    const maxMid = Math.round(window.innerHeight - tabBarHeight.value) - 48;
    const nextMid = Math.max(collapsed + 80, Math.min(idealMid, maxMid));

    if (
        Math.abs(nextMid - anchors.value[1]) < 2 &&
        Math.abs(collapsed - anchors.value[0]) < 2
    ) {
        return;
    }

    syncing = true;
    const wasAtMid = Math.abs(height.value - anchors.value[1]) < 2;
    const wasCollapsed = Math.abs(height.value - anchors.value[0]) < 2;
    anchors.value = [collapsed, nextMid];
    if (wasAtMid) {
        height.value = nextMid;
    } else if (wasCollapsed) {
        height.value = collapsed;
    }
    nextTick(() => {
        syncing = false;
        emitPanelHeight();
    });
};

watch(
    () => store.state.home.tabBarHeight,
    (val) => {
        if (!val) return;
        tabBarHeight.value = val;
        syncMidAnchor();
    }
);

const alertCards = ref([
    {
        id: CARD_ID.WARNING,
        source: "warning",
        title: "",
        icon: weatherIcon,
        content: "",
        patrolTip: "",
    },
    {
        id: CARD_ID.STRESS,
        source: "stress",
        type: "abnormal",
        title: "",
        icon: weatherIcon,
        content: "",
        patrolTip: "异常态势巡园要点",
    },
]);

/** 接口可能返回对象或数组，统一取第一条 */
const pickFirstRecord = (res) => {
    const data = res?.data ?? res;
    if (Array.isArray(data)) return data[0] || null;
    if (data && typeof data === "object") return data;
    return null;
};

const patchAlertCard = (cardId, patch) => {
    const card = alertCards.value.find((item) => item.id === cardId);
    if (!card) return;
    Object.assign(card, patch);
};

const applyWeatherRisk = (record) => {
    if (!record) return;
    patchAlertCard(CARD_ID.WARNING, {
        title: record.risk_name || "",
        content: record.explain_simple || "",
    });
};

const applyWeatherStress = (record) => {
    if (!record) return;
    if (record.crop_name) currentCropName.value = record.crop_name;
    patchAlertCard(CARD_ID.STRESS, {
        title: record.stress_name || "",
        content: record.explain_simple || "",
    });
};

const fetchAlertCards = async () => {
    const [riskRes, stressRes] = await Promise.allSettled([
        VE_API.questionnaire.getWeatherRisk(QUERY_PARAMS),
        VE_API.questionnaire.getWeatherStress(QUERY_PARAMS),
    ]);

    if (riskRes.status === "fulfilled") {
        applyWeatherRisk(pickFirstRecord(riskRes.value));
    }
    if (stressRes.status === "fulfilled") {
        applyWeatherStress(pickFirstRecord(stressRes.value));
    }

    nextTick(() => syncMidAnchor());
};

const handleViewDetail = (item) => {
    emit("viewDetail", item);
};

const handlePatrolTip = (item) => {
    router.push({
        path: "/growth_track",
        query: {
            id: item.id,
            type: item.type || "growth",
        },
    });
};

const handleHeightChange = ({ height: nextHeight }) => {
    isBackground.value = nextHeight < anchors.value[1];
    emitPanelHeight(nextHeight);
};

onMounted(() => {
    fetchAlertCards();
    nextTick(() => {
        tabBarHeight.value = resolveTabBarHeight();
        // 等布局完成后再量一次，避免首屏高度偏小；小程序里 tabBar 可能稍晚才量到
        requestAnimationFrame(() => {
            syncMidAnchor();
            setTimeout(() => {
                tabBarHeight.value = resolveTabBarHeight();
                syncMidAnchor();
                emitPanelHeight();
                tryShowGuide();
            }, 80);
            setTimeout(() => {
                tabBarHeight.value = resolveTabBarHeight();
                syncMidAnchor();
            }, 600);
        });
        if (!panelShellRef.value || typeof ResizeObserver === "undefined") return;
        resizeObserver = new ResizeObserver(() => {
            syncMidAnchor();
            emitPanelHeight();
        });
        resizeObserver.observe(panelShellRef.value);
    });
    document.addEventListener("click", handleOutsideClick, true);
});

onBeforeUnmount(() => {
    document.removeEventListener("click", handleOutsideClick, true);
    resizeObserver?.disconnect?.();
    resizeObserver = null;
});
</script>

<style lang="scss" scoped>
.van-floating-panel {
    border-radius: 0;
}

.floating-panel {
    background: transparent;

    ::v-deep {
        .van-floating-panel__header {
            background: transparent;
            height: 16px;
        }

        .van-floating-panel__header-bar {
            width: 36px;
            height: 4px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 4px;
        }

        .van-floating-panel__content {
            background: transparent;

            overflow-y: auto;
        }
    }

    .floating-panel-content {
        width: calc(100% - 20px);
        margin: 0 auto;
        // margin: 14px auto 0; // 补偿隐藏 header 的 10px，原本30px，整体下移
        box-sizing: border-box;
    }

    .panel-shell {
        padding: 12px;
        border-radius: 16px;
        background: linear-gradient(180deg, #b2dbfb 0%, #cbe8ff 100%);
        box-sizing: border-box;
    }

    .crop-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
    }

    .crop-info {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    .crop-avatar {
        flex-shrink: 0;
    }

    .crop-name {
        font-size: 18px;
        font-weight: 500;
        color: #000000;
        line-height: 26px;
    }

    .crop-badge {
        flex-shrink: 0;
        height: 20px;
        padding: 0 5px;
        border-radius: 2px;
        background: #2199f8;
        color: #fff;
        backdrop-filter: blur(4px);
        font-size: 12px;
        line-height: 20px;
    }

    .switch-wrap {
        position: relative;
        flex-shrink: 0;
        z-index: 5;
    }

    .crop-guide-bubble {
        position: absolute;
        top: calc(100% + 10px);
        right: 20px;
        width: 216px;
        padding: 6px 10px;
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.8);
        box-sizing: border-box;
        z-index: 20;
        pointer-events: auto;

        &__arrow {
            position: absolute;
            top: -5px;
            right: 12px;
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid rgba(0, 0, 0, 0.8);
        }

        &__content {
            font-size: 14px;
            line-height: 22px;
            color: #fff;
            word-break: break-all;
            text-align: justify;
        }

        &__crop {
            padding: 0 2px;
            color: #2199f8;
        }
    }

    .switch-btn {
        display: flex;
        align-items: center;
        gap: 2px;
        flex-shrink: 0;
        height: 28px;
        padding: 0 10px;
        border-radius: 14px;
        border: 1px solid #2199f8;
        background: #fff;
        color: #2199f8;
        font-size: 12px;

        &.is-open {
            border-color: #2199f8;
            box-shadow: 0 0 0 1px rgba(33, 153, 248, 0.15);
        }

        &__icon {
            font-size: 14px;
            color: #2199f8;
            transition: transform 0.3s ease;
        }
        .is-open-icon {
            transform: rotate(180deg);
        }
    }

    .alert-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .alert-card {
        padding: 12px;
        border-radius: 12px;
        background: #fff;
        box-sizing: border-box;

        &__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        &__title-wrap {
            display: flex;
            align-items: flex-end;
            gap: 6px;
            min-width: 0;
        }

        &__icon {
            width: 17px;
            height: 17px;
            flex-shrink: 0;
        }

        &__title {
            font-size: 14px;
            font-weight: 500;
            color: #000000;
        }

        &__link {
            flex-shrink: 0;
            font-size: 12px;
            color: #2199f8;
        }

        &__content-wrap {
            margin-top: 8px;
        }

        &__content {
            font-size: 14px;
            line-height: 21px;
            color: rgba(6, 6, 6, 0.5);
            word-break: break-all;
        }

        &__patrol {
            padding-left: 6px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 14px;
            color: #2199f8;
            text-decoration: underline;
            text-underline-offset: 4px;
        }

        &__patrol-icon {
            font-size: 16px;
        }
    }

    &.background-panel {

        .panel-shell {
            padding: 6px 10px 10px 10px;
            background: url("@/assets/img/report/type-bg.png");
            background-size: calc(100vw - 20px) 40px;
            background-repeat: no-repeat;
            background-position: center top;
            .crop-header {
                // padding-bottom: 60px;
            }
        }
    }
}
</style>

<style lang="scss">
.crop-switch-tooltip {
    z-index: 3000 !important;
    padding: 8px 0 !important;
    min-width: 120px;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    background: #fff !important;

    .el-popper__arrow::before {
        background: #fff !important;
        border: none !important;
    }

    .crop-option-list {
        display: flex;
        flex-direction: column;
    }

    .crop-option-item {
        padding: 10px 20px;
        font-size: 14px;
        line-height: 20px;
        color: #333;
        cursor: pointer;

        &:active,
        &.active {
            color: #2199f8;
            background: rgba(33, 153, 248, 0.06);
        }
    }
}
</style>