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

<template>
    <div class="growth-report-page" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
        <div class="report-content">
            <div class="map-container" ref="mapContainer"></div>
        </div>

        <!-- 浮窗：长势互动 -->
        <div v-if="showInteractCard" class="interact-float">
            <div class="interact-card">
                <div class="interact-card__head">
                    <div class="interact-card__tab">
                        <img class="interact-card__star" src="@/assets/img/agricultural/start.png" alt="" />
                        <span>异常互动</span>
                    </div>
                    <el-icon class="interact-card__close" @click="showInteractCard = false"><Close /></el-icon>
                </div>
                <div class="interact-card__qa">
                    <div class="interact-card__question">{{ interactQuestionText }}</div>
                    <div @click="handleGoPatrol" class="interact-card__btn">去巡园</div>
                </div>
            </div>
        </div>

        <!-- 左上角：位置切换 -->
        <!-- <div v-if="!showInteractCard" class="location-bar">
            <el-icon class="location-bar__icon"><LocationFilled /></el-icon>
            <span class="location-bar__name van-ellipsis">{{ locationName }}</span>
            <span class="location-bar__action" @click="handleSwitchLocation">切换位置</span>
        </div> -->

        <!-- <div class="map-legend" :style="{ bottom: `${inviteBottom}px` }">
            <div
                v-for="item in mapLegendItems"
                :key="item.key"
                class="map-legend__item"
            >
                <span class="map-legend__pill" :class="item.pillClass"></span>
                <span class="map-legend__text">{{ item.label }}</span>
            </div>
        </div> -->

        <crop-alert-panel
            :crop-name="currentCropName"
            :weather-risk="weatherRisk"
            :weather-stress="weatherStress"
            :weather-risk-explain="weatherRiskExplain"
            :weather-stress-explain="weatherStressExplain"
            @switch-category="handleSwitchCategory"
            @view-detail="handleViewDetail"
            @patrol-tip="handlePatrolTip"
            @height-change="handlePanelHeightChange"
        />
    </div>

    
    <!-- 诊断报告弹窗 -->
    <diagnosis-report-popup ref="diagnosisReportPopupRef" />

    <!-- 恢复种植弹窗：确认已到达后触发诊断报告弹窗检查 -->
    <restore-planting-popup @phenology-reached="onPhenologyReached" />

    <!-- 录入信息邀请弹窗：分享链接带 showInviteEntry 时展示 -->
    <invite-entry-popup ref="invitePopupRef" />
</template>

<script setup>
import { computed, nextTick, onActivated, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Close, LocationFilled } from "@element-plus/icons-vue";
import { convertPointToArray } from "@/utils/index";
import GrowthReportMap from "./growthReportMap.js";
import RestorePlantingPopup from "@/components/popup/restorePlantingPopup.vue";
import CropAlertPanel from "./components/CropAlertPanel.vue";
import inviteEntryPopup from "@/views/old_mini/entry_information/components/inviteEntryPopup.vue";
import DiagnosisReportPopup from "@/components/popup/diagnosisReportPopup.vue";
import wx from "weixin-js-sdk";
import { useI18n } from "@/i18n";

const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const diagnosisReportPopupRef = ref(null);

/** 恢复种植确认「已到达」后，再检查是否弹出诊断报告 */
const onPhenologyReached = () => {
    diagnosisReportPopupRef.value?.checkShouldShow?.();
};

const DEFAULT_MAP_POINT = "POINT(113.6142086995688 23.585836479509055)";
const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";
const LOCATION_SESSION_KEY = "GROWTH_REPORT_LOCATION";
const MAP_POINT_STORAGE_KEY = "GROWTH_REPORT_MAP_POINT";
const ENTRY_FARM_DATA_KEY = "ENTRY_FARM_DATA";

function readEntryFarmData() {
    try {
        return JSON.parse(localStorage.getItem(ENTRY_FARM_DATA_KEY) || "null");
    } catch {
        return null;
    }
}

const entryFarmData = readEntryFarmData();

const menuIcon = require("@/assets/img/common/farm-active.png");

const mapLegendItems = computed(() => [
    { key: "zone", label: "胁迫", pillClass: "map-legend__pill--zone" },
    { key: "growth", label: "长势", pillClass: "map-legend__pill--growth" },
    { key: "pest", label: "病虫害", pillClass: "map-legend__pill--pest" },
]);

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

const mapContainer = ref(null);
const growthReportMap = new GrowthReportMap();
const locationName = ref("");
const currentMapPoint = ref(
    entryFarmData?.point ||
        localStorage.getItem(MAP_POINT_STORAGE_KEY) ||
        localStorage.getItem("selectedFarmPoint") ||
        store.state.home.miniUserLocationPoint ||
        DEFAULT_MAP_POINT
);
const currentCropName = ref(entryFarmData?.crop || "水稻");
const weatherRisk = ref(entryFarmData?.weatherRisk || "具体预警");
const weatherStress = ref(entryFarmData?.weatherStress || "某某胁迫");
/** 未来预警正文：risk_report.explain_simple */
const weatherRiskExplain = ref("");
/** 当下胁迫正文：stress_report.explain_simple */
const weatherStressExplain = ref("");
const activeMenuKey = ref("hot-drought-2");
const panelHeight = ref(280);
const inviteBottom = computed(() => panelHeight.value);
const invitePopupRef = ref(null);

const showInteractCard = ref(false);
const interactQuestionText = ref("");

function resolveUserTel() {
    const entry = readEntryFarmData();
    if (entry?.phone) return String(entry.phone).trim();
    try {
        const userInfo = JSON.parse(localStorage.getItem("localUserInfo") || "{}");
        return String(userInfo.tel || userInfo.phone || userInfo.mobile || "").trim();
    } catch {
        return "";
    }
}

/** 未来预警卡片：risk_report → explain_simple */
async function fetchRiskReport() {
    // TODO: 接口有正式数据后改回 resolveUserTel()
    const tel = resolveUserTel();
    if (!tel) {
        weatherRiskExplain.value = "";
        return;
    }
    try {
        const raw = await VE_API.questionnaire.riskReport({ tel });
        const res = Array.isArray(raw) ? raw[0] : raw;
        if (Number(res?.code) !== 200 || !res.data) {
            weatherRiskExplain.value = "";
            return;
        }
        const data = res.data;
        const item = Array.isArray(data) ? data[0] : data;
        weatherRiskExplain.value =
            item?.explain_simple || item?.interact_explain || "";
    } catch {
        weatherRiskExplain.value = "";
    }
}

/** 当下胁迫卡片：stress_report → explain_simple */
async function fetchStressReport() {
    // TODO: 接口有正式数据后改回 resolveUserTel()
    const tel = resolveUserTel();
    if (!tel) {
        weatherStressExplain.value = "";
        return;
    }
    try {
        const raw = await VE_API.questionnaire.stressReport({ tel });
        const res = Array.isArray(raw) ? raw[0] : raw;
        if (Number(res?.code) !== 200 || !res.data) {
            weatherStressExplain.value = "";
            return;
        }
        const data = res.data;
        const item = Array.isArray(data) ? data[0] : data;
        weatherStressExplain.value =
            item?.explain_simple || item?.interact_explain || "";
    } catch {
        weatherStressExplain.value = "";
    }
}

/** 异常互动：parse_anormal */
async function fetchAbnormalContent() {
    const entry = readEntryFarmData();
    const cropCategoryName = entry?.crop;
    const phenophaseCode = entry?.cropCode;
    const riskName = entry?.weatherStress;
    if (!cropCategoryName || !phenophaseCode || !riskName) {
        showInteractCard.value = false;
        return;
    }

    try {
        const res = await VE_API.questionnaire.abnormalContent({
            crop_category_name: cropCategoryName,
            phenophase_code: String(phenophaseCode),
            risk_name: riskName,
        });
        if (res?.code !== 200 || !res.data) {
            showInteractCard.value = false;
            return;
        }
        const title = res.data.interaction_title || "";
        const theme = res.data.interaction_theme || "";
        interactQuestionText.value = [title, theme].filter(Boolean).join("：");
        showInteractCard.value = !!interactQuestionText.value;
    } catch {
        showInteractCard.value = false;
    }
}

function handleGoPatrol() {
    router.push({
        path: "/growth_track",
        query: {
            type: "abnormal",
            pageName: t("agriFile.patrolAbnormalTitle"),
        },
    });
}

function getLocationName(point = currentMapPoint.value) {
    const locationPoint = point || localStorage.getItem("selectedFarmPoint") || store.state.home.miniUserLocationPoint;
    if (!locationPoint) return;
    const farmLocation = convertPointToArray(locationPoint);
    if (!farmLocation?.length) return;
    const params = {
        key: MAP_KEY,
        location: `${farmLocation[1]},${farmLocation[0]}`,
    };
    VE_API.old_mini_map.location(params).then(({ result }) => {
        locationName.value = result?.address_component
            ? result.address_component.city + result.address_component.district
            : result?.address + "";
    });
}

function saveCurrentMapPoint(point) {
    if (!point) return;
    currentMapPoint.value = point;
    localStorage.setItem(MAP_POINT_STORAGE_KEY, point);
}

function syncEntryFarmData() {
    const data = readEntryFarmData();
    if (!data) return;
    if (data.crop) currentCropName.value = data.crop;
    if (data.weatherRisk) weatherRisk.value = data.weatherRisk;
    if (data.weatherStress) weatherStress.value = data.weatherStress;
    if (data.point) saveCurrentMapPoint(data.point);
}

const initMap = async () => {
    await nextTick();
    if (!mapContainer.value) return;
    if (growthReportMap.kmap) {
        growthReportMap.kmap.map?.updateSize?.();
        const coordinate = convertPointToArray(currentMapPoint.value)?.map(Number);
        if (coordinate?.length === 2) {
            growthReportMap.setMapPosition(coordinate);
        }
        return;
    }
    const location = currentMapPoint.value || store.state.home.miniUserLocationPoint || DEFAULT_MAP_POINT;
    currentMapPoint.value = location;
    growthReportMap.initMap(location, mapContainer.value);
};

function applySelectedLocation() {
    const raw = sessionStorage.getItem(LOCATION_SESSION_KEY);
    if (!raw) return false;
    sessionStorage.removeItem(LOCATION_SESSION_KEY);
    let saved = null;
    try {
        saved = JSON.parse(raw);
    } catch {
        return false;
    }
    if (!saved?.point && !saved?.coordinate) return false;

    const point = saved.point || `POINT(${saved.coordinate[0]} ${saved.coordinate[1]})`;
    const coordinate = (saved.coordinate || convertPointToArray(point)).map(Number);
    saveCurrentMapPoint(point);

    if (growthReportMap.kmap && coordinate?.length === 2) {
        growthReportMap.setMapPosition(coordinate);
    }
    getLocationName(point);
    return true;
}

const handleSwitchLocation = () => {
    // 以已确认的 currentMapPoint 为准，避免地图临时中心覆盖已选位置
    const mapCenter =
        currentMapPoint.value ||
        store.state.home.miniUserLocationPoint ||
        DEFAULT_MAP_POINT;
    router.push({
        path: "/entry_select_location",
        query: {
            mapCenter,
            iconType: "current",
            from: "growth_report",
        },
    });
};

const handleSelectMenu = (key) => {
    if (!key) return;
    activeMenuKey.value = key;
};

const handleInvite = (type) => {
    const isService = type === "service";
    let inviteName = "好友";
    try {
        const userInfo = JSON.parse(localStorage.getItem("localUserInfo") || "{}");
        inviteName = userInfo.nickName || userInfo.userName || userInfo.name || inviteName;
    } catch {
        // ignore
    }
    const inviteType = isService ? "service" : "farmer";
    const query = {
        askInfo: { title: "邀请完善信息", content: "是否分享该邀请给好友" },
        shareText: isService ? "邀请您完善农服信息" : "邀请您完善地块种植信息",
        targetUrl: `growth_report`,
        paramsPage: JSON.stringify({ inviteName, showInviteEntry: 1, inviteType }),
        imageUrl: 'https://birdseye-img.sysuimars.com/temp/field.png',
    };
    wx.miniProgram.navigateTo({
        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
    });
}

function isTruthyFlag(value) {
    return value === 1 || value === "1" || value === true || value === "true";
}

function parseMaybeJson(value) {
    if (!value) return null;
    if (typeof value === "object") return value;
    try {
        return JSON.parse(value);
    } catch {
        return null;
    }
}

function getInviteTypeFromRoute() {
    const candidates = [
        route.query.inviteType,
        parseMaybeJson(route.query.paramsPage)?.inviteType,
        parseMaybeJson(route.query.miniJson)?.inviteType,
        parseMaybeJson(parseMaybeJson(route.query.miniJson)?.paramsPage)?.inviteType,
    ];
    return candidates.find((item) => item === "service" || item === "farmer") || "farmer";
}

function shouldShowInviteEntryPopup() {
    if (isTruthyFlag(route.query.showInviteEntry)) return true;

    const miniJson = parseMaybeJson(route.query.miniJson);
    if (miniJson) {
        if (isTruthyFlag(miniJson.showInviteEntry)) return true;
        const nested = parseMaybeJson(miniJson.paramsPage);
        if (isTruthyFlag(nested?.showInviteEntry)) return true;
    }

    const paramsPage = parseMaybeJson(route.query.paramsPage);
    if (isTruthyFlag(paramsPage?.showInviteEntry)) return true;

    return false;
}

function clearInviteEntryQuery() {
    if (!shouldShowInviteEntryPopup()) return;
    const newQuery = { ...(route.query || {}) };
    delete newQuery.showInviteEntry;
    if (newQuery.paramsPage) {
        const paramsPage = parseMaybeJson(newQuery.paramsPage);
        if (paramsPage && typeof paramsPage === "object") {
            delete paramsPage.showInviteEntry;
            newQuery.paramsPage = JSON.stringify(paramsPage);
        }
    }
    if (newQuery.miniJson) {
        const miniJson = parseMaybeJson(newQuery.miniJson);
        if (miniJson && typeof miniJson === "object") {
            delete miniJson.showInviteEntry;
            if (miniJson.paramsPage) {
                const nested = parseMaybeJson(miniJson.paramsPage);
                if (nested && typeof nested === "object") {
                    delete nested.showInviteEntry;
                    miniJson.paramsPage = JSON.stringify(nested);
                }
            }
            newQuery.miniJson = JSON.stringify(miniJson);
        }
    }
    router.replace({ path: route.path, query: newQuery });
}

function tryOpenInviteEntryPopup() {
    if (!shouldShowInviteEntryPopup()) return;
    const inviteType = getInviteTypeFromRoute();
    nextTick(() => {
        invitePopupRef.value?.open(inviteType);
        clearInviteEntryQuery();
    });
}

const handleSwitchCategory = (cropName) => {
    if (!cropName) return;
    currentCropName.value = cropName;
};

const handleViewDetail = (item) => {
    router.push({
        path: "/alert_detail",
        query: {
            title: item?.title || "具体预警",
            detailType: item?.detailType || ''
        },
    });
};

const handlePatrolTip = () => {
};

const handlePanelHeightChange = (height) => {
    panelHeight.value = Number(height) || 0;
};

onMounted(() => {
    syncEntryFarmData();
    getLocationName();
    initMap();
    tryOpenInviteEntryPopup();
    fetchAbnormalContent();
    fetchRiskReport();
    fetchStressReport();
});
onActivated(() => {
    syncEntryFarmData();
    const applied = applySelectedLocation();
    if (!applied) getLocationName();
    initMap();
    tryOpenInviteEntryPopup();
    fetchAbnormalContent();
    fetchRiskReport();
    fetchStressReport();
});
</script>

<style lang="scss" scoped>
.growth-report-page {
    width: 100%;
    height: 100%;
    background: #f5f7fb;
    box-sizing: border-box;

    .interact-float {
        position: fixed;
        top: 10px;
        left: 10px;
        right: 10px;
        z-index: 30;
        pointer-events: none;

        .interact-card {
            pointer-events: auto;
            overflow: hidden;
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        }

        .interact-card__head {
            position: relative;
            background: linear-gradient(180deg, #e5f4ff 0%, #ffffff 72%);
        }

        .interact-card__tab {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            height: 32px;
            padding: 0 32px 10px 8px;
            color: #fff;
            font-size: 16px;
            font-family: "PangMenZhengDao";
            background: url("@/assets/img/agricultural/title-bg.png") no-repeat center / 100% 100%;

            span {
                margin-top: -3px;
            }
        }

        .interact-card__star {
            width: 16px;
            height: 14px;
        }

        .interact-card__close {
            position: absolute;
            top: 8px;
            right: 10px;
            font-size: 16px;
            color: #9c9c9c;
            cursor: pointer;
        }

        .interact-card__qa {
            margin: 0 10px 10px;
            border-radius: 8px;
        }
        .interact-card__question {
            font-size: 16px;
            color: #000;
            font-weight: 500;

        }
        .interact-card__btn {
            margin: 10px auto 0;
            height: 32px;
            line-height: 32px;
            background: #2199F8;
            color: #fff;
            width: 100px;
            text-align: center;
            border-radius: 4px;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
        }
    }

    .location-bar {
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 16;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        max-width: calc(100% - 24px);
        height: 32px;
        padding: 0 12px;
        border-radius: 16px;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(4px);
        color: #fff;
        font-size: 14px;
        box-sizing: border-box;

        &__icon {
            font-size: 16px;
            flex-shrink: 0;
        }

        &__name {
            max-width: calc(100vw - 80px);
        }

        &__action {
            flex-shrink: 0;
            color: #2199f8;
        }
    }

    .side-menu {
        position: fixed;
        top: 58px;
        z-index: 15;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 10px 6px;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;

        &--left {
            left: 10px;
        }

        &--right {
            right: 10px;
        }

        &__item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            width: 26px;
            color: #8a8a8a;
            cursor: pointer;

            &.active {
                color: #2199f8;

                .side-menu__icon {
                    opacity: 1;
                    filter: brightness(0) saturate(100%) invert(48%) sepia(98%) saturate(1805%) hue-rotate(178deg) brightness(98%) contrast(97%);
                }
            }
        }

        &__icon {
            width: 16px;
            height: 16px;
            object-fit: contain;
            opacity: 0.55;
            filter: grayscale(1);
        }

        &__text {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            line-height: 14px;
            text-align: center;
        }
    }


    .invite-group {
        position: fixed;
        right: 16px;
        z-index: 20;
        pointer-events: none;
        transition: bottom 0.2s ease;

        .invite-btn {
            pointer-events: auto;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            background: #fff;
            box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
            gap: 4px;
            padding: 0 8px;
            color: #2199F8;
            font-weight: 500;
            font-size: 12px;
            .invite-icon {
                width: 16px;
            }
        }
        .invite-btn + .invite-btn {
            margin-top: 10px;
        }
    }


    .map-legend {
        position: fixed;
        left: 10px;
        z-index: 20;
        pointer-events: none;
        transition: bottom 0.2s ease;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 4px 10px;
        background: rgba(0, 0, 0, 0.46);
        backdrop-filter: blur(4px);
        border-radius: 4px;
        box-sizing: border-box;

        &--en {
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
            padding: 8px 10px;
            background: rgba(0, 0, 0, 0.72);
            border-radius: 6px;

            .map-legend__item {
                gap: 6px;
            }

            .map-legend__pill {
                width: 18px;
                height: 4px;
                flex-shrink: 0;
            }

            .map-legend__text {
                font-size: 11px;
                line-height: 1.2;
                white-space: nowrap;
            }
        }

        &__item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        &__pill {
            width: 16px;
            height: 5px;
            border-radius: 10px;

            &--zone {
                background: #13a27f;
            }

            &--growth {
                background: #ff9138;
            }

            &--pest {
                background: #e62e2d;
            }
        }

        &__text {
            font-size: 12px;
            color: #fff;
        }
    }

    .report-content {
        position: relative;
        height: 100%;
        box-sizing: border-box;

        .map-container {
            width: 100%;
            height: 100%;
        }
    }
}
</style>