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

<template>
    <div class="region-albums">
        <div class="region-albums__hero" :style="heroStyle">
            <div class="region-albums__hero-mask" :class="{ 'is-light': isEmpty }"></div>
            <div class="region-albums__nav" @click="goBack">
                <el-icon class="region-albums__back-icon" color="#fff" :size="18">
                    <ArrowLeftBold />
                </el-icon>
            </div>
            <div class="region-albums__hero-info">
                <div class="region-albums__title">
                    {{ regionName }}
                    <el-icon class="edit-icon"><EditPen /></el-icon>
                </div>
                <div class="region-albums__count">
                    <img class="count-icon" src="@/assets/img/agricultural/img-icon.png" alt="">
                    {{ t("agriFile.photoCount", { count: totalCount }) }}
                </div>
            </div>
        </div>

        <div class="region-albums__panel" v-loading="loading">
            <div class="region-albums__panel-content">
                <div v-if="!loading && isEmpty" class="region-albums__empty">
                    <img
                        class="region-albums__empty-icon"
                        src="@/assets/img/agricultural/empty.png"
                        alt=""
                    />
                    <div class="region-albums__empty-text">{{ t("agriFile.emptyAlbumTip") }}</div>
                    <div class="region-albums__empty-text-hint">照片会按上传日期自动归档</div>
                </div>

                <div v-else class="region-albums__album-list">
                    <div
                        v-for="group in dateGroups"
                        :key="group.date"
                        class="album-group"
                    >
                        <div class="album-group__header">
                            <div class="album-group__date">{{ group.dateLabel }}</div>
                            <div v-if="group.remark" class="album-group__remark">{{ group.remark }}</div>
                        </div>
                        <div class="album-group__grid">
                            <div
                                v-for="(item, index) in group.list"
                                :key="item.id || `${group.date}-${index}`"
                                class="album-group__item"
                                @click="previewImage(group, index)"
                            >
                                <img class="album-group__img" :src="item.url" alt="" loading="lazy" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="region-albums__fab" @click="handleAdd">
            <el-icon :size="28" color="#1A1408"><Plus /></el-icon>
        </div>

        <album-upload-popup
            v-model:show="showUploadPopup"
            @confirm="handleUploadConfirm"
        />

        <ImagePreviewPopup
            v-model:show="showPreview"
            :images="previewImages"
            :start-index="previewIndex"
            :show-remark="true"
            @remark-change="handleRemarkChange"
            @remark-confirm="handleRemarkConfirm"
        />
    </div>
</template>

<script setup>
import { computed, onActivated, onDeactivated, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { ArrowLeftBold, Plus } from "@element-plus/icons-vue";
import { base_img_url2, resize_300 } from "@/api/config";
import { useI18n } from "@/i18n";
import ImagePreviewPopup from "@/components/popup/ImagePreviewPopup.vue";
import albumUploadPopup from "../components/albumUploadPopup.vue";

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

const loading = ref(false);
const farmImgs = ref([]);
const imageCount = ref(0);
const zoneNameFromApi = ref("");
const imageList = ref([]);
const showPreview = ref(false);
const previewImages = ref([]);
const previewIndex = ref(0);
const showUploadPopup = ref(false);

const farmId = computed(() => route.query.farm_id || "");
const zoneId = computed(() => route.query.zone_id || "");

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

const regionName = computed(
    () => zoneNameFromApi.value || route.query.name || t("agriFile.zoneOne")
);

const totalCount = computed(() => imageCount.value);

const heroCover = computed(() => {
    const first = imageList.value[0];
    return first?.url || "";
});

const heroStyle = computed(() => {
    if (!heroCover.value) {
        return {
            background: "linear-gradient(180deg, #8ec8f5 0%, #5aadeb 55%, #3d9ae0 100%)",
        };
    }
    return {
        backgroundImage: `url(${heroCover.value})`,
    };
});

const formatDateLabel = (dateStr) => {
    const raw = String(dateStr || "").slice(0, 10);
    const parts = raw.split("-");
    if (parts.length < 3) return raw;
    return `${parts[0]}年${parts[1]}月${parts[2]}日`;
};

const resolveImageUrl = (path, compact = false) => {
    if (!path) return "";
    const text = String(path).trim();
    if (!text) return "";
    if (/^https?:\/\//i.test(text)) return text;
    return `${base_img_url2}${text.replace(/^\//, "")}${compact ? resize_300 || "" : ""}`;
};

const dateGroups = computed(() =>
    (farmImgs.value || []).map((group) => ({
        date: group.time || "",
        dateLabel: formatDateLabel(group.time),
        remark: group.desc || "",
        list: (group.imgList || []).map((img) => ({
            id: img.id,
            url: resolveImageUrl(img.cloud_url, true),
            fullUrl: resolveImageUrl(img.cloud_url),
            uploadDate: group.time || String(img.created_time || "").slice(0, 10),
            growText: img.desc || group.desc || "",
            zone_name: img.zone_name || "",
        })),
    }))
);

const isEmpty = computed(() => !loading.value && !imageList.value.length);

const applyAlbumData = (data) => {
    const groups = Array.isArray(data?.farmImgs) ? data.farmImgs : [];
    farmImgs.value = groups;
    imageCount.value = Number(data?.image_count) || 0;
    zoneNameFromApi.value = groups[0]?.imgList?.[0]?.zone_name || "";
    imageList.value = groups.flatMap((group) =>
        (group.imgList || []).map((img) => ({
            id: img.id,
            url: resolveImageUrl(img.cloud_url, true),
            fullUrl: resolveImageUrl(img.cloud_url),
            uploadDate: group.time || String(img.created_time || "").slice(0, 10),
            growText: img.desc || group.desc || "",
            zone_name: img.zone_name || "",
        }))
    );
};

const fetchAlbumImages = async () => {
    if (!farmId.value || !zoneId.value) {
        applyAlbumData(null);
        loading.value = false;
        return;
    }
    loading.value = true;
    try {
        const res = await VE_API.questionnaire.getZoneImages({
            farm_id: farmId.value,
            zone_id: zoneId.value,
        });
        if (res?.code === 200) {
            applyAlbumData(res.data);
        } else {
            applyAlbumData(null);
            if (res?.msg) ElMessage.error(res.msg);
        }
    } catch {
        applyAlbumData(null);
        ElMessage.error("获取相册失败，请稍后再试");
    } finally {
        loading.value = false;
    }
};

const formatPreviewDate = (dateStr) => {
    const raw = String(dateStr || "").slice(0, 10);
    return raw ? raw.replace(/-/g, "/") : "";
};

const previewImage = (group, index) => {
    previewImages.value = group.list.map((item) => ({
        url: item.fullUrl || item.url,
        date: formatPreviewDate(item.uploadDate),
        // 临时物候标签，有正式字段后替换
        tag: item.phenologyName || item.tag || "预测物候期",
        remark: item.growText || item.watermarkMsg || "",
        id: item.id,
    }));
    previewIndex.value = index;
    showPreview.value = true;
};

const handleRemarkChange = ({ index, remark }) => {
    const previewItem = previewImages.value[index];
    if (!previewItem) return;
    previewItem.remark = remark;
};

const handleRemarkConfirm = ({ index, remark, image }) => {
    const previewItem = previewImages.value[index];
    if (previewItem) previewItem.remark = remark;
    // 回写到列表数据（临时本地保存，后续可接保存备注接口）
    const targetId = image?.id || previewItem?.id;
    if (targetId == null) return;
    const target = imageList.value.find((item) => String(item.id) === String(targetId));
    if (target) {
        target.growText = remark;
    }
};

const handleAdd = () => {
    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();
    const farmIdVal = farmId.value || farm.farm_id || farm.id || "";
    const zoneIdVal = zoneId.value || farm.zone_id || farm.zoneId || "";
    if (!farmIdVal || !zoneIdVal) {
        ElMessage.warning("缺少农场或地块信息");
        return;
    }
    try {
        const res = await VE_API.questionnaire.uploadImages({
            cloud_url,
            farm_id: farmIdVal,
            zone_id: zoneIdVal,
            category_code: farm.category_code || "",
            zone_name: regionName.value || farm.variety_name || "",
            create_time: date,
        });
        if (res?.code === 200) {
            await fetchAlbumImages();
            return;
        }
        ElMessage.error(res?.msg || "上传失败，请稍后再试");
    } catch {
        ElMessage.error("上传失败，请稍后再试");
    }
};

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

const syncAlbumByRoute = () => {
    fetchAlbumImages();
};

onMounted(() => {
    syncAlbumByRoute();
});

onActivated(() => {
    syncAlbumByRoute();
});

onDeactivated(() => {
    showPreview.value = false;
});
</script>

<style lang="scss" scoped>
.region-albums {
    min-height: 100vh;
    background: #1A191D;
    position: relative;

    &__hero {
        position: relative;
        height: 160px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    &__hero-mask {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.25) 0%,
            rgba(0, 0, 0, 0.05) 45%,
            rgba(0, 0, 0, 0.35) 100%
        );

        &.is-light {
            background: url('@/assets/img/agricultural/album-bg.png') no-repeat center center /100% 100%;
        }
    }

    &__nav {
        position: absolute;
        z-index: 2;
        top: 14px;
        left: 12px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.25);
        cursor: pointer;
    }

    &__hero-info {
        position: absolute;
        z-index: 2;
        left: 12px;
        bottom: 36px;
    }

    &__title {
        font-size: 18px;
        line-height: 27px;
        font-weight: 500;
        color: #fff;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
        .edit-icon {
            margin-left: 10px;
            font-size: 16px;
            cursor: pointer;
        }
    }

    &__count {
        margin-top: 4px;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0 6px;
        height: 28px;
        border-radius: 24px;
        backdrop-filter: blur(4px);
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 14px;
        box-sizing: border-box;
        .count-icon {
            width: 20px;
            height: 20px;
            object-fit: contain;
        }
    }

    &__panel {
        position: relative;
        z-index: 3;
        margin-top: -20px;
        height: calc(100vh - 140px);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 72.15%),
linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 72.15%);
        border-radius: 12px 12px 0 0;
        padding: 1px;
        box-sizing: border-box;
        &-content {
            border-radius: 12px 12px 0 0;
            height: 100%;
            overflow-y: auto;
            background: #1A191D;
            padding: 0 6px 40px;
            box-sizing: border-box;
        }
    }

    &__empty {
        height: 100%;
        min-height: 320px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px 80px;
        box-sizing: border-box;
    }

    &__empty-icon {
        width: 131px;
        height: 90px;
        object-fit: contain;
    }

    &__empty-text {
        margin-top: 16px;
        font-size: 14px;
        line-height: 20px;
        color: rgba(255, 255, 255, 0.85);
        text-align: center;
    }

    &__empty-text-hint {
        margin-top: 5px;
        font-size: 12px;
        line-height: 18px;
        color: rgba(255, 255, 255, 0.5);
    }

    &__album-list {
        overflow-y: auto;
        height: 100%;
        padding: 0 6px 40px;
        box-sizing: border-box;
    }

    &__fab {
        position: fixed;
        right: 18px;
        bottom: 148px;
        z-index: 20;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, #FFEBC9 0%, #FFCA6D 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
}

.album-group {
    & + & {
        margin-top: 22px;
    }

    &__header {
        margin-bottom: 14px;
        padding: 0 6px;
    }

    &__date {
        font-size: 16px;
        line-height: 22px;
        color: #010101;
    }

    &__remark {
        margin-top: 2px;
        font-size: 12px;
        line-height: 18px;
        color: rgba(1, 1, 1, 0.5);
    }

    &__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    &__item {
        position: relative;
        width: 100%;
        padding-top: 100%;
        border-radius: 6px;
        overflow: hidden;
        background: #f2f2f2;
    }

    &__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}
</style>