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

<template>
    <div class="interaction-page">
        <custom-header name="农情互动" bgColor="#f2f4f5" />
        <div class="interaction-content">
            <!-- 顶部说明 -->
            <div class="intro-card">
                完善作物品种以及物候信息，精准匹配种植方案，实现精细化管理
            </div>

            <!-- 作物块（每个农场一块） -->
            <div v-for="(crop, cropIndex) in farmData.farms" :key="cropIndex" class="crop-section">
                <div class="crop-header">
                    <div class="crop-tag">{{ crop.speciesName }}</div>
                    <div class="add-btn" v-if="farmData.status === 'INIT' || isAddVariety" @click="addVariety(crop)">+
                        新增品种</div>
                </div>

                <div v-for="(region, regionIndex) in crop.regions" :key="regionIndex" class="variety-card">
                    <div class="field-row">
                        <div class="field-value" v-if="farmData.status === 'INIT' || isAddVariety">
                            <el-select v-model="region.regionId" class="variety-input" placeholder="选择品种">
                                <el-option v-for="(item, index) in crop.typeIdItems" :key="index" :label="item.name"
                                    :value="item.id" />
                                <template #footer>
                                    <el-button text bg @click="onAddOption(region)">
                                        + 增加品种
                                    </el-button>
                                </template>
                            </el-select>
                        </div>
                        <div class="tag-val" v-else>
                            {{ region.regionName }}
                        </div>
                    </div>

                    <div class="field-row">
                        <div class="field-label">当下物候期</div>
                        <div class="field-value">
                            <el-select v-model="region.phenologyId" class="select-input" placeholder="选择物候期">
                                <el-option v-for="(item, index) in crop.phenologyOptions" :key="index"
                                    :label="item.phenologyName" :value="item.phenologyId" />
                            </el-select>
                        </div>
                    </div>

                    <div class="field-row" v-if="region.phenologyId">
                        <div class="field-label">{{ getPhenologyLabel(crop, region.phenologyId) }}</div>
                        <div class="field-value">
                            <el-date-picker :editable="false" style="width: 100%" v-model="region.phenologyStartDate"
                                class="date-picker" type="date" placeholder="选择时间" format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部按钮 -->
        <div class="fixed-btn-wrap">
            <el-button class="fixed-btn" :loading="loading" @click="handleConfirm">
                确认信息
            </el-button>
        </div>
    </div>

    <tip-popup v-model:show="showTipPopup" type="success" text="您的农情报告已生成" text2="请查看" buttonText="点击查看"
        @confirm="handleTipConfirm" />


    <popup class="add-tag-popup" :z-index="2500" round v-model:show="showAddPopup" @update:show="handlePopupClose">
        <div class="tag-item">
            <div class="popup-title">新增品种名称</div>
            <el-input autofocus class="popup-input" v-model="newVarietyName" placeholder="请输入品种名称" size="large" />
        </div>
        <div class="popup-button">
            <div class="cancel" @click="handleCancelAdd">取消</div>
            <div @click="handleAddVariety">确认</div>
        </div>
    </popup>

    <!-- 勾选区域引导弹窗 -->
    <select-region-popup v-model:show="showSelectRegionPopup" :image="selectRegionImage" :title="selectRegionTitle"
        sub-title="精准匹配农情信息，高效管理分区" @confirm="handleGoSelectRegion" @skip="handleSkipSelectRegion" />
</template>

<script setup>
import { ref, nextTick, onActivated, onDeactivated, onBeforeUnmount } from "vue";
import { ElMessage } from "element-plus";
import { Popup } from "vant";
import customHeader from "@/components/customHeader.vue";
import { useRoute, useRouter } from "vue-router";
import tipPopup from "@/components/popup/tipPopup.vue";
import selectRegionPopup from "@/components/popup/selectRegionPopup.vue";

const router = useRouter();

const route = useRoute();

const isAddVariety = ref(false);
const loading = ref(false);
onActivated(() => {
    isAddVariety.value = route.query.addVariety ? true : false;

    if (isAddVariety.value) {
        getFarmTypeIdAndPhenologyList();
        // console.log("farmData", farmData.value);
        return;
    }
    const subjectId = route.query.subjectId;
    getPhenologyInitOrConfirmStatus(subjectId);
});

const farmData = ref({
    farms: [],
    status: "",
})
const getPhenologyInitOrConfirmStatus = async (subjectId) => {
    const { data } = await VE_API.farm_v3.phenologyInitOrConfirmStatus({ subjectId });
    farmData.value = data;
    if (data.status === 'INIT') {
        data.farms.forEach(item => {
            addVariety(item);
        });
    } else {
        // 大物候期确认
        data.farms.forEach(item => {
            item.regions.forEach(region => {
                region.phenologyId = region.currentPhenologyId;
                region.phenologyStartDate = region.currentPhenologyStartDate;
            });
        });
    }
    // console.log("farmData", farmData.value);
}

const getFarmTypeIdAndPhenologyList = async () => {
    const { data } = await VE_API.farm_v3.farmTypeIdAndPhenologyList({ subjectId: route.query.subjectId });
    // farmData.value.farms.forEach(item => {
    //     item.phenologyOptions = data.phenologyOptions;
    //     item.typeIdItems = data.typeIdItems;
    // });


    farmData.value.farms.push({
        phenologyOptions: data[0].phenologyOptions,
        typeIdItems: data[0].typeIdItems,
        speciesId: data[0].speciesId,
        farmId: data[0].farmId,
        speciesName: data[0].speciesName,
        regions: [
            {
                regionId: null,
                phenologyId: null,
                phenologyStartDate: "",
            }
        ]
    });
}

const addVariety = (crop) => {
    if (!Array.isArray(crop.regions)) {
        crop.regions = [];
    }
    crop.regions.push({
        regionId: null,
        phenologyId: null,
        phenologyStartDate: "",
    });
};

// 获取物候期对应的时间标签
const getPhenologyLabel = (farm, phenologyId) => {
    if (!farm?.phenologyOptions) return "选择时间";
    const found = farm.phenologyOptions.find(
        (item) => item.id === phenologyId || item.phenologyId === phenologyId
    );
    return found?.startDateLabel || "选择时间";
};

const showTipPopup = ref(false);

// 勾选区域引导弹窗相关
const showSelectRegionPopup = ref(false);
const selectRegionImage = ref("");
const selectRegionTitle = ref("勾选 区域");

// 获取第一个选择的品种名称用于弹窗标题
const getFirstSelectedVariety = () => {
    for (const farm of farmData.value.farms) {
        const selectedRegion = (farm.regions || []).find(
            (r) => r.regionId && r.phenologyId && r.phenologyStartDate
        );
        if (selectedRegion) {
            const varietyItem = (farm.typeIdItems || []).find(
                (t) => String(t.id) === String(selectedRegion.regionId)
            );
            if (varietyItem?.name) {
                return {
                    name: varietyItem.name,
                    id: varietyItem.id,
                };
            }
        }
    }
    return "";
};

const handleConfirm = async () => {
    loading.value = true;
    // INIT / 新增品种：initFarmData；CONFIRM_REPRODUCTIVE：confirmReproductivePhenology（regionPhenologyItems，每条一个区域）
    const status = farmData.value.status;
    const isInitOrAddVariety = status === "INIT" || isAddVariety.value;

    let farmDataList;
    if (isInitOrAddVariety) {
        farmDataList = farmData.value.farms
            .map((farm) => {
                const typeIdItems = (farm.regions || [])
                    .filter(
                        (r) =>
                            r.regionId && r.phenologyId && r.phenologyStartDate
                    )
                    .map((r) => {
                        const origin =
                            (farm.typeIdItems || []).find(
                                (t) => String(t.id) === String(r.regionId)
                            ) || {};
                        return {
                            id: r.regionId,
                            name: origin.name || "",
                            phenologyId: r.phenologyId,
                            phenologyStartDate: r.phenologyStartDate,
                        };
                    })
                    .filter((item) => item.id);

                return {
                    farmId: farm.farmId,
                    speciesId: farm.speciesId,
                    typeIdItems,
                };
            })
            .filter((item) => item.typeIdItems.length > 0);
    } else {
        // CONFIRM_REPRODUCTIVE：每个区域单独一条，字段 regionPhenologyItems
        farmDataList = [];
        for (const farm of farmData.value.farms) {
            const validRegions = (farm.regions || []).filter(
                (r) => r.regionId && r.phenologyId && r.phenologyStartDate
            );
            for (const r of validRegions) {
                farmDataList.push({
                    farmId: farm.farmId,
                    regionPhenologyItems: [
                        {
                            regionId: r.regionId,
                            phenologyId: r.phenologyId,
                            phenologyStartDate: r.phenologyStartDate,
                        },
                    ],
                });
            }
        }
    }

    if (!farmDataList.length) {
        ElMessage.warning("请完善信息");
        return;
    }

    const params = {
        expertMiniUserId: 81881,
        farmDataList,
    };

    const { code, msg } = await VE_API.farm_v3[
        isInitOrAddVariety ? "initFarmData" : "confirmReproductivePhenology"
    ](params);
    if (code === 0) {
        loading.value = false;
        // 从点击新增品种进来的才需要勾选区域
        if (isAddVariety.value) {
            // 显示勾选区域引导弹窗
            const variety = getFirstSelectedVariety();
            if (variety) {
                selectRegionTitle.value = `勾选 ${variety.name} 区域`;
            }
            showSelectRegionPopup.value = true;
        } else {
            showTipPopup.value = true;
        }
    } else {
        loading.value = false;
        ElMessage.error(msg || "提交失败");
    }
};

const handleSkipSelectRegion = () => {
    showSelectRegionPopup.value = false;
    showTipPopup.value = true;
};

const handleGoSelectRegion = () => {
    showSelectRegionPopup.value = false;
    router.push("/draw_area?targetUrl=growth_report&subjectId=" + route.query.subjectId);
};

// 大物候期转换所需参数// 组装为后端所需的 farmDataList 结构
// const farmDataList = farmData.value
//     .map((farm) => {
//         const regionPhenologyItems = (farm.regions || [])
//             .filter(
//                 (r) => r.regionId && r.phenologyId && r.phenologyStartDate
//             )
//             .map((r) => ({
//                 regionId: r.regionId,
//                 phenologyId: r.phenologyId,
//                 phenologyStartDate: r.phenologyStartDate,
//             }));

//         return {
//             farmId: farm.farmId,
//             regionPhenologyItems,
//         };
//     })
//     .filter((item) => item.regionPhenologyItems.length > 0);

// console.log("farmDataList", farmDataList);

// const params = {
//     farmDataList,
//     expertMiniUserId: 81881,
// }
// const {code, msg} = await VE_API.farm_v3.confirmReproductivePhenology(params);
// if(code === 0) {
//     qrCodePopupRef.value.showPopup();
// } else {
//     ElMessage.error(msg);
// }

const showAddPopup = ref(false);
const newVarietyName = ref("");
const currentVariety = ref(null); // 记录当前正在添加品种的 variety 对象

const handleAddVariety = () => {
    if (!newVarietyName.value.trim()) {
        return;
    }

    // 如果当前有正在添加品种的 variety，则自动选中新增的品种
    if (currentVariety.value) {
        currentVariety.value.variety = newVarietyName.value;
    }

    newVarietyName.value = "";
    showAddPopup.value = false;
    currentVariety.value = null;
}

const onAddOption = async (region) => {
    // 先关闭下拉菜单
    if (document.activeElement) {
        document.activeElement.blur();
    }

    // 等待下拉菜单关闭后再显示弹窗
    await nextTick();

    // 记录当前 region
    currentVariety.value = region;
    showAddPopup.value = true;
}

const handleCancelAdd = () => {
    newVarietyName.value = "";
    showAddPopup.value = false;
    currentVariety.value = null;
}

const handlePopupClose = (show) => {
    if (!show) {
        // 弹窗关闭时清空状态
        newVarietyName.value = "";
        currentVariety.value = null;
    }
}

const handleTipConfirm = () => {
    router.push("/growth_report");
}

// 离开页面/失活时清空本页状态，避免返回后数据复用导致异常
const clearPageState = () => {
    isAddVariety.value = false;
    farmData.value = { farms: [], status: "" };

    showTipPopup.value = false;
    showSelectRegionPopup.value = false;
    selectRegionImage.value = "";
    selectRegionTitle.value = "勾选 区域";

    newVarietyName.value = "";
    currentVariety.value = null;
    // 清空当前下拉记录，避免返回后仍处在“添加品种”上下文
    // 如果后续你给 currentVariety.variety 赋值，也会随 currentVariety 置空一起释放
};

onDeactivated(() => {
    clearPageState();
});

onBeforeUnmount(() => {
    clearPageState();
});
</script>

<style lang="scss" scoped>
.interaction-page {
    height: 100vh;
    box-sizing: border-box;
    background: #F2F4F5;
    font-size: 14px;
    color: #1d2129;
}

.interaction-content {
    height: calc(100% - 40px);
    overflow: auto;
    padding: 12px 10px 70px 10px;
    box-sizing: border-box;
}

.intro-card {
    padding: 10px;
    border-radius: 6px;
    background: #ffffff;
    color: #666666;
    box-shadow: 0 2px 8px rgba(15, 35, 52, 0.06);
    margin-bottom: 12px;
    line-height: 17px;
}

.crop-section {
    background: #ffffff;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(15, 35, 52, 0.04);
    margin-bottom: 10px;
}

.crop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;

    .crop-tag {
        padding: 0 16px;
        border-radius: 2px;
        background: #2199F8;
        color: #ffffff;
        font-size: 14px;
        height: 26px;
        line-height: 26px;
    }

    .add-btn {
        padding: 0 12px;
        border-radius: 4px;
        height: 26px;
        line-height: 26px;
        box-sizing: border-box;
        border: 0.5px solid rgba(33, 153, 248, 0.5);
        color: #0B84E4;
    }
}

.variety-card {
    margin-top: 8px;
    padding: 10px;
    border-radius: 5px;
    background: rgba(33, 153, 248, 0.05);
    border: 1px solid rgba(33, 153, 248, 0.2);
}

.field-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    &:last-child {
        margin-bottom: 0;
    }
}

.field-label {
    width: 118px;
    flex: none;
    font-size: 14px;
    color: #1D2129;
}

.field-value {
    flex: 1;
}

.tag-val {
    background: rgba(33, 153, 248, 0.1);
    color: #2199F8;
    border-radius: 2px;
    padding: 0 10px;
    width: fit-content;
    height: 26px;
    line-height: 26px;
    box-sizing: border-box;
}

.select-input,
.date-picker {
    width: 100%;
}

.variety-input {
    width: 110px;

    ::v-deep {
        .el-select__wrapper {
            box-shadow: none;
            background-color: rgba(33, 153, 248, 0.1);
            // box-shadow: 0 0 0 1px var(--el-border-color) inset;
        }

        .el-select__placeholder {
            color: #2199F8;
        }

        .el-select__caret {
            color: #2199F8;
        }
    }
}

.fake-select {
    height: 32px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    box-sizing: border-box;

    .text {
        color: #1d2129;
        font-size: 14px;
    }

    .arrow {
        font-size: 10px;
        color: #c0c4cc;
    }

    &.fake-select--plain {
        background: #ffffff;
    }
}


.fixed-btn-wrap {
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    background: #fff;
    padding: 10px 12px;
    box-sizing: border-box;
    // box-shadow: 0 -2px 8px rgba(15, 35, 52, 0.06);
    box-shadow: 2px 2px 4.5px 0px #00000066;

    .fixed-btn {
        min-width: 110px;
        height: 40px;
        padding: 0 30px;
        line-height: 40px;
        text-align: center;
        border-radius: 20px;
        background: linear-gradient(180deg, #70bffe, #2199f8);
        color: #ffffff;
        font-size: 14px;
    }
}

.date-input {
    height: 32px;
    border-radius: 4px;
    border: 1px dashed rgba(33, 153, 248, 0.6);
    background: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 8px;
    box-sizing: border-box;
    color: #c0c4cc;
    font-size: 14px;
}

.success-text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #000;

    .success-icon {
        width: 28px;
        height: 28px;
        margin-right: 5px;
    }
}


.add-tag-popup {
    width: 90%;
    padding: 24px 16px 20px 16px;
    background: linear-gradient(360deg, #FFFFFF 74.2%, #D1EBFF 100%);

    .popup-title {
        font-size: 16px;
        font-weight: 400;
        margin-bottom: 12px;
        color: #000000;

        .name-text {
            font-weight: 500;
            color: #2199F8;
            padding: 0 2px;
        }
    }

    .ml-2 {
        margin-left: 3px;
    }

    .popup-input {
        margin-bottom: 24px;
    }

    .popup-button {
        display: flex;

        div {
            flex: 1;
            font-size: 16px;
            padding: 9px;
            border-radius: 20px;
            background: #2199F8;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }

        .cancel {
            margin-right: 13px;
            color: #000;
            background: #fff;
            border: 1px solid #999999;
        }

        .delete {
            margin-right: 13px;
            color: #FF3D3D;
            background: #fff;
            border: 1px solid rgba(255, 61, 61, 0.4);
        }
    }
}
</style>