feiniao-farm-h5/src/views/old_mini/agri_file/pages/abnormalTrack.vue

<template>
    <div class="abnormal-track-page">
        <custom-header
            :name="pageTitle"
            :isGoBack="!isFromShare"
            :isClose="isFromShare"
            :showClose="false"
            @goback="handleBack"
        />
        <div class="abnormal-track-body" v-loading="loading">
            <div class="abnormal-hero">
                <div class="abnormal-hero__top">
                    <div class="abnormal-hero__main">
                        <div class="abnormal-hero__title-row">
                            <span class="abnormal-hero__title">{{ theme }}</span>
                            <span class="abnormal-hero__tag abnormal-hero__tag--level">
                                <el-icon>
                                    <BellFilled />
                                </el-icon>
                                {{ level }}
                            </span>
                            <span class="abnormal-hero__tag abnormal-hero__tag--zone">{{ zoneName }}</span>
                        </div>
                        <div class="abnormal-head-bottom">
                          <div class="abnormal-hero__reason">{{ reason }}</div>

                          <div class="abnormal-hero__share" @click="handleShare">
                                <Icon name="share" />
                                <span>{{ t("agriFile.forward") }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="abnormal-track-content">
                <div
                    class="situation-card__head"
                    v-for="(item, index) in interactList"
                    :key="item.fw_code || index"
                >
                    <div class="situation-card__name">
                        <div class="situation-card__title">
                            <img
                                class="situation-card__icon"
                                src="@/assets/img/agricultural/gaojin.png"
                                alt=""
                            />
                            <span>{{ item.abnormal_type }}</span>
                        </div>
                        <div class="situation-card__upload" @click="handleUploadClick">
                            + {{ t("agriFile.uploadPhoto") }}
                        </div>
                    </div>
                    <!-- 互动问题 -->
                    <div class="interact-qa">
                        <div class="interact-qa__head">
                            <span class="interact-qa__tag">{{ t("agriFile.interactQuestion") }}</span>
                            <span class="interact-qa__question">{{ item.interact_problem }}</span>
                        </div>
                        <div class="interact-qa__actions">
                            <div
                                v-for="(opt, optIndex) in item.options"
                                :key="`${item.fw_code || index}-${optIndex}`"
                                class="interact-qa__option"
                                :class="{ selected: selectedMap[item.fw_code || index] === optIndex }"
                                @click="selectedMap[item.fw_code || index] = optIndex"
                            >
                                {{ opt }}
                            </div>
                            <div
                                class="interact-qa__submit"
                                :class="{ disabled: selectedMap[item.fw_code || index] == null }"
                                @click="handleSubmit(item, index)"
                            >
                                提交信息
                            </div>
                        </div>
                    </div>
                    <div class="situation-card__assess">
                        <div class="situation-card__assess-title">{{ t("agriFile.agriAssessment") }}</div>
                        <div class="situation-card__assess-desc">{{ item.interaction_reason }}</div>
                    </div>
                    <div class="situation-card__guide">
                        <div class="guide-title">{{ t("agriFile.patrolGuide") }}</div>
                        <div class="situation-card__guide-box">
                            <photo-provider :photo-closable="true">
                                <photo-consumer :src="resolveGuideImage(item.pic_url)">
                                    <img :src="resolveGuideImage(item.pic_url)" alt="" />
                                </photo-consumer>
                            </photo-provider>
                        </div>
                    </div>
                </div>
            </div>
        </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>
    </div>
</template>

<script setup>
import { computed, nextTick, onActivated, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Icon } from "vant";
import { ElMessage } from "element-plus";
import customHeader from "@/components/customHeader.vue";
import albumUploadPopup from "../components/albumUploadPopup.vue";
import tipPopup from "@/components/popup/tipPopup.vue";
import { useI18n } from "@/i18n";
import { base_img_url2 } from "@/api/config";
import wx from "weixin-js-sdk";

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

// ---------- 常量 ----------
const DEFAULT_GUIDE_IMAGE = require("@/assets/img/agricultural/patrol-guide.png");

// ---------- 页面状态 ----------
const loading = ref(false);
const submitting = ref(false);
const showUploadPopup = ref(false);
const showSuccessPopup = ref(false);
const needDraw = ref(true); // status≠1 时需先勾画种植范围
const interactList = ref([]); // ab_it_info.interact_Info 映射后的列表
const stressInfo = ref({}); // 胁迫等级等公共信息
const selectedMap = reactive({}); // fw_code/index → 选项下标
/** 与查询共用的提交上下文，保证 fw 答案与列表同源 */
const queryContext = ref({
    farm_id: null,
    zone_id: null,
    calc_date: "",
    crop_type: "",
});

// ---------- 计算属性 ----------
const pageTitle = computed(() => route.query.pageName || t("agriFile.patrolAbnormalTitle"));
const zoneId = computed(() => route.query.zoneId || route.query.id);

const firstInteract = computed(() => interactList.value[0] || null);
/** interaction_theme */
const theme = computed(
    () => firstInteract.value?.interaction_title || t("agriFile.interactTheme")
);
/** interaction_title */
const reason = computed(
    () => firstInteract.value?.interaction_theme || t("agriFile.interactReason")
);
/** stress_info.level */
const level = computed(() => {
    const lv = stressInfo.value?.level;
    if (lv == null || lv === "") return t("agriFile.riskLevel2");
    return `${lv}级`;
});
const zoneName = computed(() => {
    const farm = getSelectedFarm();
    return farm.variety_name || farm.zone_name || t("agriFile.zoneOne");
});

/** 通过分享进入：无返回箭头 */
const isFromShare = computed(() => {
    if (isTruthyFlag(route.query.fromShare)) return true;
    const paramsPage = parseMaybeJson(route.query.paramsPage);
    if (isTruthyFlag(paramsPage?.fromShare)) return true;
    const miniJson = parseMaybeJson(route.query.miniJson);
    if (isTruthyFlag(miniJson?.fromShare)) return true;
    if (isTruthyFlag(parseMaybeJson(miniJson?.paramsPage)?.fromShare)) return true;
    return false;
});

// ---------- 工具函数 ----------
function isTruthyFlag(value) {
    return value === 1 || value === "1" || value === true || value === "true";
}

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

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

function getSelectedFarmId() {
    const stored = localStorage.getItem("selectedFarmId");
    if (stored != null && stored !== "") return Number(stored);
    const farm = getSelectedFarm();
    const id = farm.farm_id ?? farm.id;
    return id != null && id !== "" ? Number(id) : null;
}

/** 农场品类编码，接口 crop_type */
const resolveCropType = (farm = getSelectedFarm()) =>
    farm.category_code || farm.categorycode || farm.crop_code || farm.crop_type || "";

function resolveImageUrl(path) {
    if (!path) return "";
    const text = String(path).trim();
    if (!text) return "";
    if (/^https?:\/\//i.test(text)) return text;
    return base_img_url2 + text.replace(/^\//, "");
}

function resolveGuideImage(picUrl) {
    return resolveImageUrl(picUrl) || DEFAULT_GUIDE_IMAGE;
}

/** interact_options 可能是 JSON 字符串 */
function parseInteractOptions(value) {
    if (Array.isArray(value)) return value.map((name) => String(name));
    const parsed = parseMaybeJson(value);
    if (Array.isArray(parsed)) return parsed.map((name) => String(name));
    return [];
}

function mapInteractItem(raw) {
    return {
        ...raw,
        options: parseInteractOptions(raw?.interact_options),
    };
}

// ---------- 业务逻辑 ----------
const fetchAbnormalInteract = async () => {
    const farm = getSelectedFarm();
    const farmId = getSelectedFarmId();
    const zId = zoneId.value || farm.zone_id || farm.zoneId;
    const cropType = resolveCropType(farm);
    if (farmId == null || zId == null || zId === "" || !cropType) {
        interactList.value = [];
        stressInfo.value = {};
        return;
    }
    // 与 patrolPanel 调试参数保持一致；正式环境改回 farmId / zId / 当天日期
    const params = {
        crop_type: cropType,
        farm_id: 321,
        zone_id: 46,
        calc_date: "2025-08-30",
    };
    queryContext.value = { ...params };
    loading.value = true;
    try {
        const res = await VE_API.questionnaire.getAbnormalInteract(params);
        if (res?.code !== 200) {
            interactList.value = [];
            stressInfo.value = {};
            return;
        }
        const data = res?.data || {};
        const abInfo = data.ab_it_info || {};
        const list = Array.isArray(abInfo.interact_Info) ? abInfo.interact_Info : [];
        interactList.value = list.map(mapInteractItem);
        stressInfo.value = abInfo.stress_info || data.stress_info || {};
    } catch (e) {
        console.warn("[abnormalTrack] getAbnormalInteract failed", e);
        interactList.value = [];
        stressInfo.value = {};
    } finally {
        loading.value = false;
    }
};

/** status=1 有范围无需勾画；status=0 无范围需要勾画 */
const fetchZoneRangeStatus = async () => {
    const farm = getSelectedFarm();
    const farmId = farm.farm_id ?? farm.id;
    const zId = zoneId.value || farm.zone_id || farm.zoneId;
    if (farmId == null || farmId === "" || zId == null || zId === "") {
        needDraw.value = true;
        return;
    }
    try {
        const res = await VE_API.questionnaire.checkZoneRange({
            farm_id: farmId,
            zone_id: zId,
        });
        needDraw.value = Number(res?.data?.status) !== 1;
    } catch (e) {
        console.warn("[abnormalTrack] checkZoneRange failed", e);
        needDraw.value = true;
    }
};

// ---------- 事件处理 / 生命周期 ----------
const handleShare = () => {
    const query = {
        askInfo: { title: "转发巡园要点", content: "是否分享给好友" },
        shareText: theme.value || "速长窗口不追肥？后期发育慢人一步，直接掉队！",
        targetUrl: "abnormal_track",
        paramsPage: JSON.stringify({
            id: route.query.id,
            zoneId: zoneId.value,
            fromShare: 1,
            ...(route.query.pageName ? { pageName: route.query.pageName } : {}),
        }),
        imageUrl: "https://birdseye-img.sysuimars.com/temp/field.png",
    };
    wx.miniProgram.navigateTo({
        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
    });
};

/** 需勾画则先画范围；否则直接上传（同 growthTrack） */
const handleUploadClick = () => {
    if (needDraw.value) {
        router.push({
            path: "/add_zone",
            query: {
                type: "farm",
                targetUrl: "/abnormal_track",
                ...(zoneId.value ? { trackId: zoneId.value } : {}),
            },
        });
        return;
    }
    showUploadPopup.value = true;
    // 原异常逻辑：勾画后进病虫害选地块 / 直接进 pest_interact
    // if (needDraw.value) {
    //     router.push({
    //         path: "/add_zone",
    //         query: {
    //             type: "farm",
    //             targetUrl: "/pest_interact",
    //             isAbnormal: "true",
    //             ...(zoneId.value ? { trackId: zoneId.value } : {}),
    //         },
    //     });
    //     return;
    // }
    // router.push({ path: "/pest_interact" });
};

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: zoneId.value || "",
            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;
    router.replace("/agri_file");
};

const handleSubmit = async (item, index) => {
    const key = item?.fw_code || index;
    const optIndex = selectedMap[key];
    if (optIndex == null) {
        ElMessage.warning(t("agriFile.pleaseSelectOption"));
        return;
    }
    const optionText = item?.options?.[optIndex];
    if (!optionText || !item?.fw_code) {
        ElMessage.warning(t("agriFile.pleaseSelectOption"));
        return;
    }
    if (submitting.value) return;
    submitting.value = true;
    try {
        const res = await VE_API.questionnaire.confirmAbnormalInteract({
            ...queryContext.value,
            fw_code: item.fw_code,
            options: String(optionText),
        });
        if (res?.code === 200) {
            ElMessage.success(t("agriFile.submitSuccess"));
            return;
        }
        ElMessage.error(res?.msg || "提交失败，请稍后再试");
    } catch (e) {
        console.warn("[abnormalTrack] confirmAbnormalInteract failed", e);
        ElMessage.error("提交失败，请稍后再试");
    } finally {
        submitting.value = false;
    }
};

const handleBack = () => {
    router.back();
};

onActivated(() => {
    fetchZoneRangeStatus();
    fetchAbnormalInteract();
    if (route.query.showUpload !== "1") return;
    nextTick(() => {
        showUploadPopup.value = true;
        const { showUpload, ...restQuery } = route.query;
        router.replace({ path: route.path, query: restQuery });
    });
});
</script>

<style lang="scss" scoped>
.abnormal-track-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #f5f5f5;

    .abnormal-track-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        .abnormal-hero {
            padding: 18px 10px 38px;
            background: #2199f8;
            color: #fff;

            &__top {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            &__title-row {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            &__title {
                font-size: 22px;
                font-family: "PangMenZhengDao";
                margin-top: -5px;
            }

            .abnormal-head-bottom {
                margin-top: 10px;
                display: flex;
                gap: 6px;
                align-items: center;
                justify-content: space-between;
            }

            &__reason {
                padding: 4px 10px;
                border-radius: 4px;
                background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
            }

            &__tag {
                flex: none;
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 1px 4px;
                border-radius: 2px;
                background: #fff;
                font-size: 12px;
            }

            &__tag--level {
                color: #ff6a6a;
            }

            &__tag--zone {
                color: #2199f8;
            }

            &__share {
                flex: none;
                display: flex;
                align-items: center;
                gap: 4px;
                padding: 4px 14px;
                border-radius: 25px;
                background: rgba(19, 125, 209, 0.5);
                color: #fff;
            }
        }
    }

    .guide-title {
        position: relative;
        z-index: 1;
        display: inline-block;
        font-size: 16px;
        font-weight: 500;

        &::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 2px;
            z-index: -1;
            width: 90px;
            height: 6px;
            border-radius: 25px;
            background: linear-gradient(90deg, #2199f8 0%, rgba(255, 255, 255, 0.37) 100%);
            opacity: 0.4;
        }
    }

    .abnormal-track-content {
        
        position: relative;
        z-index: 1;
        margin: -24px 10px 12px;
    }

    .situation-card {
        &__head {
            position: relative;
            z-index: 1;
            margin: 0 10px 12px;
            padding: 12px;
            border-radius: 10px;
            background: #fff;

            &:first-child {
                margin-top: -24px;
            }
        }

        &__name {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        }

        &__title {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #2199f8;
            font-size: 16px;
            font-weight: 500;
        }

        &__icon {
            width: 18px;
            height: 18px;
        }

        &__upload {
            flex: none;
            padding: 4px 12px;
            border-radius: 4px;
            background: #2199f8;
            color: #fff;
            font-size: 14px;
            line-height: 20px;
            cursor: pointer;
        }

        &__assess {
            margin-top: 10px;
            padding: 10px;
            border-radius: 8px;
            background: #f9f9f9;
        }

        &__assess-title {
            color: #4f4f4f;
            font-size: 16px;
            margin-top: -3px;
            font-family: "PangMenZhengDao";
        }

        &__assess-desc {
            margin-top: 4px;
            color: #9c9c9c;
        }

        &__guide {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid rgba(33, 153, 248, 0.2);
            border-radius: 8px;
            background: linear-gradient(360deg, #ffffff 90.33%, #abd8fc 116.61%, #2199f8 148.55%);
        }

        &__guide-box {
            margin-top: 12px;

            img {
                display: block;
                width: 100%;
            }
        }
    }

    .interact-qa {
        margin-top: 10px;
        padding: 10px;
        border-radius: 8px;
        background: rgba(33, 153, 248, 0.1);

        &__head {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }

        &__tag {
            flex: none;
            padding: 2px 6px;
            border-radius: 2px;
            background: #2199f8;
            color: #fff;
            font-size: 12px;
            line-height: 18px;
        }

        &__question {
            flex: 1;
            min-width: 0;
            color: #333;
            font-size: 14px;
            font-weight: 500;
        }

        &__actions {
            display: flex;
            gap: 8px;
            margin-top: 10px;
        }

        &__option {
            position: relative;
            flex: 1;
            min-width: 0;
            height: 36px;
            line-height: 36px;
            border-radius: 6px;
            background: #fff;
            border: 1px solid transparent;
            color: #666;
            font-size: 14px;
            text-align: center;
            box-sizing: border-box;
            cursor: pointer;

            &.selected {
                border-color: #2199f8;
                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;
                }
            }
        }

        &__submit {
            flex: 1;
            min-width: 0;
            height: 36px;
            line-height: 36px;
            border-radius: 6px;
            background: #2199f8;
            color: #fff;
            font-size: 14px;
            text-align: center;
            cursor: pointer;

            &.disabled {
                opacity: 0.2;
                cursor: not-allowed;
            }
        }
    }
}

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