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

<template>
    <div class="work-detail">
        <custom-header
            v-if="!miniJson?.hideDraw"
            :name="$t('workDetail.title')"
            :isGoBack="!isFromShare"
            :isClose="isFromShare"
            :showClose="false"
            @goback="handleBack"
        />
        <div class="work-detail-content">
            <!-- 顶部状态 -->
            <div class="content-status" :class="{'done-status': statusVal === 'completed'}">
                <div class="status-l">
                    <div class="status-title">
                        <span class="status-title-text">08.18 {{ farmData.fw_name }}</span>
                        <div class="status-title-tags">
                            <span
                                v-if="farmData.isNormal"
                                class="status-sub small-tag"
                                :style="statusTagStyle[farmData?.farm_work_type]"
                            >标准类</span>
                            <span
                                v-if="farmData.isAbnormal"
                                class="status-sub small-tag isAbnormal"
                                :style="statusTagStyle[farmData?.farm_work_type]"
                            >异常类</span>
                            <span
                                v-if="farmData.isWeather"
                                class="status-sub small-tag isWeather"
                                :style="statusTagStyle[farmData?.farm_work_type]"
                            >气象类</span>
                            <span
                                v-if="farmData.isHighRisk"
                                class="status-sub small-tag isHighRisk"
                                :style="statusTagStyle[farmData?.farm_work_type]"
                            >高风险</span>
                        </div>
                    </div>
                    <div class="status-hint-card" v-if="farmData.cornerTip">
                        <div class="status-hint-text">{{ farmData.cornerTip }}</div>
                    </div>
                    <div class="status-sub-wrap" :style="getFarmWorkTypeColorStyle(farmData)" v-else>
                        <div v-if="statusVal !== 'completed'" class="status-sub" :style="statusTagStyle[farmData?.farm_work_type]">{{ farmWorkTypeObj[farmData?.farm_work_type] }}</div>
                        <div v-if="statusVal === 'completed'" class="status-sub done-status__text">
                            <el-icon size="14" class="done-status__icon"><SuccessFilled /></el-icon>
                            已完成
                        </div>
                        <!-- <div class="status-sub">
                            {{ farmData.best_time }}
                        </div> -->
                    </div>
                </div>

                <!-- <div class="status-r">
                    <img class="status-r__icon" src="@/assets/img/home/user-icon-fill.png" alt="">
                    外包农事
                </div> -->
            </div>

            <div class="work-wrap" :class="{ 'from-share': isFromShare }">
                <!-- 农事组信息 -->
                <div class="group-info group-box" v-if="farmData.fw_explain_simple">
                    <div class="group-name">
                        <div class="group-title">农情研判：</div>
                        {{ farmData.fw_explain_simple }}
                    </div>
                </div>

                <div class="box-wrap stage-card">
                    <div class="work-info">
                        <div class="execution-area-card" @click="handleViewArea">
                            <div class="execution-area-card__header">
                                <span class="title">{{ $t('agriRecordDetail.executionArea') }}</span>
                                <span class="code">{{ farmData.crop_category_name }}</span>
                            </div>
                            <div class="map-container" ref="mapContainer"></div>
                        </div>
                        <!-- <div class="area-list">
                            <div v-for="(zone, zoneIndex) in farmZones"
                                :key="`${zone.zone_name || 'zone'}-${zoneIndex}`" class="area-item">
                                <div class="area-l">
                                    {{ zone.zone_name }}
                                    <span> {{ zone.execute_time }}</span>
                                    <span class="area-tag" :style="backgroundFarmWorkStatus(farmData.work_status)">{{
                                        workStatusObj[farmData.work_status] }}</span>
                                </div>
                                <div class="area-r" @click="handleExecute(farmData?.work_status, farmData?.farm_work_type)" :style="{background:farmData?.work_status === 6 ? '#37C11B' : '#2199F8'}">{{ farmData?.work_status === 6 ? '溯源认证' : '我已完成' }}</div>
                            </div>
                        </div> -->
                        <!-- <div class="ecological-plant-card">
                            <div class="ecological-plant-text">
                                <div class="ecological-plant-line">
                                    生态种植方式：{{ ecologicalPlantingMethodText }}
                                </div>
                                <div class="ecological-plant-line ecological-plant-line--sub">
                                    来自于 {{ ecologicalExecutorOrg }}
                                </div>
                            </div>
                            <div class="ecological-plant-gallery">
                                <img v-for="(src, idx) in ecologicalPlantThumbUrls" :key="idx"
                                    class="ecological-plant-thumb" :src="src" alt="" />
                            </div>
                        </div> -->
                    </div>
                </div>

                <div class="box-wrap stage-card">
                    <div class="work-info">
                        <div class="info-item">
                            <div class="info-title"><span class="title-block"></span>{{ $t('workDetail.prescription') }}
                            </div>
                            <div class="info-value">{{ farmData.fw_precrip }}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-title"><span class="title-block"></span>{{ $t('workDetail.executeParameters')
                                }}</div>
                            <div class="info-value">{{ farmData.fw_params }}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-title"><span class="title-block"></span>{{ $t('workDetail.notes') }}</div>
                            <div class="info-value">{{ farmData.fw_atten }}</div>
                        </div>
                    </div>
                </div>

                <!-- <div class="warning-info">
                    <div class="warning-l">
                        <div class="warning-title">
                            <el-icon size="16" color="#FF953D"><WarningFilled /></el-icon>
                            存在继发危害需巡园
                        </div>
                        <div class="warning-text">{{ $t('文案文案文案文案文案') }}</div>
                    </div>
                    <div class="warning-r">{{ $t('异常记录') }}</div>
                </div> -->

                <!-- 底部按钮 -->
                <!-- <div class="fixed-btn-wrap execute-action">
                    <div class="action-item second" v-if="!miniJson?.hideDraw" @click="handleConvert">{{ $t('转发给执行人员') }}</div>
                </div> -->

                <!-- <div class="action-item primary" @click="handleExecute">{{ $t('溯源认证') }}</div> -->
            </div>
        </div>

        <div v-if="statusVal !== 'completed' && farmData.isAbnormal" class="warning-info" :class="{ 'from-share': isFromShare }">
            <div class="warning-l">
                <div class="warning-title">
                    <el-icon size="16" color="#FF953D"><WarningFilled /></el-icon>
                    发现异常后机动执行
                </div>
                <div class="warning-text">为您匹配最佳农事方案</div>
            </div>
            <div class="warning-r" @click="goGrowthTrack">巡园要点</div>
        </div>

        <div class="footer-btn" v-if="statusVal !== 'completed'" :class="{'done-btn': statusVal === 'completed'}">
            <!-- <div class="secondary-btn" @click="handleShare">转发</div> -->
            <div class="primary-btn" @click="handleComplete">我已完成</div>
        </div>
        <ExecutePopup ref="executePopupRef" @executeSuccess="getDetail" />
        <upload-tips v-model:show="showUploadTipsPopup" />
    </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { WarningFilled } from "@element-plus/icons-vue";
import wx from "weixin-js-sdk";
import customHeader from "@/components/customHeader.vue";
import { ref, computed, watch, onMounted, onActivated, onDeactivated, onBeforeUnmount, nextTick } from "vue";
import { useI18n } from "@/i18n";
import { useRouter } from "vue-router";
import { formatDate } from "@/common/commonFun";
import ExecutePopup from "./components/executePopup.vue";
import { base_img_url2 } from "@/api/config";
import UploadTips from "@/components/popup/uploadTips.vue";
import { useRoute } from "vue-router";
import AreaMap from "./components/areaMap.js";
import WKT from "ol/format/WKT.js";
import { time } from "echarts";

const route = useRoute();
const { locale } = useI18n();
const showUploadTipsPopup = ref(false);
const router = useRouter();
// const info = JSON.parse(localStorage.getItem("localUserInfo") || "{}");
const statusVal = computed(() => pageParams.value?.statusVal ?? null);

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;
    }
}

/**
 * 分享链路：dev_login 会把整份登录 query 塞进 miniJson，
 * 真正的页面参数在 miniJson.paramsPage 里（如 id、fromShare）
 */
function resolvePageParams() {
    const mini = parseMaybeJson(route.query.miniJson);
    if (mini) {
        const page = parseMaybeJson(mini.paramsPage) || {};
        return { ...mini, ...page };
    }
    const paramsPage = parseMaybeJson(route.query.paramsPage);
    if (paramsPage) {
        return { ...route.query, ...paramsPage };
    }
    return { ...(route.query || {}) };
}

const pageParams = computed(() => resolvePageParams());
const workId = computed(() => pageParams.value?.id ?? null);

/** 通过分享进入：无返回箭头、无底部转发 */
const isFromShare = computed(() => isTruthyFlag(pageParams.value?.fromShare));

const syncMiniJsonFromRoute = () => {
    miniJson.value = resolvePageParams();
};

/** 接口根级与 detail 合并后的详情（pesticideList、prescriptionList） */
const detail = ref({
    farmId: null,
    farmWorkLibId: null,
    farmWorkName: "",
    flowStatus: null,
    purpose: "",
    speciesId: null,
    speciesName: "",
    executeDate: null,
    intervelTime: null,
    remark: "",
    pesticideList: [],
    prescriptionList: [],
    confirmPicture: [],
    executeEvidence: [],
    expertName: "",
    expertPrescription: "",
    id: null,
    postId: null,
    post: null,
    expertNameFromFarmBasicInfo: "",
    rangeWkt: null,
});

/** 凭证图片统一为 { filename } */
const normalizeCropAlbum = (album) => {
    if (!album || !Array.isArray(album)) return [];
    return album
        .map((x) => {
            if (!x) return null;
            if (typeof x === "string") return { filename: x };
            if (x.filename) return x;
            return null;
        })
        .filter(Boolean);
};


const maybeShowUploadTips = () => {
    if (detail.value?.flowStatus !== 1) return;
    const shown = localStorage.getItem('upload_tips');
    if (shown === "1") return;

    localStorage.setItem('upload_tips', "1");
    showUploadTipsPopup.value = true;
};

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

const miniJson = ref(null);
const farmData = ref({});
/** 列表页带入的 agronomy_detail 缓存 */
const WORK_AGRONOMY_DETAIL_KEY = "WORK_AGRONOMY_DETAIL";

function readWorkAgronomyPayload() {
    try {
        return JSON.parse(sessionStorage.getItem(WORK_AGRONOMY_DETAIL_KEY) || "null");
    } catch {
        return null;
    }
}

/** 列表带入：agronomy_detail 原样 + 列表上的类型/状态标签 */
function applyAgronomyDetailPayload(payload) {
    if (!payload || typeof payload !== "object") return false;
    const detail =
        payload.agronomy_detail && typeof payload.agronomy_detail === "object"
            ? payload.agronomy_detail
            : payload.fw_name || payload.fw_explain_simple
              ? payload
              : null;
    if (!detail) return false;
    const workType = payload.work_type;
    const isWeather = workType === "weather_warning" || workType === "warning";
    farmData.value = {
        ...detail,
        work_id: payload.work_id ?? detail.id,
        work_type: workType,
        work_status: payload.work_status,
        status: payload.status,
        // 与列表卡片标签一致
        isNormal: payload.isNormal ?? (!isWeather && workType === "standard"),
        isAbnormal: payload.isAbnormal ?? false,
        isWeather: payload.isWeather ?? isWeather,
        isHighRisk: payload.isHighRisk ?? isWeather,
        cornerTip: payload.cornerTip || "",
    };
    return true;
}

const wktFmt = new WKT();
const MAP_CENTER_FALLBACK = "POINT(113.1093017627431 22.57454083668)";

const farmZones = computed(() => {
    const zones = farmData.value?.zones;
    if (!Array.isArray(zones)) return [];
    return zones.filter(
        (z) => z && typeof z.zone_geometry === "string" && z.zone_geometry.trim()
    );
});

/** 从地块 WKT 取首坐标作为初始中心，initZones 会 fit 到全部地块 */
function wktCenterPointFromZones(zones) {
    const list = Array.isArray(zones) ? zones : [];
    for (const zone of list) {
        const wkt = zone?.zone_geometry;
        if (!wkt || typeof wkt !== "string") continue;
        try {
            const c = wktFmt.readGeometry(wkt.trim()).getFirstCoordinate();
            return `POINT(${c[0]} ${c[1]})`;
        } catch {
            /* try next zone */
        }
    }
    return MAP_CENTER_FALLBACK;
}

function destroyWorkDetailMap() {
    areaMap.destroyMap();
}

function initWorkDetailMap() {
    nextTick(() => {
        if (!mapContainer.value) return;
        const zones = farmZones.value;
        areaMap.destroyMap();
        areaMap.initMap(wktCenterPointFromZones(zones), mapContainer.value);
        areaMap.initZones(zones);
    });
}

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

onBeforeUnmount(() => {
    destroyWorkDetailMap();
});

onActivated(() => {
    syncMiniJsonFromRoute();
    getDetail();
});

const workStatusObj = {
    0: "时间待校准",
    1: "触发待巡园",
    2: "待执行",
    3: "未激活",
    4: "已认证",
    5: "已失效",
    6: "已执行",
}

const farmWorkTypeObj = {
    1: "标准农事",
    2: "机动农事",
    3: "气象预警农事",
    4: "气象恢复农事",
    5: "异常农事",
    6: "标准施肥类",
    7: "标准防治类",
    8: "标准调节类",
}

const backgroundFarmWorkStatus = (status) => {
    let background = 'rgba(33, 153, 248, 0.1)';
    let color = '#2199F8';
    if (status === 6 || status === 4) {
        background = 'rgba(55, 193, 27, 0.1)';
        color = '#37C11B';
    } else if (status === 3 || status === 5) {
        background = 'rgba(98, 98, 98, 0.1)';
        color = '#626262';
    }
    return {
        background,
        color,
    }
}

const getDetail = () => {
    const payload = readWorkAgronomyPayload();
    const payloadId = payload?.work_id != null ? String(payload.work_id) : "";
    const id = workId.value;
    // 优先使用列表带入的 agronomy_detail
    if (payload?.agronomy_detail && (!id || !payloadId || payloadId === String(id))) {
        applyAgronomyDetailPayload(payload);
        initWorkDetailMap();
        return;
    }
    if (id == null || id === "") return;
    VE_API.monitor.getWorkDetail({ id }).then((res) => {
        if (res.code === 200 && res.data.length) {
            farmData.value = res.data[0];
            initWorkDetailMap();
        }
    });
};

const handleExecute = (status, type) => {
    const popupType = type === 5 ? 'bc' : (status === 6 ? 'sy' : 'wc')
    executePopupRef.value.openPopup(popupType);
};

/** 完成农事用手机号：优先录入信息 */
function resolveUserTel() {
    try {
        const entry = JSON.parse(localStorage.getItem("ENTRY_FARM_DATA") || "null");
        if (entry?.phone) return String(entry.phone).trim();
    } catch {
        // ignore
    }
    try {
        const userInfo = JSON.parse(localStorage.getItem("localUserInfo") || "{}");
        return String(userInfo.tel || userInfo.phone || userInfo.mobile || "").trim();
    } catch {
        return "";
    }
}

const handleComplete = async () => {
    const tel = resolveUserTel();
    const id = farmData.value?.work_id ?? workId.value;
    if (!tel) {
        ElMessage.error("缺少手机号，无法完成农事");
        return;
    }
    if (id == null || id === "") {
        ElMessage.error("缺少农事信息，无法完成");
        return;
    }
    try {
        await ElMessageBox.confirm("确认将该农事标记为已完成？", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
        });
    } catch {
        return;
    }
    try {
        const raw = await VE_API.questionnaire.updateWorkStatus({
            work_type: farmData.value?.work_type || "standard",
            work_id: id,
            tel,
        });
        const res = Array.isArray(raw) ? raw[0] : raw;
        const code = Number(res?.code);
        if (!(code === 200 || code === 0 || code === 1)) {
            ElMessage.error(res?.message || res?.msg || "完成农事失败");
            return;
        }
        ElMessage.success("农事已完成");
        router.back();
    } catch {
        ElMessage.error("完成农事失败，请稍后再试");
    }
};

watch(locale, () => {
    getDetail();
});

// 执行方式 Tab 配置
const executionTabs = [
    { label: "植保机", value: 1 },
    { label: "人工手持", value: 2 },
    { label: "地面机械", value: 3 }
];
// 每一段农事的当前执行方式（索引 -> 执行方式），默认 1：植保机
const stageExecutionMethods = ref({});
const executePopupRef = ref(null);

const hasTextValue = (val) => {
    if (val === null || val === undefined) return false;
    return String(val).trim() !== "";
};

const hasValidParamForMethod = (item, methodValue) => {
    if (!item?.params || !Array.isArray(item.params)) return false;
    const methodParam = item.params.find(
        (param) => Number(param.executionMethod) === Number(methodValue)
    );
    if (!methodParam) return false;
    return hasTextValue(methodParam.ratio) || hasTextValue(methodParam.remark);
};

const getAvailableExecutionTabs = (prescription) => {
    const list = prescription?.pesticideList;
    if (!Array.isArray(list) || !list.length) return [];
    return executionTabs.filter((tab) =>
        list.some((item) => hasValidParamForMethod(item, tab.value))
    );
};

const statusTagStyle = {
    3: {
        color: '#FF953D',
    },
    4: {
        color: '#FF953D',
    },
    5: {
        color: '#FF6A6A',
    },
};

const getFarmWorkTypeColorStyle = (farmData) => {
    const type = Number(farmData?.farm_work_type);
    const status = Number(farmData?.work_status);
    let color = '#2199F8';
    if (status === 2) {
        if(type === 3 || type === 4) {
            color = '#FF943D';
        } else if(type === 5) {
            color = '#FF6A6A';
        } else {
            color = '#2199F8';
        }
    }else if (status === 3) {
        color = 'rgba(62, 61, 61, 0.8)';
    }
    return {
        color,
    };
};

/**
 * 展示用「分段」列表：detail.pesticideList 或 prescriptionList 推导
 */
const stageList = computed(() => {
    const d = detail.value;
    if (!d) return [];

    // if (Array.isArray(d.pesticideList) && d.pesticideList.length) {
    return [
        {
            ...d,
            pesticideList: d.pesticideList,
            cropAlbum: normalizeCropAlbum(
                d.confirmPicture?.length
                    ? d.confirmPicture
                    : d.executeEvidence
            ),
        },
    ];
    // }

    // return [];
});



const handleViewArea = () => {
    router.push({
        path: "/view_area",
        query: {
            subjectId: localStorage.getItem('selectedFarmId'),
            varietyId: 2,
        },
    });
}

const goGrowthTrack = () => {
    router.push({
        path: "/growth_track",
        query: {
            id: farmData.value?.id || workId.value || route.query.id,
            type: farmData.value?.type || "growth",
        },
    });
};

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

const handleShare = () => {
    const query = {
        askInfo: { title: "转发农事", content: "是否分享给好友" },
        shareText:
            ((farmData.value?.work_name ||
            detail.value?.farmWorkName) + '  已触发，请在最佳农时内及时执行') ||
            "农事详情",
        targetUrl: "work_detail",
        paramsPage: JSON.stringify({
            id: farmData.value?.id || workId.value || route.query.id,
            fromShare: 1,
        }),
        imageUrl: "https://birdseye-img.sysuimars.com/birdseye-look-mini/work_img.png",
    };
    wx.miniProgram.navigateTo({
        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
    });
};

const handleConvert = () => {
    const query = {
        askInfo: { title: "农事执行", content: "是否分享该农事给好友" },
        shareText: `${detail.value.farmWorkName}农事 已触发，请在最佳农时内执行`,
        targetUrl: `work_detail`,
        paramsPage: JSON.stringify({ ...miniJson.value, hideDraw: true }),
        imageUrl: 'https://birdseye-img.sysuimars.com/birdseye-look-mini/work_img.png',
    };
    wx.miniProgram.navigateTo({
        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
    });
};

// 获取当前段的执行方式
const getStageExecutionMethod = (stageIndex) => {
    const stage = stageList.value?.[stageIndex];
    const availableTabs = getAvailableExecutionTabs(stage);
    if (!availableTabs.length) return 1;

    const val = stageExecutionMethods.value[stageIndex];
    const isValidSelected = availableTabs.some(
        (tab) => Number(tab.value) === Number(val)
    );
    return isValidSelected ? val : availableTabs[0].value;
};

// 根据当前执行方式，获取对应的参数（配比、单亩用量、备注）
const getPesticideParam = (item, stageIndex) => {
    if (!item?.params || !Array.isArray(item.params)) return null;
    const currentMethod = getStageExecutionMethod(stageIndex);
    return (
        item.params.find((param) => param.executionMethod === currentMethod) || null
    );
};

// 地图
const mapContainer = ref(null);
const areaMap = new AreaMap();
</script>

<style scoped lang="scss">
.work-detail {
    height: 100vh;
    background: #f2f3f5;
    display: flex;
    flex-direction: column;

    .work-detail-content {
        flex: 1;
        overflow: auto;
    }
    .footer-btn {
        height: 70px;
        background: #fff;
        box-shadow: 2px 2px 4.5px 0px rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: flex-start;
        padding: 10px 12px 0 12px;
        justify-content: center;
        box-sizing: border-box;
        &.done-btn {
            justify-content: center;
        }
        .secondary-btn {
            padding: 0 38px;
            height: 40px;
            border-radius: 20px;
            line-height: 40px;
            color: #000000;
            background: #F6F6F6;
            text-align: center;
        }
        .primary-btn {
            padding: 0 24px;
            height: 40px;
            border-radius: 20px;
            line-height: 40px;
            background: #2199F8;
            color: #fff;
        }
    }
}

.content-status {
    position: relative;
    padding: 12px;
    color: #fff;
    z-index: 1;
    min-height: 92px;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    &::after {
        content: "";
        z-index: -1;
        position: absolute;
        left: 0;
        top: 0;
        height: 140px;
        background: #2199F8;
        width: 100%;
    }

    &.done-status {
        &::after {
            background: #4ABF32;
        }
    }

    .status-l {
        flex: 1;
        min-width: 0;
        .status-title {
            font-size: 21px;
            display: flex;
            align-items: flex-start;
            gap: 9px;

            .status-title-text {
                flex: 1;
                min-width: 0;
                line-height: 1.3;
                word-break: break-word;
            }

            .status-title-tags {
                flex-shrink: 0;
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 4px;
            }

            .status-tag {
                font-size: 12px;
                color: #2199F8;
                background: #fff;
                border-radius: 2px;
                padding: 2px 5px;
                min-width: fit-content;
            }
        }

        .status-sub-wrap {
            margin-top: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .status-sub {
            font-size: 14px;
            padding: 2px 8px;
            background: #fff;
            color: #2199F8;
            width: fit-content;
            border-radius: 2px;
            &.small-tag {
                padding: 0 5px;
                height: 22px;
                line-height: 22px;
                font-size: 12px;
                white-space: nowrap;
                flex-shrink: 0;
                &.isAbnormal {
                    color: #FF6A6A;
                }
                &.isWeather {
                    color: #FDA202;
                }
                &.isHighRisk {
                    color: #FFFFFF;
                    background: #FF6A6A;
                }
            }
            .done-status__icon {
                color: #959595;
            }
            
            &.done-status__text {
                display: flex;
                align-items: center;
                gap: 4px;
                color: #959595;
            }
        }

        .status-hint-card {
            margin-top: 10px;
            display: inline-block;
            width: fit-content;
            max-width: 100%;
            background: #fff;
            border-radius: 2px;
            padding: 5px 8px;
            box-sizing: border-box;

            .status-hint-text {
                font-size: 12px;
                color: #626262;
                white-space: nowrap;
            }

            .status-hint-question {
                margin-top: 8px;
                background: #2199f8;
                border-radius: 4px;
                padding: 6px 8px;
                display: flex;
                align-items: center;
                gap: 6px;
                color: #fff;

                .status-hint-link-icon {
                    flex-shrink: 0;
                    font-size: 14px;
                }

                .status-hint-question-text {
                    flex: 1;
                    min-width: 0;
                    font-size: 12px;
                    text-decoration: underline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }

    .status-r {
        flex: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2px;
        padding: 6px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(4px);
        color: #fff;
        font-size: 12px;
        .status-r__icon {
            width: 14px;
            height: 14px;
            filter: brightness(0) invert(1);
        }
    }
}

.work-wrap {
    position: relative;
    top: 0;
    padding: 0 12px 62px;
    z-index: 2;
    // &.has-bottom {
    //     margin-bottom: 88px;
    // }

    // &.warning-info-show {
    //     // margin-bottom: 168px;
    //     margin-bottom: 88px;
    // }
    &.from-share {
        padding-bottom: 82px;
    }
}

.box-wrap {
    .work-info {
        background: #ffffff;
        border-radius: 8px;
        padding: 10px 10px;
        box-shadow: 0 2px 8px rgba(15, 35, 52, 0.06);
    }

    .photo-box {
        margin-top: 10px;
        padding: 11px 10px;
        font-size: 14px;

        .tips-text {
            color: #FA7406;
            padding: 5px 10px;
            border: 1px solid #FF953D;
            border-radius: 5px;
            margin-bottom: 10px;
            background: #fff;
        }

        .photo-title {
            color: #000;
            padding-bottom: 9px;
        }

        .photo-sub-title {
            padding-bottom: 9px;
            color: #767676;
        }
    }
}


.group-info {
    margin-bottom: 10px;
    background: #ffffff;
    border-radius: 8px;
    padding: 14px 10px 10px 10px;
    box-shadow: 0 2px 8px rgba(15, 35, 52, 0.06);

    &.group-box {
        padding: 10px;

        .group-name {
            font-size: 14px;
            color: #9C9C9C;
            .group-title {
                font-family: "PangMenZhengDao";
                font-size: 16px;
                color: #4F4F4F;
                padding-bottom: 4px;
            }

            .group-name-text {
                color: #000;
            }
        }
    }

    .group-name {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.2);

        .group-name-text {
            color: #767676;
        }
    }

    .group-sub {
        margin-top: 6px;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.45);
        line-height: 1.5;
    }
}

.stage-card+.stage-card {
    margin-top: 12px;
}

.info-item+.info-item {
    margin-top: 10px;
}

.info-item {
    .info-title {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #2199F8;
        font-weight: 500;

        .title-block {
            width: 6px;
            height: 6px;
            background: #2199F8;
            border-radius: 1px;
            transform: rotate(45deg);
        }
    }

    .info-value {
        padding-top: 4px;
        color: #ACACAC;
        line-height: 21px;
        white-space: pre-line;
    }

    .blod-text {
        font-weight: 500;
    }
}

.execution-area-card {
    .execution-area-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
            font-size: 16px;
        }

        .code {
            color: #565656;
        }
    }

    .map-container {
        width: 100%;
        height: 166px;
        margin: 12px 0 0;
        border-radius: 8px;
        overflow: hidden;
        clip-path: inset(0 round 8px);
    }
}


.area-list {
    margin-top: 10px;

    .area-item+.area-item {
        margin-top: 6px;
    }

    .area-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 6px;

        .area-l {
            display: flex;
            align-items: center;
            gap: 5px;

            .area-tag {
                background: rgba(98, 98, 98, 0.1);
                color: #626262;
                height: 22px;
                line-height: 22px;
                padding: 0 5px;
                border-radius: 2px;
                font-size: 12px;
                margin-left: 5px;
                display: inline-block;
            }
        }
        .area-r {
            background: #2199F8;
            color: #fff;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            height: 28px;
            line-height: 28px;
            padding: 0 10px;
            border-radius: 20px;
        }

    }
}

.ecological-plant-card {
    margin-top: 10px;
    border-radius: 8px;
    text-align: left;
}

.ecological-plant-text {
    color: #666666;
    font-size: 14px;
    line-height: 1.45;
}

.ecological-plant-line--sub {
    margin-top: 6px;
}

.ecological-plant-gallery {
    display: flex;
    gap: 12px;
}

.ecological-plant-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.stage-card {
    .stage-header {
        padding-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 5px;

        .stage-title {
            font-size: 16px;
            color: #000;
        }

        .title-tag {
            width: fit-content;
            font-size: 12px;
            height: 26px;
            line-height: 26px;
            color: #2199F8;
            background: rgba(33, 153, 248, 0.1);
            border-radius: 20px;
            padding: 0 8px;
        }

        .tag-0 {
            color: #FF953D;
            background: rgba(255, 149, 61, 0.1);
        }
    }

    .stage-info {
        padding: 8px 0 2px;
        border-top: 1px solid #f5f5f5;
    }
}

.form-item {
    display: flex;
    font-size: 14px;
    color: #767676;
    margin-top: 4px;

    .area-btn {
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: 0 10px;
        color: #767676;
    }

    .area-btn-right {
        padding-right: 4px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .item-name {
        padding-right: 26px;
        color: rgba(0, 0, 0, 0.2);
    }

    .item-text {
        flex: 1;
        line-height: 21px;

        &.light-text {
            color: #2199F8;
        }
    }

    .area-text {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
}

.light-text {
    color: #2199F8;
}

.stage-tabs {
    display: inline-flex;
    gap: 8px;
    margin-top: 8px;

    .tab-pill {
        padding: 0 8px;
        font-size: 14px;
        text-align: center;
        border-radius: 2px;
        height: 28px;
        line-height: 28px;
        color: #767676;
        background: rgba(171, 171, 171, 0.1);

        &.active {
            background: rgba(33, 153, 248, 0.1);
            color: #2199F8;
        }
    }
}

.prescription-wrap {
    margin-top: 10px;
    overflow: hidden;

    .prescription-title {
        padding: 8px 10px;
        font-size: 13px;
        font-weight: 500;
        border-bottom: 1px solid rgba(225, 225, 225, 0.6);
    }
}

.prescription-table {
    font-size: 12px;
    text-align: center;
    border-radius: 6px;
    border: 1px solid rgba(225, 225, 225, 0.6);

    .table-header {
        display: flex;
        background: rgba(171, 171, 171, 0.1);
        padding: 9px 6px;
        color: #767676;
    }

    .table-row {
        display: flex;
        padding: 12px 6px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        color: rgba(0, 0, 0, 0.76);

        &:last-child {
            border-bottom: none;
        }
    }

    .col {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 2px;
    }

    .col-type {
        width: 56px;
    }

    .col-name {
        flex: 1;
    }

    .col-ratio {
        width: 64px;
    }

    .col-dose {
        width: 64px;
    }
}

.prescription-remark {
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    color: #767676;
    background: rgba(171, 171, 171, 0.1);
    line-height: 21px;
}


.photo-img-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    ::v-deep {
        .PhotoConsumer {
            width: 31%;
            height: 92px;
        }
    }

    .photo-img {
        width: 100%;
        height: 100%;
        position: relative;
        box-sizing: border-box;
        border: 2px solid transparent;
        border-radius: 8px;
        overflow: hidden;

        .fail-icon {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 4px;

            .fail-icon-text {
                color: #FF943D;
                font-size: 12px;
            }
        }

        img {
            width: 100%;
            height: 100%;
            border-radius: 8px;
            object-fit: cover;
        }
    }
}

.execute-action {
    display: flex;
    align-items: center;
    justify-content: center;
    // justify-content: space-between;
    gap: 16px;

    .action-item {
        padding: 0 26px;
        height: 40px;
        line-height: 40px;
        border-radius: 26px;
        box-sizing: border-box;
        font-size: 14px;

        &.second {
            background: #ffffff;
            border: 0.5px solid rgba(153, 153, 153, 0.5);
            color: #999999;
        }

        &.primary {
            background: linear-gradient(180deg, #8ACBFF 0%, #2199F8 100%);
            color: #ffffff;
        }
    }

    &.no-share {
        justify-content: center;
    }
}

.warning-info {
    position: fixed;
    z-index: 2;
    bottom: 80px;
    left: 10px;
    width: calc(100% - 20px);
    background: linear-gradient(180deg, #FFDFC5 -13%, #FFFFFF 39%);
    border-radius: 8px;
    padding: 14px 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);

    &.from-share {
        bottom: 50px;
    }

    .warning-l {
        min-width: 0;
        flex: 1;

        .warning-title {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 16px;
            font-weight: 500;
            line-height: 20px;
            color: #FF953D;
        }

        .warning-text {
            margin-top: 2px;
            color: rgba(0, 0, 0, 0.4);
            font-size: 12px;
            line-height: 16px;
        }
    }

    .warning-r {
        flex-shrink: 0;
        background: #FF953D;
        color: #fff;
        font-size: 12px;
        cursor: pointer;
        padding: 0 16px;
        height: 32px;
        line-height: 32px;
        border-radius: 20px;
        white-space: nowrap;
    }
}

.fixed-btn-wrap {
    display: flex;
    justify-content: center;
    // justify-content: space-between;

    &.center-btn {
        justify-content: center;
    }

    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    background: #fff;
    padding: 10px 12px 36px 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;
        line-height: 40px;
        text-align: center;
        border-radius: 20px;
        background: linear-gradient(180deg, #70bffe, #2199f8);
        color: #ffffff;
        font-size: 14px;
    }
}

.map-popup {
    width: 92%;
    // max-width: 420px;
    border-radius: 8px;
    padding: 12px;
    box-sizing: border-box;
}
</style>