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 class="interact-card__options">
                        <div
                            v-for="item in interactOptions"
                            :key="item.id"
                            class="interact-option"
                            :class="{
                                selected: selectedOptionId === item.id,
                                disabled: interactSubmitting,
                            }"
                            @click="handleInteractOptionClick(item)"
                        >
                            <span class="interact-option__text">{{ item.name }}</span>
                        </div>
                    </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="handleSwitchFarm">切换农场</span>
        </div>

        <!-- 左侧：胁迫图层菜单 -->
        <div class="side-menu side-menu--left">
            <div
                v-for="item in stressMenuItems"
                :key="item.key"
                class="side-menu__item"
                :class="{ active: activeMenuKey === item.key }"
                @click="handleSelectMenu(item.key)"
            >
                <img class="side-menu__icon" :src="item.icon" alt="" />
                <div class="side-menu__text">
                    <span>{{ item.line1 }}</span>
                    <span>{{ item.line2 }}</span>
                </div>
            </div>
        </div>

        <!-- 右侧：图层菜单 -->
        <div class="side-menu side-menu--right">
            <div
                v-for="item in layerMenuItems"
                :key="item.key"
                class="side-menu__item"
                :class="{ active: activeMenuKey === item.key }"
                @click="handleSelectMenu(item.key)"
            >
                <img class="side-menu__icon" :src="item.icon" alt="" />
                <div class="side-menu__text">
                    <span>{{ item.line1 }}</span>
                    <span>{{ item.line2 }}</span>
                </div>
            </div>
        </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>

        <div class="invite-group" :style="{ bottom: `${inviteBottom}px` }">
            <div class="invite-btn" @click="handleInvite('service')">
                <img class="invite-icon" src="@/assets/img/home/user-icon.png" alt="">
                邀请农服</div>
            <div class="invite-btn" @click="handleInvite('farmer')">
                <img class="invite-icon" src="@/assets/img/home/user-icon.png" alt="">
                邀请农户</div>
        </div>

        <crop-alert-panel
            :crop-name="currentCropName"
            :farm-id="selectedFarmId"
            @height-change="handlePanelHeightChange"
        />
    </div>

    <!-- 录入信息邀请弹窗：分享链接带 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 { ElMessage } from "element-plus";
import { Close, LocationFilled } from "@element-plus/icons-vue";
import { convertPointToArray } from "@/utils/index";
import GrowthReportMap from "./growthReportMap.js";
import CropAlertPanel from "./components/CropAlertPanel.vue";
import inviteEntryPopup from "@/views/old_mini/entry_information/components/inviteEntryPopup.vue";
import wx from "weixin-js-sdk";

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

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 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 selectedFarmId = ref(localStorage.getItem("selectedFarmId") || "");
const currentCropName = computed(() => {
    // 依赖 selectedFarmId，切换农场后重新读缓存
    void selectedFarmId.value;
    const farm = getSelectedFarm();
    return farm.categoryLabel || farm.variety_name || farm.crop_name || "";
});
const activeMenuKey = ref("hot-drought-2");
const panelHeight = ref(280);
const inviteBottom = computed(() => panelHeight.value);
const invitePopupRef = ref(null);

const getSelectedFarm = () => {
    try {
        return JSON.parse(localStorage.getItem("selectedFarmData") || "{}");
    } catch {
        return {};
    }
};

/** 地图中心优先用农场 farm_location */
const resolveFarmLocationWkt = (farm = getSelectedFarm()) => {
    const candidates = [farm.farm_location, farm.wkt, farm.geom_wkt, localStorage.getItem("selectedFarmPoint")];
    for (const item of candidates) {
        if (typeof item === "string" && /^POINT\s*\(/i.test(item.trim())) {
            return item.trim();
        }
    }
    return store.state.home.miniUserLocationPoint || DEFAULT_MAP_POINT;
};

const currentMapPoint = ref(resolveFarmLocationWkt());

const getSelectedZoneId = () => {
    const farm = getSelectedFarm();
    return farm.zone_id ?? farm.zoneId ?? "";
};

const syncSelectedFarmId = () => {
    selectedFarmId.value = String(
        localStorage.getItem("selectedFarmId") || getSelectedFarm().farm_id || getSelectedFarm().id || ""
    );
};

const showInteractCard = ref(false);
const interactQuestionText = ref("");
const interactOptions = ref([]);
const selectedOptionId = ref(null);
const currentInteractTask = ref(null);
const interactSubmitting = ref(false);

function formatToday() {
    const d = new Date();
    const y = d.getFullYear();
    const m = String(d.getMonth() + 1).padStart(2, "0");
    const day = String(d.getDate()).padStart(2, "0");
    return `${y}-${m}-${day}`;
}

function getRequestErrorMessage(err) {
    const data = err?.response?.data;
    if (typeof data === "string" && data) return data;
    if (data?.msg) return data.msg;
    if (data?.message) return data.message;
    if (err?.message) return err.message;
    return "提交失败，请稍后再试";
}

function buildInteractSubmitPayload(answerText) {
    const task = currentInteractTask.value || {};
    const content = task.interact_content || {};
    return {
        zone_id: Number(task.zone_id ?? getSelectedZoneId()),
        date: formatToday(),
        interact_code: task.interact_code || content.interact_code || "",
        interact_answer: answerText,
    };
}

function mapInteractOptionsFromContent(content) {
    const options = content?.interact_options;
    if (!Array.isArray(options)) return [];
    return options.map((name, index) => ({
        id: index + 1,
        name: String(name),
    }));
}

function applyFirstInteractTask(task) {
    currentInteractTask.value = task || null;
    const content = task?.interact_content || {};
    const question = content.interact_problem || "";
    const options = mapInteractOptionsFromContent(content);
    interactQuestionText.value = question;
    interactOptions.value = options;
    selectedOptionId.value = null;
    showInteractCard.value = Boolean(question || options.length);
}

async function handleInteractOptionClick(item) {
    if (interactSubmitting.value || !item?.name || !currentInteractTask.value) return;
    selectedOptionId.value = item.id;
    interactSubmitting.value = true;
    try {
        const res = await VE_API.questionnaire.saveInteractResult(
            buildInteractSubmitPayload(item.name)
        );
        if (res?.code === 200) {
            ElMessage.success(res.msg || "提交成功");
            showInteractCard.value = false;
            await fetchInteractTask();
            return;
        }
        ElMessage.error(res?.msg || "提交失败，请稍后再试");
    } catch (err) {
        ElMessage.error(getRequestErrorMessage(err));
    } finally {
        interactSubmitting.value = false;
    }
}

async function fetchInteractTask() {
    const zoneId = getSelectedZoneId();
    if (zoneId === "" || zoneId == null) return;
    try {
        const res = await VE_API.questionnaire.getExternalInteractTasks({
            zone_id: zoneId,
        });
        const tasks = res?.data?.interact_tasks;
        const first = Array.isArray(tasks) ? tasks[0] : null;
        applyFirstInteractTask(first);
    } catch (e) {
        console.warn("[growth_report] getExternalInteractTasks failed", e);
    }
}

const stressMenuItems = [
    { key: "stress", line1: "胁迫", line2: "胁迫", icon: menuIcon },
    { key: "hot-drought-1", line1: "高温", line2: "干旱", icon: menuIcon },
    { key: "hot-drought-2", line1: "高温", line2: "干旱", icon: menuIcon },
    { key: "hot-drought-3", line1: "高温", line2: "干旱", icon: menuIcon },
];

const layerMenuItems = [
    { key: "growth", line1: "作物", line2: "长势", icon: menuIcon },
    { key: "phenology", line1: "物候", line2: "进程", icon: menuIcon },
];

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);
}

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;
}

/** 切换农场后：地图中心落到当前农场 farm_location */
function syncMapFromSelectedFarm() {
    const farm = getSelectedFarm();
    const point = resolveFarmLocationWkt(farm);
    if (!point) return false;
    saveCurrentMapPoint(point);
    const coordinate = convertPointToArray(point)?.map(Number);
    if (growthReportMap.kmap && coordinate?.length === 2) {
        growthReportMap.setMapPosition(coordinate);
    }
    getLocationName(point);
    return true;
}

const handleSwitchFarm = () => {
    router.push("/all_garden");
};

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 adminId = localStorage.getItem("MINI_USER_ID") || "";
    const query = {
        askInfo: { title: "邀请完善信息", content: "是否分享该邀请给好友" },
        shareText: isService ? "邀请您完善农服信息" : "邀请您完善地块种植信息",
        targetUrl: `growth_report`,
        paramsPage: JSON.stringify({ inviteName, showInviteEntry: 1, inviteType, adminId }),
        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 getAdminIdFromRoute() {
    const candidates = [
        route.query.adminId,
        parseMaybeJson(route.query.paramsPage)?.adminId,
        parseMaybeJson(route.query.miniJson)?.adminId,
        parseMaybeJson(parseMaybeJson(route.query.miniJson)?.paramsPage)?.adminId,
    ];
    return candidates.find((item) => item != null && item !== "") || "";
}

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;
    delete newQuery.adminId;
    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();
    const adminId = getAdminIdFromRoute();
    nextTick(() => {
        invitePopupRef.value?.open(inviteType, adminId);
        clearInviteEntryQuery();
    });
}

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

onMounted(() => {
    syncSelectedFarmId();
    syncMapFromSelectedFarm();
    getLocationName();
    initMap();
    fetchInteractTask();
    tryOpenInviteEntryPopup();
});
onActivated(() => {
    syncSelectedFarmId();
    const applied = applySelectedLocation();
    if (!applied) syncMapFromSelectedFarm();
    initMap();
    fetchInteractTask();
    tryOpenInviteEntryPopup();
});
</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;
            padding: 10px;
            border-radius: 8px;
            background: rgba(33, 153, 248, 0.1);
        }

        .interact-card__question {
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }

        .interact-card__options {
            display: flex;
            gap: 8px;
            margin-top: 10px;
        }

        .interact-option {
            position: relative;
            flex: 1;
            min-width: 0;
            height: 36px;
            line-height: 36px;
            border-radius: 6px;
            background: #fff;
            border: 1px solid transparent;
            text-align: center;
            box-sizing: border-box;
            cursor: pointer;

            &__text {
                display: block;
                padding: 0 6px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 14px;
                color: #666;
            }

            &.selected {
                border-color: #2199f8;

                .interact-option__text {
                    color: #2199f8;
                }

                &::after {
                    content: "";
                    position: absolute;
                    top: -1px;
                    right: -1px;
                    width: 18px;
                    height: 14px;
                    background: url("@/assets/img/home/checked-bg-top.png") no-repeat bottom right / 18px 13px;
                }
            }

            &.disabled {
                opacity: 0.65;
                pointer-events: none;
            }
        }
    }

    .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>