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>
            <!-- Overlay 宿主：无范围时挂到地图方框下方 -->
            <div ref="noRangeTipRef" class="no-range-tip" :style="{ display: noFarmRange ? 'inline-flex' : 'none' }"
                @click.stop="goAddZone('farm')">
                <span>勾画区域，获地块级长势报告</span>
                <el-icon class="no-range-tip__arrow">
                    <ArrowRight />
                </el-icon>
            </div>
        </div>

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

        <div class="growth-top">
            <!-- 浮窗：长势互动 -->
            <div v-if="!showInteractCard" class="interact-float">
                <div class="interact-card">
                    <el-icon class="interact-card__close" @click="showInteractCard = true">
                        <Close />
                    </el-icon>
                    <div class="interact-card__qa">
                        <div class="interact-card__question">
                            <div class="interact-card__question-icon">
                                <img class="interact-card__question-icon-img" :src="periodIcon" alt="">
                            </div>
                            <span>{{ interactQuestionText }}</span>
                        </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 class="growth-top__content">
                <!-- 左侧：气象底图图层菜单（有农场 getHomeMapCalc / 无农场 getHomeMapCalcByCounty） -->
                <div v-if="stressMenuItems.length" 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="base_img_url3 + item.icon_path" alt="" />
                        <div class="side-menu__text">
                            <span>{{ item.line1 }}</span>
                            <span>{{ item.line2 }}</span>
                        </div>
                    </div>
                </div>
                
                <div class="invite-group">
                    <div class="invite-btn" @click="handleLocateToCenter">
                        <img class="current-icon" src="@/assets/img/home/current.png" alt="">
                    </div>
                    <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>
            </div>

        </div>


        <div v-if="activeLegendUrl" class="map-legend map-legend--image" :style="{ bottom: `${inviteBottom + 10}px` }">
            <img class="map-legend__img" :src="activeLegendUrl" alt="" />
        </div>

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

    <!-- 恢复种植弹窗 -->
    <restore-planting-popup />
</template>

<script setup>
import { computed, nextTick, onActivated, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import { ArrowRight, Close, LocationFilled } from "@element-plus/icons-vue";
import { convertPointToArray } from "@/utils/index";
import { fetchRegeo, toLocationParam } from "@/utils/tiandituLocation";
import GrowthReportMap from "./growthReportMap.js";
import CropAlertPanel from "./components/CropAlertPanel.vue";
import wx from "weixin-js-sdk";

import { base_img_url3 } from "@/api/config";
import restorePlantingPopup from "@/components/popup/restorePlantingPopup.vue";

const router = useRouter();

const DEFAULT_MAP_POINT = "POINT(113.6142086995688 23.585836479509055)";
const LOCATION_SESSION_KEY = "GROWTH_REPORT_LOCATION";
const MAP_POINT_STORAGE_KEY = "GROWTH_REPORT_MAP_POINT";
/** 无农场时逆地理得到的区县码，供底图 / 点位预警共用 */
const COUNTY_CODE_STORAGE_KEY = "GROWTH_REPORT_COUNTY_CODE";

const menuIcon = require("@/assets/img/common/farm-active.png");
const periodIcon = require("@/assets/img/agricultural/period.png");
const lightningIcon = require("@/assets/img/agricultural/lightning.png");
const soilIcon = require("@/assets/img/agricultural/soil.png");

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

const mapContainer = ref(null);
const noRangeTipRef = ref(null);
const growthReportMap = new GrowthReportMap();
const locationName = ref("");
/** status≠1 时展示中心勾画引导 */
const noFarmRange = ref(false);
const selectedFarmId = ref(localStorage.getItem("selectedFarmId") || "");
/** 无农场时区县码（逆地理 adcode） */
const countyCode = ref(localStorage.getItem(COUNTY_CODE_STORAGE_KEY) || "");
/** CropAlertPanel 当前选中分区 */
const panelZoneId = ref(null);
const currentCropName = computed(() => {
    // 依赖 selectedFarmId，切换农场后重新读缓存
    void selectedFarmId.value;
    const farm = getSelectedFarm();
    return (
        farm.variety_name ||
        farm.crop_name ||
        farm.farm_variety ||
        ""
    );
});
/** 侧边气象图层菜单（有农场 getHomeMapCalc / 无农场 getHomeMapCalcByCounty） */
const stressMenuItems = ref([]);
const activeMenuKey = ref("");
/** 当前选中图层图例图 */
const activeLegendUrl = ref("");
const panelHeight = ref(280);
const inviteBottom = computed(() => panelHeight.value);
/** 防止切换农场/分区时旧请求回写 */
let mapCalcToken = 0;

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

/** 登录写入的用户定位：lng,lat */
const getMiniUserLocationText = () => localStorage.getItem("MINI_USER_LOCATION") || "";

/** 登录写入的用户定位 POINT；无 POINT 时用 lng,lat 拼 */
const getMiniUserLocationPoint = () => {
    const point =
        localStorage.getItem("MINI_USER_LOCATION_POINT") ||
        store.state.home.miniUserLocationPoint ||
        "";
    if (typeof point === "string" && /^POINT\s*\(/i.test(point.trim())) {
        return point.trim();
    }
    const text = getMiniUserLocationText();
    if (text.includes(",")) {
        const [lng, lat] = text.split(",").map((s) => s.trim());
        if (lng && lat) return `POINT(${lng} ${lat})`;
    }
    return DEFAULT_MAP_POINT;
};

const hasSelectedFarm = () => {
    const farm = getSelectedFarm();
    const id =
        selectedFarmId.value ||
        localStorage.getItem("selectedFarmId") ||
        farm.farm_id ||
        farm.id;
    return id != null && id !== "";
};

/** 地图中心优先用农场 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 getMiniUserLocationPoint();
};

/** 有农场用农场点，无农场用登录用户点位 */
const resolveMapCenterPoint = (farm = getSelectedFarm()) => {
    if (hasSelectedFarm()) return resolveFarmLocationWkt(farm);
    return getMiniUserLocationPoint();
};

const currentMapPoint = ref(resolveMapCenterPoint());

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

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

/** status=1 有范围；否则展示勾画引导（无农场不展示） */
async function fetchFarmRangeStatus() {
    const farm = getSelectedFarm();
    const farmId = selectedFarmId.value || farm.farm_id || farm.id;
    const zoneId = panelZoneId.value ?? getSelectedZoneId();
    // 无农场不展示勾画引导
    if (farmId == null || farmId === "") {
        noFarmRange.value = false;
        await syncNoRangeGuide();
        return;
    }
    if (zoneId == null || zoneId === "") {
        noFarmRange.value = true;
        await syncNoRangeGuide();
        return;
    }
    try {
        const res = await VE_API.questionnaire.checkZoneRange({
            farm_id: farmId,
            zone_id: zoneId,
        });
        noFarmRange.value = Number(res?.data?.status) !== 1;
    } catch (e) {
        console.warn("[growth_report] checkZoneRange failed", e);
        noFarmRange.value = true;
    }
    await syncNoRangeGuide();
}

/** 无范围时在地图中心点画示意方框 + 下方提示 */
async function syncNoRangeGuide() {
    await nextTick();
    if (!growthReportMap.kmap) return;
    if (!noFarmRange.value) {
        growthReportMap.clearNoRangeGuide();
        return;
    }
    const coordinate =
        growthReportMap.getCurrentCoordinate() ||
        convertPointToArray(currentMapPoint.value)?.map(Number);
    if (!coordinate?.length) return;
    growthReportMap.showNoRangeGuide(coordinate, noRangeTipRef.value);
}

const goAddZone = (type) => {
    router.push({
        path: "/add_zone",
        query: {
            type,
            isSuccessPopup: type === "farm" ? "1" : "0",
        },
    });
};

const showInteractCard = ref(false);
const interactQuestionText = ref("物候问题物候问题");
const interactOptions = ref([{id: 1, name: "未到"}, {id: 2, name: "顺利进入"}, {id: 3, name: "已过"}]);
const selectedOptionId = ref(null);
const interactSubmitting = ref(false);
/** getOuterRecords 返回的 records */
const outerRecords = ref([]);
/** 当前展示的 records 下标 */
const currentRecordIndex = ref(-1);
/** 防止切换分区时旧请求回写 */
let interactFetchToken = 0;

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 "提交失败，请稍后再试";
}

/** interact_options 可能是 JSON 字符串或数组 */
function parseInteractOptions(raw) {
    let list = raw;
    if (typeof raw === "string") {
        try {
            list = JSON.parse(raw);
        } catch {
            return [];
        }
    }
    if (!Array.isArray(list)) return [];
    return list.map((name, index) => ({
        id: index + 1,
        name: String(name),
    }));
}

function clearInteractCard() {
    outerRecords.value = [];
    currentRecordIndex.value = -1;
    interactQuestionText.value = "";
    interactOptions.value = [];
    selectedOptionId.value = null;
    showInteractCard.value = false;
}

function applyOuterRecordAt(index) {
    const records = outerRecords.value;
    if (!records.length || index < 0 || index >= records.length) {
        clearInteractCard();
        return;
    }
    currentRecordIndex.value = index;
    const record = records[index] || {};
    const question = record.interact_problem || "";
    const options = parseInteractOptions(record.interact_options);
    interactQuestionText.value = question;
    interactOptions.value = options;
    selectedOptionId.value = null;
    showInteractCard.value = Boolean(question || options.length);
}

function buildInteractSubmitPayload(optionText) {
    const record = outerRecords.value[currentRecordIndex.value] || {};
    const zoneId = panelZoneId.value ?? getSelectedZoneId();
    return {
        zone_id: Number(zoneId),
        date: formatToday(),
        // interact_code: record.interact_code || "",
        period_code: record.period_code || "",
        // interact_option: optionText,
    };
}

async function submitInteractOption(item) {
    if (interactSubmitting.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 handleInteractOptionClick(item) {
    const options = interactOptions.value;
    if (interactSubmitting.value || !item?.name || !options.length || currentRecordIndex.value < 0) {
        return;
    }
    const isFirst = item.id === options[0]?.id;
    const isLast = item.id === options[options.length - 1]?.id;
    // 仅一项时按提交处理
    if (options.length === 1 || (!isFirst && !isLast)) {
        await submitInteractOption(item);
        return;
    }
    selectedOptionId.value = item.id;
    if (isFirst) {
        if (currentRecordIndex.value > 0) {
            applyOuterRecordAt(currentRecordIndex.value - 1);
            return;
        }
        ElMessage.info("已是第一条");
        return;
    }
    if (isLast) {
        if (currentRecordIndex.value < outerRecords.value.length - 1) {
            applyOuterRecordAt(currentRecordIndex.value + 1);
            return;
        }
        ElMessage.info("已是最后一条");
    }
}

async function fetchInteractTask() {
    const zoneId = panelZoneId.value ?? getSelectedZoneId();
    if (zoneId === "" || zoneId == null) {
        clearInteractCard();
        return;
    }
    const token = ++interactFetchToken;
    try {
        const res = await VE_API.questionnaire.getOuterRecords({
            zone_id: zoneId,
        });
        if (token !== interactFetchToken) return;
        if (res?.code !== 200) {
            clearInteractCard();
            return;
        }
        const data = res?.data || {};
        const records = Array.isArray(data.records) ? data.records : [];
        outerRecords.value = records;
        if (!records.length) {
            clearInteractCard();
            return;
        }
        // 默认展示与外层 interact_code 匹配的那一项
        const matchedIndex = records.findIndex(
            (item) => item?.interact_code && item.interact_code === data.interact_code
        );
        applyOuterRecordAt(matchedIndex >= 0 ? matchedIndex : 0);
    } catch (e) {
        if (token !== interactFetchToken) return;
        console.warn("[growth_report] getOuterRecords failed", e);
        clearInteractCard();
    }
}

/** 农场品类编码：接口 crop_code 对应缓存 category_code */
function resolveCropCode(farm = getSelectedFarm()) {
    return farm.category_code || farm.categorycode || farm.crop_code || "";
}

/** 本地 dem 路径转 mapimg 可访问地址：取文件名挂到 /mapimg/ */
function resolveCalcAssetUrl(path) {
    if (!path) return "";
    const raw = String(path).trim();
    if (/^https?:\/\//i.test(raw)) return raw;
    const fileName = raw.replace(/\\/g, "/").split("/").filter(Boolean).pop();
    if (!fileName) return "";
    // /home/dem_ditu/输出/从化区_xxx.png → https://feiniao-farm-h5-v3.feiniaotech.com/mapimg/从化区_xxx.png
    return `https://feiniao-farm-h5-v3.feiniaotech.com/mapimg/${encodeURIComponent(fileName)}`;
}

/** risk_name 拆成两行展示，如「高温高湿」→ 高温 / 高湿 */
function splitRiskName(name) {
    const text = String(name || "").trim();
    if (!text) return { line1: "-", line2: "" };
    if (text.length <= 2) return { line1: text, line2: "" };
    const mid = Math.ceil(text.length / 2);
    return { line1: text.slice(0, mid), line2: text.slice(mid) };
}

function mapCalcRecordToMenuItem(record) {
    const { line1, line2 } = splitRiskName(record?.risk_name);
    const bounds = Array.isArray(record?.bounds) ? record.bounds.map(Number) : [];
    const extent =
        bounds.length === 4 && bounds.every((n) => Number.isFinite(n)) ? bounds : null;
    return {
        key: String(record?.id ?? record?.risk_name ?? ""),
        line1,
        line2,
        icon_path: record?.icon_path || menuIcon,
        mapUrl: resolveCalcAssetUrl(record?.png_path),
        extent,
        legendUrl: resolveCalcAssetUrl(record?.legend_path),
    };
}

function clearMapCalcState() {
    stressMenuItems.value = [];
    activeMenuKey.value = "";
    activeLegendUrl.value = "";
    growthReportMap.hideRemoteImage();
}

/** 按侧边菜单叠加对应气象底图 + 图例 */
function applyMenuOverlay(key) {
    const item = stressMenuItems.value.find((m) => m.key === key);
    if (!item?.mapUrl || !item.extent || !growthReportMap.kmap) {
        growthReportMap.hideRemoteImage();
        activeLegendUrl.value = "";
        return;
    }
    growthReportMap.showRemoteImage(item.mapUrl, item.extent);
    activeLegendUrl.value = item.legendUrl || "";
}

function applyMapCalcRecords(records) {
    stressMenuItems.value = records.map(mapCalcRecordToMenuItem).filter((item) => item.key);
    const first = stressMenuItems.value[0];
    if (first) {
        activeMenuKey.value = first.key;
        applyMenuOverlay(first.key);
    } else {
        clearMapCalcState();
    }
}

/** 无农场：按区县 adcode 拉气象底图 */
async function fetchHomeMapCalcByCounty(countyCode) {
    const token = ++mapCalcToken;
    if (!countyCode) {
        clearMapCalcState();
        return;
    }
    try {
        const res = await VE_API.questionnaire.getHomeMapCalcByCounty({
            county_code: countyCode,
        });
        if (token !== mapCalcToken) return;
        const records = Array.isArray(res?.data?.records) ? res.data.records.slice(0, 3) : [];
        applyMapCalcRecords(records);
    } catch (e) {
        if (token !== mapCalcToken) return;
        console.warn("[growth_report] getHomeMapCalcByCounty failed", e);
        clearMapCalcState();
    }
}

/** 有农场：按农场/分区拉气象底图 */
async function fetchHomeMapCalc() {
    if (!hasSelectedFarm()) return;

    const token = ++mapCalcToken;
    const farm = getSelectedFarm();
    const farmId = selectedFarmId.value || farm.farm_id || farm.id;
    const zoneId = panelZoneId.value;
    const cropCode = resolveCropCode(farm);
    if (
        farmId == null ||
        farmId === "" ||
        zoneId == null ||
        zoneId === "" ||
        !cropCode
    ) {
        clearMapCalcState();
        return;
    }
    try {
        const res = await VE_API.questionnaire.getHomeMapCalc({
            farm_id: farmId,
            zone_id: zoneId,
            calc_date: formatToday(),
            crop_code: cropCode,
        });
        if (token !== mapCalcToken) return;
        const records = Array.isArray(res?.data?.records) ? res.data.records.slice(0, 3) : [];
        applyMapCalcRecords(records);
    } catch (e) {
        if (token !== mapCalcToken) return;
        console.warn("[growth_report] getHomeMapCalc failed", e);
        clearMapCalcState();
    }
}

const handleZoneChange = (zoneId) => {
    panelZoneId.value = zoneId != null && zoneId !== "" ? zoneId : null;
    fetchHomeMapCalc();
    fetchFarmRangeStatus();
    // fetchInteractTask();
};

async function getLocationName(point = currentMapPoint.value) {
    let locationParam = "";
    // 无农场：逆地理用登录点 MINI_USER_LOCATION（lng,lat）
    if (!hasSelectedFarm()) {
        locationParam = toLocationParam(getMiniUserLocationText());
    }
    if (!locationParam) {
        const locationPoint =
            point ||
            localStorage.getItem("selectedFarmPoint") ||
            getMiniUserLocationPoint();
        if (!locationPoint) return;
        const farmLocation = convertPointToArray(locationPoint);
        if (Array.isArray(farmLocation) && farmLocation.length >= 2) {
            locationParam = `${farmLocation[0]},${farmLocation[1]}`;
        } else if (typeof farmLocation === "string" && farmLocation.includes(",")) {
            locationParam = toLocationParam(farmLocation);
        } else {
            return;
        }
    }
    try {
        const { result } = await fetchRegeo({ location: locationParam });
        locationName.value = result?.address_component
            ? result.address_component.city + result.address_component.district
            : (result?.address || "") + "";
        // 无农场时用 adcode 拉区县气象底图，并同步给预警面板
        if (!hasSelectedFarm()) {
            const adcode = result?.ad_info?.adcode;
            if (adcode != null && adcode !== "") {
                const code = String(adcode);
                countyCode.value = code;
                localStorage.setItem(COUNTY_CODE_STORAGE_KEY, code);
                await fetchHomeMapCalcByCounty(code);
            } else {
                countyCode.value = "";
                localStorage.removeItem(COUNTY_CODE_STORAGE_KEY);
                clearMapCalcState();
            }
        }
    } catch (e) {
        console.warn("[growth_report] getLocationName failed", e);
    }
}

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);
        }
        await syncNoRangeGuide();
        applyMenuOverlay(activeMenuKey.value);
        return;
    }
    const location = currentMapPoint.value || store.state.home.miniUserLocationPoint || DEFAULT_MAP_POINT;
    currentMapPoint.value = location;
    growthReportMap.initMap(location, mapContainer.value);
    await syncNoRangeGuide();
    applyMenuOverlay(activeMenuKey.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 point = resolveMapCenterPoint();
    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 handleLocateToCenter = () => {
    if (!growthReportMap.kmap) return;
    const point = resolveMapCenterPoint() || currentMapPoint.value;
    if (!point) return;
    saveCurrentMapPoint(point);
    const coordinate = convertPointToArray(point)?.map(Number);
    if (coordinate?.length === 2) {
        growthReportMap.setMapPosition(coordinate);
    }
};

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;
    // 再次点击同一项则关闭叠加
    if (activeMenuKey.value === key) {
        activeMenuKey.value = "";
        activeLegendUrl.value = "";
        growthReportMap.hideRemoteImage();
        return;
    }
    activeMenuKey.value = key;
    applyMenuOverlay(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: `invite_welcome`,
        paramsPage: JSON.stringify({ inviteName, inviteType, adminId }),
        imageUrl: 'https://birdseye-img.sysuimars.com/farm-h5/field.png',
    };
    wx.miniProgram.navigateTo({
        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
    });
}

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

onMounted(() => {
    // syncSelectedFarmId();
    // syncMapFromSelectedFarm();
    getLocationName();
    // initMap();
    // fetchFarmRangeStatus();
    // fetchInteractTask();
});
onActivated(() => {
    syncSelectedFarmId();
    const applied = applySelectedLocation();
    if (!applied) syncMapFromSelectedFarm();
    initMap();
    fetchFarmRangeStatus();
    // fetchInteractTask();
});
</script>

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

    .interact-float {
        margin-bottom: 6px;
        pointer-events: none;
        padding: 1px;
        background:  linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(153, 153, 153, 0.25) 100%);
        border-radius: 14px;
        backdrop-filter: blur(4px);

        .interact-card {
            position: relative;
            pointer-events: auto;
            overflow: hidden;
            border-radius: 14px;
            padding: 10px;
            background: linear-gradient(180deg, rgba(26, 25, 29, 0.6) 0%, rgba(18, 18, 22, 0.6) 100%);
        }

        .interact-card__head {
            position: relative;
        }

        .interact-card__tab {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            height: 32px;
            padding: 0 32px 10px 8px;
            color: #fff;
            font-size: 16px;

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

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

        .interact-card__close {
            position: absolute;
            top: 12px;
            right: 10px;
            font-size: 16px;
            color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
        }

        .interact-card__qa {
        }

        .interact-card__question {
            font-size: 16px;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 12px;
            .interact-card__question-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 31px;
                height: 31px;
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.12);
                border-radius: 8px;
                .interact-card__question-icon-img {
                    width: 13px;
                }
            }
        }

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

        .interact-option {
            position: relative;
            flex: 1;
            min-width: 0;
            height: 41px;
            line-height: 41px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.12);
            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: rgba(255, 255, 255, 0.7);
            }

            &.selected {
                border-color: rgba(255, 255, 255, 0.5);
                background: rgba(255, 255, 255, 0.1);

                .interact-option__text {
                    color: #fff;
                }

                // &::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: #FFD489;
        }
    }

    .growth-top {
        width: 100%;
        position: fixed;
        top: 52px;
        z-index: 15;
        pointer-events: none;
        padding: 0 12px;
        box-sizing: border-box;

        .growth-top__content {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
        }
    }

    .side-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 4px;
        border-radius: 10px;
        pointer-events: auto;
        background: #1b1b1d;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.12);

        &__item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            width: 45px;
            color: #C1C1C1;
            padding: 5px 10px;
            box-sizing: border-box;
            cursor: pointer;

            &.active {
                color: #FFD489;
                background: #2C2C2C;
                border-radius: 6px;

                .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: 21px;
            object-fit: contain;
            filter: grayscale(1);
        }

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


    .invite-group {
        pointer-events: none;

        .invite-btn {
            pointer-events: auto;
            height: 48px;
            width: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(20, 20, 22, 0.8);
            gap: 6px;
            color: rgba(255, 255, 255, 0.6);
            font-size: 10px;

            .invite-icon {
                width: 16px;
            }
            .current-icon {
                width: 20px;
            }
        }

        .invite-btn+.invite-btn {
            margin-top: 10px;
        }
    }


    .map-legend {
        position: fixed;
        right: 10px;
        z-index: 20;
        pointer-events: none;
        // transition: bottom 0.2s ease;
        // display: flex;
        // align-items: center;
        // gap: 10px;
        // box-sizing: border-box;

        &__img {
            display: block;
            max-width: 180px;
            max-height: 160px;
            object-fit: contain;
        }

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

    .no-range-tip {
        display: none;
        align-items: center;
        gap: 2px;
        max-width: calc(100vw - 48px);
        height: 36px;
        padding: 0 14px;
        border-radius: 18px;
        background: rgba(40, 48, 36, 0.72);
        backdrop-filter: blur(4px);
        color: #fff;
        font-size: 14px;
        white-space: nowrap;
        box-sizing: border-box;
        cursor: pointer;

        &__arrow {
            font-size: 14px;
            flex-shrink: 0;
        }
    }
}
</style>