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

<template>
    <div class="agri-file-page" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
        <farm-header />
        <div class="nav-cards">
            <div
                v-for="item in navCards"
                :key="item.key"
                class="nav-card-wrap"
                :class="{ 'nav-card-wrap--report': item.key === 'report' }"
            >
                <div
                    class="nav-card"
                    :class="{ 'is-active': activeNav === item.key }"
                    @click="handleNavClick(item)"
                >
                    <img class="nav-card__icon" :src="item.icon" alt="" />
                    <span class="nav-card__label">{{ t(item.labelKey) }}</span>
                </div>
                <div v-if="item.key === 'report' && guideVisible" class="report-guide-bubble">
                    <span class="report-guide-bubble__arrow"></span>
                    <div class="report-guide-bubble__content">
                        {{ t("agriFile.diagnosisReportGuidePrefix") }}
                        <span class="report-guide-bubble__link">
                            {{ t("agriFile.uploadPhoto") }}
                        </span>
                        {{ t("agriFile.diagnosisReportGuideSuffix") }}
                    </div>
                </div>
            </div>
        </div>
        <div class="content-panel">
            <patrol-panel v-show="activeNav === 'patrol'" @open-upload="openUploadPopup" />
            <album-panel
                v-show="activeNav === 'album'"
                :active="activeNav === 'album'"
                @open-upload="openUploadPopup"
            />
            <report-panel v-show="activeNav === 'report'" />
        </div>
        <album-upload-popup v-model:show="showUploadPopup" @confirm="handleUploadConfirm" />
        <tip-popup v-model:show="showSuccessPopup" type="executeSuccess" text="您已上传成功" text2="请等待诊断报告生成" hideBtn>
            <template #footer>
                <div class="bottom-btn-container">
                    <div class="bottom-btn primary-btn" @click="handleComplete">完成</div>
                </div>
            </template>
        </tip-popup>
        <complete-farm-info-popup v-model:show="showCompleteFarmPopup" @confirm="goCompleteFarmInfo" />

        <!-- 诊断报告弹窗：组件内接口判断 exists=2 且本地未展示过 -->
        <diagnosis-report-popup />

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

        <!-- 代管弹窗：后续由接口控制是否展示 -->
        <proxy-auth-popup
            v-model:show="showProxyAuthPopup"
            :service-name="proxyServiceName"
            @reject="handleProxyReject"
            @allow="handleProxyAllow"
        />

        <!-- 申请更换物候期弹窗：后续由接口控制是否展示 -->
        <phenology-update-popup
            v-model:show="showPhenologyUpdatePopup"
            :service-name="phenologyUpdateInfo.serviceName"
            :current-stage="phenologyUpdateInfo.currentStage"
            :target-stage="phenologyUpdateInfo.targetStage"
            :current-image="phenologyUpdateInfo.currentImage"
            :farm-location="phenologyUpdateInfo.farmLocation"
            @reject="handlePhenologyUpdateReject"
            @confirm="handlePhenologyUpdateConfirm"
        />
    </div>
</template>

<script setup>
import { computed, onActivated, onBeforeUnmount, onMounted, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useI18n } from "@/i18n";
import farmHeader from "@/components/farmHeader.vue";
import albumUploadPopup from "./components/albumUploadPopup.vue";
import tipPopup from "@/components/popup/tipPopup.vue";
import completeFarmInfoPopup from "@/components/popup/completeFarmInfoPopup.vue";
import diagnosisReportPopup from "@/components/popup/diagnosisReportPopup.vue";
import restorePlantingPopup from "@/components/popup/restorePlantingPopup.vue";
import proxyAuthPopup from "@/components/popup/proxyAuthPopup.vue";
import phenologyUpdatePopup from "@/components/popup/phenologyUpdatePopup.vue";
import patrolPanel from "./components/patrolPanel.vue";
import albumPanel from "./components/albumPanel.vue";
import reportPanel from "./components/reportPanel.vue";

const { t } = useI18n();
const store = useStore();
const router = useRouter();
const tabBarHeight = computed(() => store.state.home.tabBarHeight);

// ---------- 常量 ----------
const DIAGNOSIS_GUIDE_STORAGE_KEY = "AGRI_FILE_DIAGNOSIS_REPORT_GUIDE";

const navCards = [
    {
        key: "patrol",
        labelKey: "agriFile.patrolRecord",
        icon: require("@/assets/img/agricultural/icon-1.png"),
    },
    {
        key: "album",
        labelKey: "agriFile.agriAlbum",
        icon: require("@/assets/img/agricultural/icon-2.png"),
    },
    {
        key: "report",
        labelKey: "agriFile.diagnosisReport",
        icon: require("@/assets/img/agricultural/icon-3.png"),
    },
];

// ---------- 页面状态 ----------
const activeNav = ref("patrol");
const guideVisible = ref(false);
const showUploadPopup = ref(false);
const showSuccessPopup = ref(false);
const showCompleteFarmPopup = ref(false);

/** 后续由接口控制是否展示代管授权弹窗 */
const showProxyAuthPopup = ref(false);
const proxyServiceName = ref("农服名称");

/** 后续由接口控制是否展示申请更换物候期弹窗 */
const showPhenologyUpdatePopup = ref(false);
const phenologyUpdateInfo = ref({
    serviceName: "某某农服",
    currentStage: "花穗期",
    targetStage: "小果期",
    varietyName: "荔枝-桂味",
    farmLocation: "--",
});

// ---------- 工具函数 ----------
function getMiniUserId() {
    return store.state.home.miniUserId || localStorage.getItem("MINI_USER_ID");
}

// ---------- 业务逻辑 ----------
/** 无果园信息时展示「完善农场信息」弹窗 */
async function checkCompleteFarmPopup() {
    const id = getMiniUserId();
    if (!id) {
        showCompleteFarmPopup.value = false;
        return;
    }
    try {
        const res = await VE_API.questionnaire.getFarms({ id });
        const list = Array.isArray(res?.data) ? res.data : [];
        showCompleteFarmPopup.value = list.length === 0;
    } catch (e) {
        console.warn("[agri_file] getFarms failed", e);
        showCompleteFarmPopup.value = false;
    }
}

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

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

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

// ---------- 事件处理 ----------
const openUploadPopup = (zoneId) => {
    if (!zoneId) return;
    uploadZoneId.value = zoneId;
    showUploadPopup.value = true;
};

const handleUploadConfirm = async ({ images, date } = {}) => {
    const cloud_url = Array.isArray(images) ? images : [];
    if (!cloud_url.length) {
        ElMessage.warning("请先上传照片");
        return;
    }
    const farm = getSelectedFarm();
    try {
        const res = await VE_API.questionnaire.uploadImages({
            cloud_url,
            farm_id: farm.farm_id ?? farm.id ?? "",
            zone_id: uploadZoneId.value || farm.zone_id || "",
            category_code: farm.category_code || "",
            zone_name: farm.variety_name || "",
            create_time: date,
        });
        if (res?.code === 200) {
            showSuccessPopup.value = true;
            return;
        }
        ElMessage.error(res?.msg || "上传失败，请稍后再试");
    } catch {
        ElMessage.error("上传失败，请稍后再试");
    }
};

const handleComplete = () => {
    showSuccessPopup.value = false;
};

const handleNavClick = (item) => {
    if (item.key === "report") dismissGuide();
    activeNav.value = item.key;
};

const handleOutsideClick = (event) => {
    if (!guideVisible.value) return;
    const target = event.target;
    if (
        target?.closest?.(".report-guide-bubble") ||
        target?.closest?.(".nav-card-wrap--report .nav-card")
    ) {
        return;
    }
    dismissGuide();
};

const goCompleteFarmInfo = () => {
    router.push("/entry_information");
};

const handleProxyReject = () => {
    // TODO: 调用拒绝代管接口
};

const handleProxyAllow = () => {
    // TODO: 调用允许代管接口
};

const handlePhenologyUpdateReject = () => {
    // TODO: 调用暂不更新接口
};

const handlePhenologyUpdateConfirm = () => {
    // TODO: 调用确认更新接口
};

// ---------- 生命周期 ----------
onMounted(() => {
    checkCompleteFarmPopup();
    tryShowGuide();
    document.addEventListener("click", handleOutsideClick, true);
});
onActivated(() => {
    checkCompleteFarmPopup();
    tryShowGuide();
});
onBeforeUnmount(() => {
    document.removeEventListener("click", handleOutsideClick, true);
});
</script>

<style lang="scss" scoped>
.agri-file-page {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, #d1ebff 0%, #ffffff 100%);

    .nav-cards {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: space-around;
        padding: 10px 10px;
        margin-bottom: 10px;

        .nav-card-wrap {
            position: relative;

            &--report {
                z-index: 5;
            }
        }

        .nav-card {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: #fff;
            width: 90px;
            height: 64px;
            box-shadow: 0px 4px 4px 0px #0000000d;

            .nav-card__icon {
                width: 26px;
                height: 26px;
                margin-bottom: 4px;
            }

            &.is-active {
                background: linear-gradient(180deg, #5bb8ff 0%, #2199f8 100%);
                box-shadow: 0 4px 10px rgba(33, 153, 248, 0.28);

                .nav-card__icon {
                    filter: brightness(0) invert(1);
                }

                .nav-card__label {
                    color: #fff;
                }

                &::after {
                    content: "";
                    position: absolute;
                    left: 50%;
                    bottom: -5px;
                    transform: translateX(-50%);
                    border-left: 6px solid transparent;
                    border-right: 6px solid transparent;
                    border-top: 6px solid #2199f8;
                    z-index: 3;
                }
            }
        }

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

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

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

            &__link {
                padding: 0 2px;
                color: #2199f8;
                cursor: pointer;
            }
        }
    }

    .content-panel {
        flex: 1;
        overflow-y: auto;
        background: linear-gradient(360deg, rgba(229, 243, 255, 0.55) 0%, rgba(255, 255, 255, 0.55) 100%);
        border-radius: 20px 20px 0 0;
        border: 1px solid #ffffff;
        padding: 18px 10px;

        &::-webkit-scrollbar {
            display: none;
        }
    }
}

.bottom-btn-container {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;

    .bottom-btn {
        padding: 0 25px;
        border-radius: 4px;
        font-size: 16px;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        font-weight: 500;
        text-align: center;

        &.primary-btn {
            flex: 1;
            background: #2199f8;
            color: #fff;
        }
    }
}
</style>