feiniao-farm-h5/src/components/allGarden.vue

<template>
    <div class="all-garden-page">
        <custom-header :name="t('agriFile.moreFarms')" />

        <div class="page-body">
            <div class="map-wrap">
                <div class="map-container" ref="mapContainer"></div>
                <div class="add-farm-btn" @click="handleAddFarm">
                    <el-icon><Plus /></el-icon>
                    <span>{{ t("garden.addFarm") }}</span>
                </div>
            </div>

            <div class="farm-filter">
                <el-input
                    v-model="searchFarm"
                    class="filter-search"
                    :placeholder="t('weather.searchFarm')"
                    :prefix-icon="Search"
                    style="width: 106px"
                    clearable
                />
                <div class="filter-select-wrap">
                    <el-select
                        v-model="regionVal"
                        class="filter-select"
                        :placeholder="t('weather.selectRegion')"
                        clearable
                    >
                        <el-option
                            v-for="item in regionOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                    <el-select
                        v-model="typeVal"
                        class="filter-select"
                        :placeholder="t('weather.selectCategory')"
                        clearable
                    >
                        <el-option
                            v-for="item in typeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </div>

            <div class="farm-list">
                <div
                    v-for="item in filteredFarmList"
                    :key="item.id"
                    class="farm-card"
                    @click.stop="handleEnterFarm(item)"
                    :class="{ 'is-current': item.isCurrent }"
                >
                    <div class="farm-card__header">
                        <div class="farm-card__main">
                            <div class="farm-card__title-row">
                                <span class="farm-name van-ellipsis">{{ item.name }}</span>
                                <span v-if="item.categoryLabel" class="category-tag">{{ item.categoryLabel }}</span>
                            </div>
                            <div class="farm-address van-ellipsis">
                                {{ item.rawAddress || t("common.noAddress") }}
                            </div>
                        </div>
                        <div
                            v-if="item.isCurrent"
                            class="action-btn action-btn-current"
                        >
                            {{ t("garden.currentFarm") }}
                        </div>
                        <div
                            v-else
                            class="action-btn action-btn-enter"
                            @click.stop="handleEnterFarm(item)"
                        >
                            {{ t("garden.enterFarm") }}
                        </div>
                    </div>

                    <div class="phenology-box">
                        {{ t("garden.currentPhenology") }}{{ item.phenologyText || t("garden.phenologyPlaceholder") }}
                    </div>

                    <div class="task-bar">
                        <div class="task-bar__left">
                            <img class="task-icon" src="@/assets/img/home/task.png" alt="" />
                            <span class="task-name van-ellipsis">{{ item.taskName || t("garden.taskNamePlaceholder") }}</span>
                            <span class="task-status">{{ item.taskStatus || t("garden.pendingExecute") }}</span>
                        </div>
                        <div class="task-bar__forward" @click.stop="handleForward(item)">
                            <Icon size="14" color="#2199F8" name="share" />
                            <span>{{ t("garden.forward") }}</span>
                        </div>
                    </div>
                </div>

                <div v-if="!filteredFarmList.length" class="empty-tip">
                    {{ t("garden.noFarm") }}
                </div>
            </div>
        </div>

        <div class="invite-bar">
            <div class="invite-btn" @click="handleInviteFarmer">
                <img class="invite-btn-icon" src="@/assets/img/home/user-icon.png" alt="">
                <span>{{ t("garden.inviteFarmer") }}</span>
            </div>
            <div class="invite-btn" @click="handleInviteService">
                <img class="invite-btn-icon" src="@/assets/img/home/user-icon.png" alt="">
                <span>{{ t("garden.inviteService") }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, nextTick, onActivated, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import { Plus, Search, Share, User, UserFilled } from "@element-plus/icons-vue";
import { useI18n } from "@/i18n";
import customHeader from "@/components/customHeader.vue";
import IndexMap from "@/views/old_mini/work_execute/index.js";
import { Icon } from 'vant';

const { t } = useI18n();
const router = useRouter();
const store = useStore();

const mapContainer = ref(null);
const indexMap = new IndexMap();

const farmList = ref([]);
const searchFarm = ref("");
const regionVal = ref("");
const typeVal = ref("");

const regionOptions = computed(() => {
    const set = new Set();
    farmList.value.forEach((farm) => {
        const region = farm.city || farm.farm_city || "";
        if (region) set.add(region);
    });
    return Array.from(set).map((value) => ({ label: value, value }));
});

const typeOptions = computed(() => {
    const set = new Set();
    farmList.value.forEach((farm) => {
        if (farm.categoryLabel) set.add(farm.categoryLabel);
    });
    return Array.from(set).map((value) => ({ label: value, value }));
});

const filteredFarmList = computed(() => {
    const keyword = searchFarm.value.trim().toLowerCase();
    return farmList.value.filter((farm) => {
        if (keyword && !(farm.name || "").toLowerCase().includes(keyword)) {
            return false;
        }
        if (regionVal.value) {
            const region = farm.city || farm.farm_city || "";
            if (region !== regionVal.value) return false;
        }
        if (typeVal.value && farm.categoryLabel !== typeVal.value) {
            return false;
        }
        return true;
    });
});

function resolveFarmPointWkt(farm) {
    if (farm.geom_wkt && /^POINT\s*\(/i.test(String(farm.geom_wkt).trim())) {
        return farm.geom_wkt;
    }
    if (farm.farm_location && /^POINT\s*\(/i.test(String(farm.farm_location).trim())) {
        return farm.farm_location;
    }
    return farm.geom_wkt || "";
}

function getSelectedFarmId() {
    const stored = localStorage.getItem("selectedFarmId");
    if (stored != null && stored !== "") {
        return Number(stored);
    }
    try {
        const farm = JSON.parse(localStorage.getItem("selectedFarmData") || "{}");
        const id = farm.farm_id ?? farm.id;
        return id != null && id !== "" ? Number(id) : null;
    } catch {
        return null;
    }
}

function normalizeFarmList(data) {
    const selectedId = getSelectedFarmId();
    return (data || []).map((farm) => {
        const id = farm.farm_id;
        return {
            ...farm,
            id,
            name: farm.farm_name || "",
            wkt: resolveFarmPointWkt(farm),
            farmName: farm.farm_name || "",
            rawAddress: farm.farm_address || "",
            categoryLabel: farm.variety_name || "",
            phenologyText: farm.period_name || "",
            taskName: farm.fw_name || "",
            taskStatus: farm.work_status_name || farm.work_status || "",
            isCurrent: selectedId != null && Number(id) === selectedId,
        };
    });
}

function saveSelectedFarm(farm) {
    localStorage.setItem("selectedFarmId", farm.id);
    localStorage.setItem("selectedFarmName", farm.name || "");
    localStorage.setItem("selectedFarmPoint", farm.wkt || "");
    localStorage.setItem("selectedFarmData", JSON.stringify(farm));
}

function getDefaultMapPoint() {
    const withPoint = farmList.value.find((farm) => farm.wkt);
    return withPoint?.wkt || store.state.home.miniUserLocationPoint || "POINT(113.38 23.18)";
}

function refreshMapMarkers() {
    if (!indexMap.kmap) return;
    const points = filteredFarmList.value.filter((farm) => farm.wkt);
    indexMap.initData(points, "farm_name", "wkt", true);
}

function ensureMap() {
    if (!mapContainer.value) return;
    if (!indexMap.kmap) {
        indexMap.initMap(getDefaultMapPoint(), mapContainer.value, true);
    }
    refreshMapMarkers();
    nextTick(() => {
        indexMap.kmap?.map?.updateSize?.();
    });
}

function getMiniUserId() {
    return store.state.home.miniUserId || localStorage.getItem("MINI_USER_ID");
}

function getFarmList() {
    const id = getMiniUserId();
    if (!id) {
        farmList.value = [];
        return;
    }
    VE_API.questionnaire
        .getFarms({ id })
        .then((res) => {
            const list = Array.isArray(res?.data) ? res.data : [];
            farmList.value = normalizeFarmList(list);
            nextTick(() => {
                ensureMap();
            });
        })
        .catch(() => {
            farmList.value = [];
        });
}

function handleEnterFarm(item) {
    saveSelectedFarm(item);
    ElMessage.success(t("garden.enterFarmSuccess"));
    router.back();
}

function handleAddFarm() {
    router.push("/entry_information");
}

function handleForward() {
    ElMessage.info(t("garden.forwardTip"));
}

function handleInviteFarmer() {
    ElMessage.info(t("garden.inviteTip"));
}

function handleInviteService() {
    ElMessage.info(t("garden.inviteTip"));
}

watch(filteredFarmList, () => {
    if (indexMap.kmap) {
        refreshMapMarkers();
    }
});

onMounted(() => {
    getFarmList();
    nextTick(() => {
        ensureMap();
    });
});

onActivated(() => {
    getFarmList();
    nextTick(() => {
        if (!indexMap.kmap) {
            ensureMap();
            return;
        }
        if (mapContainer.value && indexMap.kmap.map) {
            const checkAndUpdateSize = () => {
                const container = mapContainer.value;
                if (!container) return;
                const rect = container.getBoundingClientRect();
                if (rect.width > 0 && rect.height > 0) {
                    indexMap.kmap.map.updateSize();
                    refreshMapMarkers();
                } else {
                    setTimeout(checkAndUpdateSize, 100);
                }
            };
            setTimeout(checkAndUpdateSize, 200);
        }
    });
});
</script>

<style lang="scss" scoped>
.all-garden-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #f5f5f5;
    box-sizing: border-box;
}

.page-body {
    flex: 1;
    overflow: auto;
    padding: 10px 12px 108px;
    box-sizing: border-box;
}

.map-wrap {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #e8e8e8;

    .map-container {
        width: 100%;
        height: 162px;
        clip-path: inset(0 round 8px);
    }
    
    .add-farm-btn {
        position: absolute;
        right: 10px;
        bottom: 10px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 2px;
        height: 28px;
        padding: 0 10px;
        border-radius: 14px;
        background: #fff;
        color: #2199f8;
        font-size: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

.farm-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;

    .filter-select-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .filter-search {
        // flex: 1;
        min-width: 0;
    }

    .filter-select {
        width: 92px;
        flex-shrink: 0;
    }

    :deep(.el-input__wrapper),
    :deep(.el-select__wrapper) {
        min-height: 28px;
        line-height: 28px;
        height: 28px;
        padding: 0 8px;
        box-sizing: border-box;
        border-radius: 4px;
        box-shadow: 0 0 0 1px rgba(180, 180, 180, 0.4) inset;
    }
}

.farm-list {
    margin-top: 10px;
}

.farm-card {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;

    &.is-current {
        border: 1px solid #2199f8;

        .farm-name {
            color: #2199f8;
        }
    }
}

.farm-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.farm-card__main {
    flex: 1;
    min-width: 0;
}

.farm-card__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.farm-name {
    max-width: 180px;
    font-size: 14px;
    color: #1D2129;
    font-weight: 500;
}

.category-tag {
    flex-shrink: 0;
    height: 20px;
    padding: 0 8px;
    border-radius: 2px;
    background: rgba(33, 153, 248, 0.1);
    color: #2199f8;
    font-size: 12px;
    line-height: 20px;
}

.farm-address {
    margin-top: 2px;
    font-size: 12px;
    color: rgba(32, 32, 32, 0.4);
}

.action-btn {
    flex-shrink: 0;
    height: 28px;
    padding: 0 10px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 28px;
}

.action-btn-current {
    color: #fff;
    background: #2199f8;
}

.action-btn-enter {
    color: #fff;
    background: #ff953d;
}

.phenology-box {
    margin-top: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(160, 160, 160, 0.1);
    font-size: 12px;
    color: #767676;
    line-height: 18px;
}

.task-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding: 8px;
    border-radius: 6px;
    background: rgba(33, 153, 248, 0.1);
}

.task-bar__left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.task-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.task-name {
    max-width: 120px;
    font-weight: 500;
    font-size: 14px;
    color: #000;
}

.task-status {
    flex-shrink: 0;
    height: 20px;
    padding: 0 6px;
    border-radius: 2px;
    background: #2199f8;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
}

.task-bar__forward {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    color: #2199f8;
    font-size: 14px;
}

.empty-tip {
    padding: 40px 0;
    text-align: center;
    color: #86909c;
    font-size: 13px;
}

.invite-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 60px;
    z-index: 20;
    display: flex;
    justify-content: center;
    gap: 16px;
    pointer-events: none;
}

.invite-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 6px;
    min-width: 110px;
    height: 40px;
    padding: 0 16px;
    border-radius: 20px;
    background: linear-gradient(180deg, #72C1FF 0%, #2199F8 100%);
    color: #fff;
    font-size: 14px;
    // box-shadow: 0 4px 12px rgba(33, 153, 248, 0.35);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
    .invite-btn-icon {
        width: 16px;
        height: 16px;
        filter: brightness(0) invert(1);
    }
}
</style>