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="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="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"
            :report-generating="reportGenerating" @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, onBeforeUnmount, onDeactivated, 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 menuIcon = require("@/assets/img/common/water.png");
const menuIcon2 = require("@/assets/img/common/rain.png");
const stressMenuItems = [
    {
        key: "stress",
        line1: "暴雨",
        line2: "涝渍",
        icon: menuIcon,
        mapUrl: require("@/assets/img/map/Flood_Waterlogging_Risk.png"),
        extent: [115.7752805213905, 23.913245697921756, 116.55501818800624, 24.798086252779484],
    },
    {
        key: "hot-drought-1",
        line1: "高温",
        line2: "高湿",
        icon: menuIcon2,
        mapUrl: require("@/assets/img/map/High_Humidity_Heat_Risk.png"),
        extent: [115.77569718805717, 23.912588960529323, 116.55453653938879, 24.79742951538705],
    },
];

/** 恢复种植确认「已到达」后，再检查是否弹出诊断报告 */
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 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("");
/** stress_report 为空时，气象报告生成中 */
const reportGenerating = ref(false);
const activeMenuKey = ref("");
const panelHeight = ref(280);
const inviteBottom = computed(() => panelHeight.value);
const invitePopupRef = ref(null);

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

const CHECK_REPORT_INTERVAL_MS = 6000;
let checkWeatherReportTimer = null;

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

function stopCheckWeatherReport() {
    if (checkWeatherReportTimer) {
        clearTimeout(checkWeatherReportTimer);
        checkWeatherReportTimer = null;
    }
}

/** stress 为空时轮询 check_stress_report，status=1 后再拉 risk */
async function pollWeatherReportGenerated() {
    const tel = resolveUserTel();
    if (!tel) {
        reportGenerating.value = false;
        stopCheckWeatherReport();
        return;
    }
    try {
        const raw = await VE_API.questionnaire.checkWeatherReportGenerated({ tel });
        const res = Array.isArray(raw) ? raw[0] : raw;
        const status = Number(res?.data?.status);
        if (status === 0) {
            reportGenerating.value = true;
            stopCheckWeatherReport();
            checkWeatherReportTimer = setTimeout(pollWeatherReportGenerated, CHECK_REPORT_INTERVAL_MS);
            return;
        }
        if (status === 1) {
            stopCheckWeatherReport();
            reportGenerating.value = false;
            await fetchRiskReport();
            // 生成完成后补拉胁迫正文（避免仍显示空）
            await fetchStressReportAfterReady(tel);
            return;
        }
        reportGenerating.value = false;
        stopCheckWeatherReport();
    } catch {
        reportGenerating.value = false;
        stopCheckWeatherReport();
    }
}

function startCheckWeatherReport() {
    reportGenerating.value = true;
    stopCheckWeatherReport();
    pollWeatherReportGenerated();
}

/**
 * risk_report / stress_report：
 * 新：{ current_time, reports: [...] }
 * 旧：data 为报告对象或数组
 */
function unwrapRiskStressData(raw) {
    const res = Array.isArray(raw) ? raw[0] : raw;
    if (Number(res?.code) !== 200 || !res.data) {
        return { reports: [], currentTime: "" };
    }
    const data = res.data;
    if (Array.isArray(data)) {
        return { reports: data, currentTime: "" };
    }
    if (Array.isArray(data.reports)) {
        return {
            reports: data.reports,
            currentTime: data.current_time || "",
        };
    }
    return {
        reports: typeof data === "object" ? [data] : [],
        currentTime: data.current_time || "",
    };
}

function pickReportExplain(item) {
    return item?.explain_simple || item?.interact_explain || "";
}

/** 未来预警卡片：risk_report → explain_simple */
async function fetchRiskReport() {
    const tel = resolveUserTel();
    if (!tel) {
        weatherRiskExplain.value = "";
        return;
    }
    try {
        const { reports } = unwrapRiskStressData(await VE_API.questionnaire.riskReport({ tel }));
        const item = reports[0];
        weatherRiskExplain.value = pickReportExplain(item);
        if (item?.risk_name) weatherRisk.value = item.risk_name;
    } catch {
        weatherRiskExplain.value = "";
    }
}

/** 当下胁迫卡片：stress_report → explain_simple；reports 为空则轮询是否生成中 */
async function fetchStressReport() {
    const tel = resolveUserTel();
    if (!tel) {
        weatherStressExplain.value = "";
        reportGenerating.value = false;
        stopCheckWeatherReport();
        return;
    }
    try {
        const { reports } = unwrapRiskStressData(await VE_API.questionnaire.stressReport({ tel }));
        if (!reports.length) {
            weatherStressExplain.value = "";
            startCheckWeatherReport();
            return;
        }
        stopCheckWeatherReport();
        reportGenerating.value = false;
        const item = reports[0];
        weatherStressExplain.value = pickReportExplain(item);
        if (item?.stress_name) weatherStress.value = item.stress_name;
    } catch {
        weatherStressExplain.value = "";
    }
}

/** 生成完成后只取正文，不再触发轮询 */
async function fetchStressReportAfterReady(tel) {
    try {
        const { reports } = unwrapRiskStressData(await VE_API.questionnaire.stressReport({ tel }));
        const item = reports[0];
        weatherStressExplain.value = pickReportExplain(item);
        if (item?.stress_name) weatherStress.value = item.stress_name;
    } 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);
        }
        applyMenuOverlay(activeMenuKey.value);
        return;
    }
    const location = currentMapPoint.value || store.state.home.miniUserLocationPoint || DEFAULT_MAP_POINT;
    currentMapPoint.value = location;
    growthReportMap.initMap(location, mapContainer.value);
    applyMenuOverlay(activeMenuKey.value);
};

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

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;
    // 再次点击同一项则关闭叠加
    if (activeMenuKey.value === key) {
        activeMenuKey.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 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();
});
onActivated(() => {
    syncEntryFarmData();
    const applied = applySelectedLocation();
    if (!applied) getLocationName();
    initMap();
    tryOpenInviteEntryPopup();
    fetchAbnormalContent();
    fetchRiskReport();
    fetchStressReport();
});
onDeactivated(() => {
    stopCheckWeatherReport();
});
onBeforeUnmount(() => {
    stopCheckWeatherReport();
});
</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: 22px;
            height: 22px;
            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>